/*css/styl.css*/
/*links */
a:link {
	color: blue;
}
a:visited {
	color: green;
}
a:hover {
	color: red;
}
.art:first-letter {
	color: red;
	font-size: large;
}
/*classes fonts */
.big {
	font-size: 24px;/*1.5em;*/
	font-weight: bold;
}
.mid {
	font-size:20px; /* 1.2em;*/	
}
.small {
	font-size:12px; /* 0.8em;*/
}
/*classes colours */
.red {color: red;}
.blue {color: blue;}
.green {color: green;}
.yellow {color: yellow;} 
/*classes position */
.right {text-align: right;}
.center {text-align: center;}
.left {text-align: left;}
/* web and html elements */
 *{
    box-sizing: border-box;
}

body {
   margin: 0;
   padding: 0;
   font-family: "Times New Roman", Times, serif;
   font-size:16px;
}
#web {
	/*width: 1200px;*/
	margin: 0 auto;
}
/*headLeft*/
#hLeft {
	background-color: #EDECEB;
	display:block;
	z-index: -2;
	width:220px;
	height: 130px;
	float: left;
	overflow: hidden;
	clear: both;
	margin-top:5px;
}
#hLeft p{
	margin:5px;
	margin-top:5px;
	text-align:center;
}
/*headCenter*/
#hCenter {
	background-color: #F6F7F8;
	display:block;
	width:720px;
	height: 130px;
	float: left;
	margin-top:5px;
}
#hCenter p {
	margin: 5px;
	text-align:center;	
}
/*headRight */
#hRight {
	background-color: #EDECEB;
	display:block;
	z-index: -2;
	width:200px;
	height: 130px;
	margin-top: 5px;
	float: left;
	overflow: hidden;
}
#hRight p {
	margin: 5px;
	margin-top:15px;
	text-align:center;
}
/*webLeft*/
#webLeft {
	background-color: #FFF4F4;
	display:block;
	z-index: -2;
	width:220px;
	height: 450px;
	float: left;
	overflow: hidden;		
}
#webLeft p{
	text-align:center;
	margin: 5px;
}
/*web center*/
#webCenter {
	background-color: #EDECEB;
	display:block;
	z-index: -2;
	width:720px;
	height: 450px;
	float: left;
	overflow: hidden;
}
#webCenter p{
	margin:0px;
}
#f11wc{
	background-color: red;
	display:block;
	width:240px;
	height:150px;
	float: left;
	overflow: hidden;
	position:relative;
}
#f12wc{
	background-color: green;
	display:block;
	width:240px;
	height:150px;
	float: left;
	overflow: hidden;
	position:relative;
}
#f13wc{
	background-color: blue;
	display:block;
	width:240px;
	height:150px;
	float: left;
	overflow: hidden;
	position:relative;
}
#f21wc{
	background-color: pink;
	display:block;
	width:240px;
	height:150px;
	float: left;
	overflow: hidden;
	position:relative;
}
#f22wc{
	background-color: yellow;
	display:block;
	width:240px;
	height:150px;
	float: left;
	overflow: hidden;
	position:relative;
	/*border: 5px solid blue;
	box-sizing: border-box;
	border-radius:10px;
	*/
}
#f23wc{
	background-color: silver;
	display:block;
	width:240px;
	height:150px;
	float: left;
	overflow: hidden;
	position:relative;
}
#f31wc{
	background-color: teal;
	display:block;
	width:240px;
	height:150px;
	float: left;
	overflow: hidden;
	position:relative;
}
#f32wc{
	background-color: lime;
	display:block;
	width:240px;
	height:150px;
	float: left;
	overflow: hidden;
	position:relative;
}
#f33wc{
	background-color: aqua;
	display:block;
	width:240px;
	height:150px;
	float: left;
	overflow: hidden;
	position:relative;
}
/*web right */
#webRight {
	background-color: #FFF4F4;
	display:block;
	z-index: -2;
	width:200px;
	height: 450px;
	float: left;
	overflow: hidden;
}

@media only screen and (max-width:800px) {
  /* For mobile phones: */
  #web, #hLeft, #hCenter, #hRight, #webLeft, #webRight {
    width:100%;
  }
  #webCenter{
	  display:none;
  }
}
@media only screen and (min-width:1200px){
	#web {
		width:1200px;
	}
}