body {

	width: 80%;

	margin: 0 auto;

	padding: 2%;

	line-height: 1.6;

	background-color: Blue;

}

img {

	width: 100px;

	height: 100px;

}

table {

	border: solid;

	border width: gg

}

ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

    overflow: hidden;

	text-align: center;

}

li {

	float: left;

}

.flexfruitbasket {

	display:-webkit-flex;

	display: -ms-flexbox;

	display: flex;

	margin: 1em 0;

	border: 1px solid #333;

}

.fruitbasket {

	width: 500px;

	height: 400px;

}

.flexcontainer {

	display:-webkit-flex;

	display: -ms-flexbox;

	display: flex;

	margin: 1em 0;

	border: 1px solid #333;

}

.banana {

	-webkit-order: 1;

	-ms-flex-order: 1;

	order: 1;

	border: 1px solid #333;

}

.apple {

	-webkit-order: 2;

	-ms-flex-order: 2;

	order: 2;

	border: 1px solid #333;

}

.orange {

	-webkit-order: 3;

	-ms-flex-order: 3;

	order: 3;

	border: 1px solid #333;

}

@font-face {

	font-family: 'Lato';

	src: url('../_fonts/Lato-BolIta-webfont.eot');

    src: url('../_fonts/Lato-BolIta-webfont.eot?#iefix') format('embedded-opentype'),

         url('../_fonts/Lato-BolIta-webfont.woff') format('woff'),

         url('../_fonts/Lato-BolIta-webfont.ttf') format('truetype'),

         url('../_fonts/Lato-BolIta-webfont.svg#LatoBoldItalic') format('svg');

	font-weight: bold;

	font-style:italic;

}

@font-face {

	font-family: 'LatoLight';

	 src: url('../_fonts/Lato-Lig-webfont.eot');

    src: url('../_fonts/Lato-Lig-webfont.eot?#iefix') format('embedded-opentype'),

         url('../_fonts/Lato-Lig-webfont.woff') format('woff'),

         url('../_fonts/Lato-Lig-webfont.ttf') format('truetype'),

         url('../_fonts/Lato-Lig-webfont.svg#LatoLight') format('svg');

	font-weight: normal;

	font-style:normal;

}

@font-face {

    font-family: 'LatoBlack';

    src: url('../_fonts/Lato-Bla-webfont.eot');

    src: url('../_fonts/Lato-Bla-webfont.eot?#iefix') format('embedded-opentype'),

         url('../_fonts/Lato-Bla-webfont.woff') format('woff'),

         url('../_fonts/Lato-Bla-webfont.ttf') format('truetype'),

         url('../_fonts/Lato-Bla-webfont.svg#LatoBlack') format('svg');

    font-weight: normal;

    font-style: normal;

}



html, body {

	margin: 0;

}

body {

	font: 100% Lato, Helvetica, sans-serif;

	background: white;

}

article, aside, section, nav, figure, header, footer {

	display: block;

}

h1, h2, h3 {

	font-size: 2.4em;

	font-weight: normal;

	font-family: LatoLight, Helvetica, sans-serif;

	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);

	color: pink;

	margin: 0;

	line-height: 1;

}

h1 {

	font-size: 2.6em;

}

h2 {

	font-size: 2em;

	margin-top: 2em;

}

h3 {

	font-size: 1.8em;

	text-transform: uppercase;

}

a {

	color: #CC0000;

	text-decoration: none;

}

a:hover {

	text-decoration: underline;

}

code {

	color: pink;

}



.cf:before,

.cf:after {

    content:"";

    display:table;

}

.cf:after {

    clear:both;

}



.cf {

    zoom:1;

}

.cr {

	clear: right;

}

.cl {

	clear: left;

}

.cb {

	clear: both;

}

.box {

	border-radius: .3em;

	box-sizing: border-box;

	border: 4px solid #999;

	padding: 20px;

	background: #E6E3D4;

}