* {
	box-sizing: border-box;
}
body {
	margin: 0;
	background-color: #fbf5e9;
    border:5px solid #333;
}
/* Style the header */

header {
	background: url('3.png');
	background-repeat: no-repeat;
	background-size: auto;
	padding: 20px;
	text-align: center;
}
header p {
	font-family: sans-serif;
	font-size: 20px;
	color: #DFCFBE;
}
/* Style the top navigation bar */

nav {
	overflow: hidden;
	background-color:#3e4346;
}
/* Style the topnav links */

nav a {
	float: left;
	display: block;
	color: #DFCFBE;
	font-size: 20px;
	text-align: center;
	padding: 18px 20px;
	text-decoration: none;
}

  .mobile {
    
        background-color:#71777b;
        
        display: block;
		color: #333;
        font-size: 35px;
	    text-align: center;
        padding: 18px 20px;
	   
	    
}


div{
    
      background-color: #fbf5e9;
      border: 5px solid black;
      width: 100%;
    
    
}

form.example input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: right;
  width: 25%;
  background: #f1f1f1;
  margin-top: 10px;
}

/*Headings*/

h1 {
	font-family: sans-serif;
	font-size: 60px;
	color: #393f4d;
	-webkit-text-stroke: 1px #DFCFBE;
}
h2 {
	font-family: sans-serif;
	font-size: 50px;
	color: #393f4d;
	text-align: center;
}
/*Paragraph*/

p {
	font-family: sans-serif;
	font-size: 24px;
	color: #6B7A8F;
}
/*images */

img {
	float: left;
	width: 50%;
	margin-bottom: 20px;
	margin-right: 10px;
}
/* Style the footer */

footer {
	background-color: #3e4346;
	padding: 10px;
	height: 100px;
	
}

footer p{
    
    color:#fbf5e9;
    font: 20px;
    text-align:center;
}

form.glass button {
    
  margin-left: 80px;
  float: left;
  width: 50%;
  background: transparent;
  color: #fbf5e9;
  font-size: 48px;
  border: none;
}





/* Create three unequal columns that floats next to each other */

.column {
	float: left;
	padding: 10px;
}
/* Left and right column */

.column.side {
	width: 25%;
}
/* Middle column */

.column.middle {
	width: 50%;
}
/* Clear floats after the columns */

main:after {
	content: "";
	display: table;
	clear: both;
}





/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media screen and (max-width: 2600px) {
	.column.side, .column.middle, h1, h2, p, img, form.example input {
		width: 100%;
        
	}
}
@media(max-width: 2600px) {
	img {
       
		width: 100%;
	}
}
@media(max-width:2600px), (hover: hover) {
	a:hover {
		background-color: #fbf5e9;
	}
}


/*Tablet*/

a:hover {
	background-color: #fbf5e9;
}
@media(max-width:820px), (hover:none) {
	nav a:hover {
		background-color: inherit;
	}
}


@media(min-width: 821px) {
	form.glass button {
		display: none;
	}
}


@media(max-width: 820px) {
	img, h2, .w3-bar {
		background-color:#8a9398;
		display: block;
		color: #fbf5e9;
		width: 100%;
	}
}

@media(max-width: 820px) {
	footer, footer p {
		background-color:#3e4346;
		display: block;
		width: 100%;
        
	}
}

@media(max-width:820px) {
	    nav, nav a {
        background-color:#8a9398;
        border:3px solid #3e4346;
        color:#3e4346;
        width:100%;
	}
}


@media(max-width:820px) {
	  form.example input {
		display: none;
        
	}
}

@media(max-width: 820px), (hover:none) {
	.mobile {
		
		width: 100%;
	}
}


@media(min-width: 821px) {
	.mobile   {
		display: none;
	}
}

@media(max-width: 820px) {
	footer {
		
		height: 150px;
	}
}


@media(max-width: 820px) {
	footer p {
		
		float:left;
	}
}






/*Phone*/

@media(max-width:479px) {
	 nav, nav a,form.example input  {
		display: none;
	}
}

@media(min-width:480px) {
	 .mobile {
		display: none;
	}
}



@media(max-width: 480px) {
	 img, h2, .w3-bar {
		background-color: transparent;
		display: block;
		color: #393f4d;
		width: 100%;
	}
}

@media(max-width: 480px) {
	footer, footer p {
		background-color:#71777b;
		display: block;
		width: 100%;
        
	}
}


@media(max-width: 480px) {
	 footer {
		height:150px;
        
	}
}