body{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

body div {
    box-sizing: border-box;
}

/*------------Style used in <header>----------*/
@media screen and (min-width: 820px){
    .hero-image-box {
        height: 35vw;
        width: 100vw;
        position: relative;
        overflow: hidden;
    }
    .hero-image {
        width: 100vw;
        height: auto;
        position: relative;
    }
    .hero-text {
        text-align: center;
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        color:white;
        text-shadow: 2px 2px 5px black;
    }
    .hero-text h1 {
        font-size: 9vw;
    }
    .hero-text h2 {
        font-size: 2vw;
    }
    .picture_discribe{
        position: absolute;
        bottom: 10px;
        right: 10px;
        font-size: 1vw;
        color: white;
    }
    .navbar {
        background-color: #333;
        position: fixed;
        width: 100%;
        font-size: 20px;
        height: 2.5em;
        z-index: 1;
    }
    .logo_desktop {
        float: left;
        padding: 0 10px;
    }
    .logo_desktop img {
        height: 2em;
        transform: translateY(0.3em);
    }
    .navbar>a {
        float: left;
        color: white;
        text-align: center;
        padding: 0.75em;
        margin: 0;
        text-decoration: none;
        height: inherit;
        box-sizing: border-box;
    }
    .dropbtn_box{
        float: left;
        overflow: hidden;
        height: inherit;
    }
    .dropbtn {
        border: none;
        outline: none;
        color: white;
        padding: 0.75em;
        background-color: #333;
        margin: 0;
        font-size: inherit;
        height: inherit;
        
    }
    .dropdown_box {
        display: none;
        position: fixed;
        background-color: #f9f9f9;
        min-width: min-content;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: inherit; 
    }
    .dropdown_box a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;  /* <a> is an inline element */
        text-align: left;
    }
    .dropbtn_box:hover .dropdown_box {
        display: block;
    }
    .navbar>a:hover, .dropbtn:hover {
        background-color: red;
    }
    .dropdown_box a:hover {
        background-color: #ddd;
    }
    .active_page {
        background-color:goldenrod;
    }
    .active_note {
        background-color: darkseagreen;
    }
    .search_box {
        float: right;
        padding-right: 0.5em;
        margin: 0;
        height: 2.5em;
    }
    .searchicon {
        float: right;
        border: none;
        padding: 3px 5px;
        margin: 0;
        background-color: gray;
        font-size: inherit;
        transform:  translateY(calc(1.25em - 50%));
        cursor: pointer;
    }
    .searchicon img {
        height: 0.8em;
    }
    .navbar input[type=text] {
        float: right;
        margin: 0;
        padding: 3px;
        border: none; 
        border-radius: 0;
        font-size: inherit;
        transform: translateY(calc(1.25em - 50%));
        outline: none;
    }
    input[type=text]:focus + .searchicon {
        background-color: goldenrod;
    }
    .searchicon:hover {
        background-color: red;
    }
    input[type=text]:focus + .searchicon:hover {
        background-color: red;
    }
    /* display: none; element*/
    .logo_phone, .sidebar *{
        display: none;
    }
}

@media screen and (max-width: 819px) {
    .hero-image-box {
        height: 80vw;
        width: 100vw;
        position: relative;
        overflow: hidden; 
    }

    .hero-image {
        width: 100%;
        position: relative;
    }

    .hero-text {
        text-align: center;
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        color:white;
        text-shadow: 2px 2px 5px black;
    }

    .hero-text h1 {
        font-size: 9vw;
    }

    .hero-text h2 {
        font-size: 2vw;
    }

    .picture_discribe{
        position: absolute;
        bottom: 10px;
        right: 10px;
        font-size: 10px;
        color: white;
    }

    .logo_phone {
        transform: translateX(calc(50vw - 50%));
        display: inline-block;
    }
    .logo_phone img {
        height: 2em;
        transform: translateY(0.3em);
    }
    .navbar {
       display: none;
    }
    .navbar_phone {
        background-color: #333;
        position: fixed;
        width: 100%;
        font-size: 20px;
        height: 2.5em;
        z-index: 1;
    }
    .menu_icon {
        float: right;
        padding: 0 5px;
        background-color: inherit;
        height: inherit;
    }
    .menu_icon button {
        background-color: inherit;
        border: none;
        transform: translateY(50%);
    }
    .menu_icon button img {
        height: 1.5em;
    }
    .menu_icon:hover {
        background-color: red;
    }
    .sidebar{
        right: 0;
        position: fixed;
        display: none;
        z-index: 3;
        width: 70vw;
        height: 100%;
        background-color: #D9E4F5;
        font-size: 20px;
    }
    .sidebar>button {
        color: goldenrod;
        font-size: inherit;
        padding: 0.5em;
        background-color: inherit;
        border: none;
        cursor: pointer;
        width: 100%;
        margin: 0;
        text-align: left;
    }
    .sidebar a {
        color: #333;
        display: block;
        background-color: inherit;
        text-align: left;
        padding: 0.75em;
        margin: 0;
        text-decoration: none;
        height: 2.5em;
        box-sizing: border-box;
    }
    .slide_sidebar{
        animation:animateleft 0.4s;
    }
    @keyframes animateleft{
        from{right:-300px;opacity:0} 
        to{right:0;opacity:1}
    }
    div.sidebar>*:hover {
        background-color: lightgray;
    }
    .dropbtn_box{
        overflow: visible;
        height: 2.5em;
        z-index: 4;
    }

    .dropbtn {
        border: none;
        outline: none;
        color: #333;
        padding: 0.75em;
        background-color: inherit;
        margin: 0;
        font-size: inherit;
        height: inherit;
        width: 100%;
        text-align: left;
        
    }

    .dropdown_box {
        display: none;
        background-color: #D9E4F5;
        width: inherit;
        z-index: inherit; 
        font-size: 16px;
    }

    .dropdown_box a {
        float: none;
        color: black;
        padding-left: 2em;
        text-decoration: none;
        display: block;  /* <a> is an inline element */
        text-align: left;
        font-size: inherit;
    }

    .dropdown_box a:hover {
        text-decoration: underline;
    }
    
    .search_box {
        float: right;
        padding-right: 0.5em;
        margin: 0;
        height: 2.5em;
    }

    .searchicon {
        float: right;
        border: none;
        padding: 8px;
        margin: 0;
        font-size: inherit;
        transform:  translateY(calc(1.25em - 50%));
        cursor: pointer;
    }

    .searchicon img {
        height: 0.8em;
    }

    .navbar input[type=text] {
        float: right;
        margin: 0;
        padding: 6px;
        border: 2px solid #ccc; 
        font-size: inherit;
        transform: translateY(calc(1.25em - 50%));
        outline: none;
    }

    input[type=text]:focus {
        border: 2px solid goldenrod ;
    }

    input[type=text]:focus + .searchicon {
        background-color: goldenrod;
    }

    .searchicon:hover {
        background-color: red;
    }

    input[type=text]:focus + .searchicon:hover {
        background-color: red;
    }
}

/*------------Style used in <header>----------*/

/*------------Style used in gallery-----------*/
.gallery_box {
    margin-top: 20px;
    margin-left: 5vw;
    margin-right: 5vw;
    background-color: white;
    height: auto;
    text-align: center;
}

div.gallery_box a {
    color: black;
}

  @media screen and (min-width: 1008px){
    .gallery_unit {
        margin-left: calc(10vw/8);
        margin-right: calc(10vw/8);
        margin-bottom: 30px;
        border-radius: 10px;
        height: 25vw;
        width: 20vw;
        float: left;
        border: 1px solid darkgray;
        overflow: hidden;
        position: relative;
    }
    
    .gallery_unit .title {
        font-size: 25px;
        position: absolute;
        bottom: 15%;
        right: 50%;
        transform: translate(50%, 50%);
    }   
  }

  @media screen and (min-width: 641px) and (max-width: 1007px) {
    .gallery_unit {
        margin-left: calc(15vw/6);
        margin-right: calc(15vw/6);
        margin-bottom: 30px;
        border-radius: 10px;
        height: 30vw;
        width: 25vw;
        float: left;
        border: 1px solid darkgray;
        overflow: hidden;
        position: relative;
    }    
    .gallery_unit .title {
        font-size: 2.5vw;
        position: absolute;
        bottom: 15%;
        right: 50%;
        transform: translate(50%, 50%);
    }
  }

  @media screen and (max-width: 640px) {
    .gallery_unit {
        margin-left: calc(10vw/4);
        margin-right: calc(10vw/4);
        margin-bottom: 30px;
        border-radius: 10px;
        height: 50vw;
        width: 40vw;
        float: left;
        border: 1px solid darkgray;
        overflow: hidden;
        position: relative;
    }
    .gallery_unit .title {
        font-size: 4vw;
        position: absolute;
        bottom: 15%;
        right: 50%;
        transform: translate(50%, 50%);
    }
  }
  
.gallery_unit:hover {
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border: 1px solid black;
}

.gallery_unit img {
      width: auto;
      height: 70%;
}

.gallery_unit .info {
    color: gray;
    font-size: 15px;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.mail_button {
    background-color: goldenrod;
    border-radius: 10px;
    color: white;
    font-size: 20px;
    text-decoration: none;
    padding: 10px;
}

.mail_button:hover {
    background-color: red;
}