tissotwatches.css

* { box-sizing: border-box; }
header, nav, main, footer { display: block; }
body { background-color: #CCCCCC ;
      color: #000000;
	  font-family: 'Times New Roman', Times, serif;	  
}
header { background-color: rgb(175, 170, 170);
	   background-position:right;
	   background-repeat:no-repeat;
	   height: 170px;
	   text-align: left;
	   background-image: url("lg.jpg");
	   font-weight: bolder;
	   font-size: 25px;
	  
	   

}
h1 { padding-top: 60px;
    padding-left: 2em;
	
}
nav { font-weight: bold; 
	float: left;
    padding: 1em;
	width:10%;
}
nav a { text-decoration: none; 
       display: block;
	   text-align: center;
	   font-weight: bold;
	   border: 3px #CCCCCC outset;
	   padding: 1em;
	   margin-bottom: 1em;
	   background-color: rgb(175, 170, 170);
}
nav a:link { color: #0b0a0c; }
nav a:visited { color: #0b0a0c; }
nav a:hover { color: rgb(136, 14, 14); 
             border: 3px rgb(129, 7, 7) inset; }
nav ul { list-style-type: none; 
       padding-left: 0;
}
.shop {
	margin-top: 5%;
	font-family: "PorterBold";
	padding-left: 4%;
	font-size: 24px;
	text-align: center;
  }

  .cards {
	margin-top: 40px;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
  }
  .card {
	background-color: #dddddd;
	margin: 10px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	padding: 10px;
	max-width: 300px;
  }
  .card:hover{
	cursor: pointer;
	color: rgb(136, 14, 14);
  }
  .card button {
	font-family: "PorterBold";
	background-color: #c5c5c5;
	border: none;
	padding: 8px;
	margin-top: 12px;
	cursor: pointer;
	width: 80px;
	margin-bottom: 10px;
  }
  .card button:hover {
	transform: scale(1.1);
	transition: 0.2s;
  }
  .card img {
	max-width: 300px;
	height: 300px;
  }
  .card img:hover{
	transform: scale(1.02);
	transition: 0.2s;
  }

  .tagline {
	text-align: center;
	font-family: "PorterBold";
	font-size: 26px;
	margin-top: 20px;
  }
  .tagline button {
	font-family: "PorterBold";
	background-color: rgb(175, 170, 170);
	border-width: 3px;
	font-weight: bold;
	border:black;
	padding: 8px;
	margin-top: 12px;
	cursor: pointer;
  }
  .tagline button a {
	color: black;
	text-decoration:none;
  }
  .tagline button:hover {
	transform: scale(1.2);
	transition: 0.2s;
  }


.abc{
	text-align: center;
}

footer { background-color: rgb(175, 170, 170);
	   font-style: italic;
	   text-align: center;
	   padding: 0.5em;
}
main { padding-left: 2em;
      padding-right: 12em;
	  display: block;
	  margin-left: 170px;
	  padding-top: 1em;
}
.floatleft { float: left;
             margin-right: 4em; 
}
.clear { clear: both; 
        }
.column{
	column-count: 4;
	column-rule: inherit;
	column-rule-style:double;
	column-width:inherit;
}
#wrapper { width: 200%;
           margin-left: auto;
		   margin-right: auto;
		   background-color: #e0dddd;
		   min-width: 1400px;
		   max-width: 1500px;
		   background-image: url(bg.jpg);
		   background-position:inherit;
}
#mobile { display: none; }
#desktop { display: inline; } 



input, textarea { display: block;
              margin-bottom: 2em; 
		
}

form { padding-bottom: 3em; }
@media only screen and (max-width: 1024px) {
	body { margin: 0;
	      padding: 0; }
	#wrapper { width: 100%;
	           min-width: 0; 
			   margin: 0;
			   padding: 0; }
	header { padding-top: 1px; }
	h1 { padding-top: 1em; }
	nav { float: none; 
	     width: auto;
		 padding-left: 2em; }
	nav a { padding: 0.2em;
	      margin-left: 0.3em;
		  float: left;
		  width: 23%; }
	main { padding: 2.5em 1em;
		  margin: 0;
		  font-size: 90%;
		  clear: both; }
	#hero img { width: 100%;
		       height: auto; }
	#hero video { width: 100%;
				height: auto; }
	h2, h3, p, dl { padding-left: 2em;
	              padding-right: 2em; }
	main ul { margin-left: 2em; }
	.floatleft { margin-left: 2em;
	            margin-bottom: 1em; }
	.clear { padding-left: 2em; }
}
@media only all and (max-width: 768px) {
	h1 { font-size: 2em;
	     padding-top: 0.25em;
		 padding-left: 1.5em;
		 width: 85%;
		 text-align: center; }
	nav a { padding: 0.5em;
	      width: 45%;
		  float: left;
		  min-width: 6em;
		  margin-left: 0.5em; }
	main { padding-top: 0; }
	.floatleft { float: none; display: none; }
	#hero img { width: 100%;
		height: auto; }
		#hero video { width: 100%;
			height: auto; }
	footer { padding: 0.5em;
	       margin: 0; }
    .column{display: none;}
	.abc{display: none;}
	#mobile { display: inline; }
    #desktop { display: none; }	   
	header{font-size: 20px;}
	input, textarea { display: block;
		margin-bottom: 2em; 
		margin-left: 3em;
    }
	#xyz{margin-left: 3em;}
	h2{padding-left: 0px;}
	h3{padding-left: 0px;}
	p{padding-left: 0px;}
	.tagline h3{text-align: center;
	font-size: 42px;
    font-weight: bold;
    padding-left: 55px;}
}