nav {margin: 10px 0;
     background-color: ;
     text-align: center;
     margin-left: auto;
     margin-right: auto;}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {padding:0;
        margin:0;
        list-style: none;
        position: relative;}

/* Positioning the navigation items inline */
nav ul li {margin: 0px -7px 0 0;
           display:inline-block;
           background-color: white;}

/* Styling the links */
nav a {display:block;
       padding:0 10px;
       color:#053359;
       font-size:25px;
       line-height: 60px;
       text-decoration:none;
       font-weight: bold;}

/* Background color change on Hover */
nav a:hover {background-color: white;
             color: #4DAFFF;}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {display: none;
           position: absolute;
           top: 100%;
           z-index: 100;}

/* Display Dropdowns on Hover */
nav ul li:hover > ul {display:inherit;}

/* Fisrt Tier Dropdown */
nav ul ul li {min-width:170px;
              display:list-item;
              position: relative;}

.nav1_li, .dropdown        {margin-left: 60px;
                            padding-right: 10px;
                            background-color: white;}

.nav1        {float: right;
              margin-top: 30px;
              margin-bottom: 20px;
}


footer  {background-color: #D3D3D3;
         width: 100%;
         margin: 0px;
         margin-top: 30px;
         padding: 0px;}




             
             
 body, html  {background: white;
             font-family: "Montserrat";
             margin: 0px;
             padding: 0px;}
        
        
        
.container       {width:98%;
                  min-height:100vh;
                  background-image: url(image/interior1.JPG) ;
                  background-position: center;
                  background-size: cover;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  padding-top: 40px;
                  padding:1%;}
                  
.search_bar     {width:100%;
                 max-width:700px;
                 display: flex;
                 align-items: center;
                 border-radius: 60px;
                 padding:10px 20px;
                 opacity: 85%;
                 background: white;}     
                 
.search_bar input    {background: transparent;
                      border: 0;
                      outline: none;
                      padding: 24px 20px;
                      font-size: 20px;
                      color: #053359;
                      flex: 1;}           
                      
::placeholder   {color: #053359;}   

.search_bar button i{ width: 25px;}

.search_bar button {border:0;
                    width: 60px;
                    height: 60px;
                    background: white;
                    cursor: pointer;
                    opacity: 85%;
                    border-radius: 50%;}

i {font-size: 30px;}


.index_h1  {margin-bottom: -1000px;
            margin-top: 300px;
            padding-bottom: -500px;
            color: white;
            z-index:100;
            clear: both;
            font-size: 55px;
            text-align: center;
            margin-left: auto;
            margin-right: auto;}
            
.house_index    {display: block;
            margin-left: auto;
            margin-right: auto;}            

.footer_icons, .icons   {float: right;
                         margin-right: 100px;
                         margin-top: 65px;}
                 
.copyright      {text-align: center;
                margin-left: auto;
                margin-right: auto;}
                
.logo_footer        {margin-top: 20px;
                     margin-left: 20px;}

.p_index        {font-size: 25px;
                 display: flex;
                 margin-top: 10px;
                 margin-left: auto;
                 margin-right: auto;}

    
.text_index     {display: block;
                 margin-left: auto;
                 margin-right: auto;
                 width: 70%;}
                 
.house_h2       {text-align: center; 
                 margin-left: auto;
                 font-size:30px;
                 margin-right: auto;}

.house1        {float: left;
                font-size: 25px;
                display: flex;
                width: 620px;
                margin-left: 50px;
                padding-left: 21%;
                padding-right: 5%;
                margin: 10px;}      

aside           {font-size: 25px;
                 margin-bottom: 5%;}
                 
                 
.img_agent    {width:300px;
               display: block;
               padding-top: 2%;
               padding-left: 18%;
               margin-bottom: 1%;
               margin-left: auto;
               margin-right: auto;
               height: 450px;}
               
.agent_h2    {font-size: 30px;
              margin-top: 2%;
              text-align: center; 
              margin-left: auto;
              margin-right: auto;}
              
.agent      {font-size: 25px;
             width: 50%;
             border-left: 3px solid #4DAFFF;
             padding-left: 15px;
             margin-bottom: 7%;
             display: block;
             margin-left: auto;
             margin-right: auto;}
             
.agent_contact              {float: left; 
                             padding-left: 30%;
                             margin-top: 5%;
                             margin-bottom: -100%;
                             padding-bottom: -80% ;
                             margin-left: auto;
                             margin-right: auto;}
                             
.kontakt_form       {text-align: center;
                     margin-left: auto;
                     margin-right: auto;
                     opacity:100%;
                     padding-top: 100px;
                     margin-top: 100px;
                     font-size: 25px;}
                     
.thankyou_h2        {text-align: center;
                     margin-top: 400px;
                     margin-left: auto;
                     font-size:40px;
                     margin-right: auto;}      

.contact_address, .contact_phone, .contact_email        
                {width: 20%;
                 float:left;
                 display: flex;
                 max-width: 95%;
                 font-size: 30px;
                 opacity:100%;
                 color: black;
                 margin-bottom: 30px;
                 margin-left: auto;
                 margin-right: auto;}     

.kontakt_p      {font-size: 30px;
                 color: black;} 

.contact_container      {text-align: center;
                         padding-left: 29%;
                         opacity:100%;
                         margin-left: auto;
                         margin-right: auto;
                         padding-top: 11%;}
                         
.contact_main       {background-image: url(image/interior4.jpg);
                     opacity: 80%;
                     background-position: center;
                     width: 100%;
                     min-height:100vh;
                     background-size: cover;}     
                     
.kontakt_mapa_velka, .kontakt_mapa_mala      {text-align: center;
                     margin-left: auto;
                     margin-right: auto;
                     margin-top: 20px;
                     overflow: hidden;}


                     
                     
/* For Desktop View */
@media screen and (min-width: 1024px) 
{.text_index, .p_index  {flex: 90%;
                         max-width: 90%;}}
@media screen and (min-width: 1025px) 
 {.nav2, .kontakt_mapa_mala {display: none;}}


/* For Tablet View */
@media screen and (min-width: 768px)
and (max-width: 1025px) 
{.p_index, .house1, aside {flex: 95%; 
                                    max-width: 95%;}
 aside, .house1  {padding-left: 20px;}                                        
  body, html      {max-width: 1024px;}  
  

  .house1       {margin-left: 5%;
                 padding-left: 0px;}
                 
.index_h1     {font-size: 40px;
                 margin-top:-110px;
                 margin-bottom: -420px;
                 padding-top: 500px;}    
.agent  {width: 600px;}

.kontakt_p  {flex:95%;
             width:250px;} 
.kontakt_form   {padding-top: 120px;}
.contact_phone, .contact_email  {float: left;
                                 margin-left: auto;
                                 margin-right: auto;
                                 font-size:25px;
                                 width:170px;}
.contact_container      {margin-left: 100px;
                         padding-left: 0px;
                         width: 600px;}
                         
.img_agent      {display: block;
                 padding-left: 0px;
                 margin-left: auto;
                 margin-right: auto;}                         
                         
  header{ height: 150px;} 
 .nav1, .contact_address, .kontakt_mapa_mala, .agent_contact {display: none;}
 main {margin-top: 15px;} 
  #menuToggle {margin-top: -50px;} }
 
 
 
 
/* For Mobile Phones Portrait or Landscape View */
@media screen and (max-width: 640px) 
 {.p_index, .house1, aside    {flex: 95%;
                                 max-width: 95%;} 
 
 .agent     {width: 350px;}                          
 aside, .house1  {padding-left: 20px;}                           
body, html      {max-width: 640px;}                           
 header{ height: 170px;}
   .house1       {margin: 0px;
                 padding: 0px;}     
  .index_h1     {font-size: 35px;
                 margin-top:-110px;
                 margin-bottom: -290px;
                 padding-top: 330px;} 
                 
.kontakt_p      {font-size: 25px;}                 
.contact_phone, .contact_email  {margin-right: auto;
                                 padding-left: 0px;
                                 margin-left: -110px;
                                 font-size: 25px;
                                 width:250px;}
.icons      {float: right;
             padding-right: 10px;
             margin-left: auto;
             margin-right: auto;}                                 
.contact_email      {width: 300px;}                                 
.kontakt_form   {padding-top: 200px;}
.contact_main       {min-height:80vh;}

.house_index    {width: 350px;}

.img_agent      {display: block;
                 padding-left: 0px;
                 margin-left: auto;
                 margin-right: auto;}
  .nav1, .contact_address, .kontakt_mapa_velka, .agent_contact {display: none;}
   main {margin-top: 15px;} 
  #menuToggle {margin-top: -50px;}}                     
                     
                     
                     
                     
                     
                     
                     
/* Hamburger menu */

#menuToggle
{ display: block;
  position: relative;
  top: 50px;
  left: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;}

#menuToggle a
{text-decoration: none;
  color: #232323;
  transition: color 0.3s ease;}

#menuToggle a:hover
{background-color: #4DAFFF;
             color: #FAFAF9;}


#menuToggle input
{ display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;}

/*Just a quick hamburger*/
#menuToggle span
{ display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #000000;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;}

#menuToggle span:first-child
{transform-origin: 0% 0%;}

#menuToggle span:nth-last-child(2)
{transform-origin: 0% 100%;}

/* Transform all the slices of hamburger into a crossmark.*/
#menuToggle input:checked ~ span
{ opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;}

/*But let's hide the middle one.*/
#menuToggle input:checked ~ span:nth-last-child(3)
{opacity: 0;
 transform: rotate(0deg) scale(0.2, 0.2);}

/*Ohyeah and the last one should go the other direction*/
#menuToggle input:checked ~ span:nth-last-child(2)
{transform: rotate(-45deg) translate(0, -1px);}

/*Make this absolute positioned at the top left of the screen*/
#menu
{ position: absolute;
  width: 250px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
    
  /* to stop flickering of text in safari */
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);}

#menu .li_menu
{padding: 20px 0px;
 font-size: 22px;}

/*And let's slide it in from the left */
#menuToggle input:checked ~ ul
{transform: none;}

.li_menu        {background-color: #ededed;
                 text-align: center;
                 margin-left: auto;
                 margin-right: auto;
                 display: block;}