html { font-size: 100%;
    width: 100%;
    overflow-x: hidden; /*This will avoid the
    webpage to scroll horizontlally*/}
    
    /************************************
    *********This concerns the CONTACT INFORMATION*/
    
    #navbar {
        margin-top: 0;
        z-index: 5; /*This is to place the menu over any other things*/
    }
    
    .navbar a:hover {
        background: #ddd;
        color: black;
      }
    
    div.contact ul {
        position: fixed;
        top: 0px;
        list-style-type: none; /* This is for eliminating any style such as points*/
        width: 100%;
        overflow: hidden;
        float: left;
        display: flex;
        height: 30px;
        padding-top: 20px;
        padding-bottom: 10px;
        background-color: white;
        padding-left: 10px;
      
    }
    
    /*this is in regard to the contact information*/
    
    
    div.contact li a {
        float: right;
        padding: 0 auto;
        margin-right: 30px;
    }
    
    
    #facebook {
        margin-right: 10px;
        margin-left: 20px;
    }
    
    div.contact {
        height: 6%;
        width: 100%;
        position: fixed;
        top: 0%;
        background-color: white;
        padding: 0% 0% 0% 0% ;
    }
    
    div.contact li a {
        position: relative;
    }
    
    #facebook {
        margin-right: 10px;
    
    }
    
    div.contact li {
        background-color: white;
        display: inline;
        font-family:"Federo";
        text-align: center;
        font-size: 120%;
        margin: 5px ;
        font-weight: bold;
        }
        
     
    div.contact li a img {
        margin-bottom: 2%;
        }
        
    
    
    /************************************
    *********This concerns the MENU*/
    
    div.menu ul {
        position: fixed;
        top: 5.5%; /*Div can overlap when the webpage becomes smaller*/
        height: 8%; /*You need to addd percentage in some elements to preserve their 
        size even when chqngin within browsers*/
        list-style-type: none; /* This is for eliminating any style such as points*/
        width: 100%;
        margin-bottom: 0 auto;
        overflow: hidden;
        float: center;
        padding-bottom: 0.20%;
        padding-top: 1%;
        background-color: white;
        z-index: 2; /*This is what makes the menu to work while being fixed*/
        
        
    }
    
    div.menu {
        height: 20%;
        width: 100%;
    }
    
    
    div.menu ul li {
        float: right;
        padding-top: 1%;
        background-color: white;
    }
    
    
    div.menu ul li a {
        display: block; /*Makes the whole link area clickeable, and show it horizontally*/
        text-align: center;
        padding-top: 1%;
        font-size: 105%;
        top: 6%;
        font-family: "Federo";
        color: black;
        margin-right: 75px;
        text-decoration: none; /*Everything related with thext has to be done on the
        last object in which it was*/
    }
    
    div.menu ul li a:hover {
        color:lightblue;
      }
    
    label {
        margin: 0 20px 0 0;
        font-size: 26px;
        line-height: 70px;
        display: none; /*This hides the element*/
    }
    
    #toggle {
        display: none;
    }
    
    /********************************************************
    ***************************************88
    **********************8888This regards the language picker*/
    
    /* The container must be positioned relative: */
    .custom-select {
        position: sticky;
        font-family: 'Federo';
        float: right;
        z-index: 5;
        margin-right: 20px;
        margin-top: 20px;
      }
    /* The container must be positioned relative: */
      .custom-select select {
        display: none; /*hide original SELECT element: */
          
    }
      
      .select-selected {
        background-color:  #e6faff;
      }
      
      /* Style the arrow inside the select element: */
      .select-selected:after {
        position: absolute;
        content: "";
        top: 14px;
        right: 10px;
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-color: #fff transparent transparent transparent;
      }
      
      /* Point the arrow upwards when the select box is open (active): */
      .select-selected.select-arrow-active:after {
        border-color: transparent transparent #fff transparent;
        top: 7px;
      }
      
      /* style the items (options), including the selected item: */
      .select-items div,.select-selected {
        color: black; /*This will change the font's color*/
        padding: 8px 16px;
        border: 1px solid transparent;
        border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
        cursor: pointer;
      }
      
      /* Style items (options): */
      .select-items {
        position: absolute;
        background-color: #e6faff;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 99;
      }
      
      /* Hide the items when the select box is closed: */
      .select-hide {
        display: none;
      }
      
      .select-items div:hover, .same-as-selected {
        background-color: rgba(39, 36, 36, 0.1);
      }
    
    /********Styling for the TEXT *********************************/
    

    
    div.first_card {
        position: relative;
        width: 80%;
        align-content: left;
        display: flex; /*This is what creates two columns*/
        height: 60%;
        padding: 5px 10px 10px 10px;
        background-color:  #e6faff;
        padding-top: 7%;
        margin: 0 auto;
      }

      div.first_card {
        position: relative;
        width: 80%;
        align-content: left;
        display: flex; /*This is what creates two columns*/
        height: 60%;    
        background-color:  white;
        margin: 0 auto;
        padding-bottom: 5%;
      }




    .intextarticles1 {
        position: relative;
        font-family: "Federo";
        font-size: 140%;
        width: 90%;
        margin-left: 0;
        text-align: left;
        line-height: 1.6;  /*To increse the size between two lines*/
        }
    
    div.text {
        display: grid;
        width: 100%;
        margin-left: 7%;
        height: 100%;
        font-family: 'Federo';
        }
    
    
    div.first_card h1 {
        font-size: 200%;
        font-family: "Federo";
        float: right;
        text-align: left;
        position: relative;
        margin-top: 4%;
        height: 20%;
        margin-bottom: 1px;
            
    }    

    div.first_card h2 {
        font-size: 150%;
        font-family: "Federo";
        float: right;
        text-align: left;
        position: relative;
        height: 20%;
        margin-bottom: 1px;
            
    }    
    
    #slideshow img.image1 {
        max-width:60%; /*This is to resize the images completely an accordingly*/
        text-align: center;
        padding: 2%;
        padding-bottom: 2%;
      }
      #slideshow img {
        max-width: 100%;
        position: relative;
        margin: 0 auto;
       
    }
  
      #slideshow { 
      width: 100%; 
      position: relative;
      padding: 10px; 
      height: 500px;
     }
  
   #slideshow  div { 
      position: absolute; 
      object-fit: contain;
      background-size: cover;
      top: 1%; 
      left: 1%; 
      right: 1%; 
      bottom: 1%; 
      height: 100%;
  }
      
    
      .main_content {
        margin-top: 30px; /* Add a top margin to avoid content overlay */
      }
     
    div.in_menu {
        width: 90%;
        object-position: center;
        text-align: center;
    }


     img.in_menu {
          max-width: 70%;
      }
      
    /****************************************************************
    IMAGE GALLERY
    ************************************************************
    *****************************/

    .row {
        display: flex;
        flex-wrap: wrap;
        padding: 0 auto;
        margin: 0 auto;
      }
      
      /* Create four equal columns that sits next to each other */
      .column {
        flex: 50%;
        max-width: 45%;
        margin: 0 auto;
      }
      
      .column img {
        margin-top: 8px;
        vertical-align: middle;
        width: 100%;
      }
      /* Responsive layout - makes a two column-layout instead of four columns */

      
      div.final_card {
        position: relative;
        width: 100%;
        align-content: center;
        display: flex;
        height: auto;
        padding: 10px 0px 0px 0px;
        background-color: white;
        top: 20px;
        margin: 0 auto; 
    }

    div.text_left {
        display: grid;
        width: 40%;
        height: 100%;
    }
    
    div.final_card h1 {
        margin: 2% auto;
        margin-bottom: 0% ;
    
    }

/*Library for animations https://github.com/michalsnik/aos
*/


div.text_final {
    display: grid;
    width: 100%;
    margin-left: 0%;
    height: 100%;
    font-size: 120%;
    text-align: center;
    height: auto;
    font-family: 'Federo';

}




div.maprouter {
    position: relative;
    width: 88.5%;
    display: inline-block;
    align-content: center;
    display: block;
    text-align: center;
    height: 40%;
    padding: 10px 10px 10px 10px;
    background-color: white;
    height: 500px;
    margin: 0 auto; 
}

div.gmap_canvas iframe {
    position: relative;
    text-align: center;
    float: center;
    margin-top: 0;
}

div.gmap_canvas h1 /*When having troubles to set an object or text
just create a new division*/
    {  font-size: 150%;
        font-family: "Federo";
        margin-left: 200%;
        text-align: center;
        padding: 10px auto;
        
        }
       /**************************
        *************************
        **********************/
/***************************
Button Information*****************/


/***************************
Button Information*****************/

footer {
    display: grid;
    text-align: center;
    object-position: center;
    padding-bottom: 2%;
}
.button {
    width: 100%;
    float: center;
    position: fixed;
    bottom: 0px;
    line-height: 35px;
}

.button a {
    text-decoration: none;
    color: white;
    
}

.button button {
    background-color: #d7fafa;
    text-decoration: none;
    font-family: 'Federo';
    float: right;
    font-size: 17px;
    padding: 1% 2% ;
    border: none;
    height: 10%;
    border-radius: 8px;
    width: 15%;
}


    @media only screen and (max-width: 600px) { /*This one will onle affects screen sizes that are less than 600px*/
    /*You need to use media queries to resize a webpage each time
    ********************************************************8
    ****************************************************
    ************************************************8
    ******************************************************88
    ************************************************************8
    ****************************************************/
    
    
     html{
         width: 100%;
         height: 100%;
         overflow-x: hidden;
     }
     
     /*Seems like you need to set both 
     body and html for it to works properly*/
     body{
        width: 100%;
        height: 100%; 
        margin: 0 0 0 0;
        overflow-x: hidden;
    }
    
    div.contact {
       display: none;
    }
    
    div.contact ul {
        display: none;
    }
    
    /*this is in regard to the contact information*/
    div.contact li {
        display: none;
    }
    
    div.contact li a {
        display: none;
    }
    
    #facebook {
        margin-right: 90px;
        display: none;
    }
    
    /******************************8
    ***********************
    *********This is to create the hamburguer menu*/
    
    header {
        background-color: white;
        padding-bottom: 5px;
        top: 0px;
        position: sticky; /*This will make the element to stick in
        one single place*/
    }
    
    label{
        display: block;
        cursor: pointer;
        top: 0;
        line-height: 30px;
        font-size: 145%;
        float: right;
        padding-top: 2%;
        position: sticky;
    }
    
    .menu {
        text-align: center;
        width: 100%;
        display: none;
    }
    #toggle:checked + .menu {
        display: block;
    }
    
    
    /**************************
    *************************
    This is to restyle the menu,
    when it is open from
    a smartphone*/
    
    .nav {
        text-align: left;
        height: 60%;
        line-height: 25px; /*This determines the size of the lines inside an a or
        an ul division*/
        overflow-y: auto;
        width: 100%;
    }
    
    div.menu ul {
        height: 40%;
        margin: 0;
        list-style-type: none; /* This is for eliminating any style such as points*/
        width: 100%;
        padding-left: 10px;
        margin-bottom: 0 auto;
        display: grid; /*This makes the menu vertical*/
        background-color: white;
        z-index: 9999; /*This is what makes the menu to work while being fixed*/
    }
    
    div.menu {
        height: 20%;
        width: 100%;
        margin: 0 30px 0 0;
    }
    
    
    div.menu ul li {
        float: center;
        height: 25px;
        background-color: white;
    }
    
    
    div.menu ul li a {
        width: 100%;
        display: inline-block; /*Makes the whole link area clickeable, and show it horizontally*/
        text-align: left;
        font-size: 100%;
        vertical-align: text-bottom;
        height: 25px;
        margin: 0 0 0 0;
        font-family: "Federo";
        padding-left: 0;
        text-decoration: none; /*Everything related with thext has to be done on the
        last object in which it was*/
    }
    
    div.menu ul li a:hover {
        color:lightblue;
        height: 30px;
      }
    
      
    div.main_image {
        padding-bottom: 1%;
        margin-bottom: 0;
        width:100%;
        height: 20%;
        padding-top: 1%;
    }
    
    img.main_image {
        padding-top: 0%;
        margin-bottom: 0 0 0 0;
        object-position: center;
        max-width: 150%; /*These two linewill*/
        height: auto; 
        padding-bottom: 0%;
        margin-bottom: 0;
    }
    
    
    /*This is to restyle the
    webpage's first card*/
    
    
      div.first_card {
        position: relative;
        width: 100%;
        display: inline-flex;
        height: 100%;
        padding: 0 0 0 0;
        background-image: linear-gradient(#e6faff);
        padding-top: 20px;
        overflow: hidden;
      }
    
    .intextarticles1 {
        font-family: "Federo";
        font-size: 120%;
        width: 80%;
        text-align: left;
        margin-top: 0;
        line-height: 140%;
        float: center; 
        margin-left: 8%; /*To increse the size between two lines*/
        }
    
    .premier {
            font-family: "Federo";
            font-size: 120%;
            width: 80%;
            text-align: left;
            margin-top: 0;
            line-height: 140%;
            float: center; 
            margin-left: 8%; /*To increse the size between two lines*/
            }
    
        
    
    div.text {
        display: inline-block;
        position: relative;
        width: 100%;
        margin-left: 0%;
        padding-left: 0;
        }
    
    
    
    div.first_card h1 {
        font-size: 170%;
        font-family: "Federo";
        float: left;
        width: 100%;
        text-align: center;
        position: relative;
        margin-top: 3%;
        height: auto;
        margin-bottom: 10px;
    
    }   

    div.first_card h2 {
        font-size: 150%;
        font-family: "Federo";
        float: left;
        width: 90%;
        margin-left: 8%;
        text-align: left;
        position: relative;
        margin-top: 3%;
        height: auto;
        margin-bottom: 10px;
    
    }   
    
  
    div.in_menu {
        width: 100%;
        object-position: center;
        text-align: center;
        padding-bottom: 2% ;
    }


     img.in_menu {
          max-width: 80%;
      }


      /*main image css content*/
    
    
    div.main_content {
        margin-top: 0.2%; /* Add a top margin to avoid content overlay */
    }

    div.row {
        width: 100%;
        padding-bottom: 7%;
    }
    
    
    /****************************************************
    RESTYLING SECOND IMAGE*/
    
    
    
    
        /*Should I creqte a single space between each one*/
    .image2 { 
        
            max-width:80%; /*This is to resize the images completely an accordingly*/
            height:auto;
            padding-left: 5%;
            padding-bottom: 10%;
            margin: 1px auto;
            display: block;
            position: relative;
            overflow: hidden;
        }
 
    
    /****************************************8
    ********************************RESTYLING
                       MAP  */
                       div.final_card {
                        position: relative;
                        width: 100%;
                        align-content: center;
                        display: flex;
                        height: 60%;
                        padding: 10px 0px 0px 0px;
                        background-color:  #e6faff;
                        top: 20px;
                         margin: 0 auto; 
                                }
                   
                   
                    
       
        div.maprouter {
            position: relative;
            width: 100%;
            display: inline-block;
            align-content: center;
            display: block;
            text-align: center;
            height: 40%;
            background-color: #e6faff;
            height: 300px;
            padding: 0 0 0 0;
          margin: 0 auto; 
            padding-top: 4%;
        }
        
        div.gmap_canvas iframe {
            position: relative;
            text-align: center;
            float: center;
            width: 70%; /*Helps to se the image properly*/
        }
        
    /*What you do here may also affect the rest of the page
    if the attribute is not definied */        
                
                div.text_final {
                                display: block;
                                width: 100%;
                                height: 100%;
                                text-align: center;
                                font-family: 'Federo';
                                
                            }
                
                 div.text_final p {
                                width: 90%;
                                margin-left: 4%;
                                
                            }
                            footer {
                                display: grid;
                                text-align: center;
                                object-position: center;
                                padding-bottom: 15%;
                            }
                            .button {
                                width: 100%;
                                position: fixed;
                                bottom: 0px;
                                
                        
                            }
                            
                            .button a {
                                text-decoration: none;
                                color: white;
                                
                            }
                            
                            .button button {
                                background-color: #d7fafa;
                                text-decoration: none;
                                font-family: 'Federo';
                                font-size: 18px;
                                padding: 1% 2% ;
                                float: none;
                                border: none;
                                height: 20%;
                                width: 47%;
                                border-radius: 8px;
                            }
                
                .button i {
                    font-size:18px;
                     padding-bottom: 1.5%;
                     padding-top: 2%;
                }