/* reset browser styles */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.2;
}
ol { 
	padding-left: 1.4em;
	list-style: decimal;
}
ul {
	padding-left: 1.4em;
	list-style: square;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
} 
/* end reset browser styles */
/* ----------------------------------------------------------------------------------------*/


/**************************************
LAYOUT
**************************************/
/*this code control the full screen background image on the page the code is installed*/
#full-screen-background-image {
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

.wrapper {
  max-width: 100%;
 margin: 0 auto;

}

@media screen and (min-width: 800px) {

  .wrapper {
    max-width: 90%;
  }
  
  header {
    width: 100%;
  }
  
section {
    float: left;
	width: 100%;
  }
  
}


@media screen and (min-width: 1000px) {

  .wrapper {
    max-width: 66.66667%;
  }
  
}



/**************************************
CSS TO MAKE THE EXAMPLE LOOK PRETTY
**************************************/

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #2980b9;
  color: #FFF;
  font-family: Helvetica;
  text-align: left;
  margin: 0;
}
p {
  font-size: 1.25em;
  color: #000;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 25px;
  margin-left: 25px;
} 
h1 {
  font-size: 1.25em;
  color: #000;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 25px;
  margin-left: 25px;
} 
h2 {
  font-size: 1.25em;
  color: #000;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 25px;
  margin-left: 25px;
} 
h3 {
  font-size: 1.25em;
  color: #000;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 25px;
  margin-left: 25px;
} 


header,
section {
  border: 1px solid rgba(255,255,255,0.8);
  margin-bottom: 10px;
  border-radius: 3px;  
}

header {
  padding: 10px 0;
}

.wrapper {
  max-width: 100%;
  margin: 0 auto;
  
}

@media screen and (min-width: 800px) {

  .wrapper {
    max-width: 90%;
  }
  
  header {
    width: 100%;

  }
  
section {
    float: left;
	background: #fff;
  }

 /* nav {
    width: 20.83333%;
    margin-right: 1.041667%;
  }*/

  section {
    width: 100.0%;
  }
  
}


@media screen and (min-width: 1000px) {

  .wrapper {
    max-width: 66.66667%;
  }
  
}



/**************************************
CSS TO MAKE THE EXAMPLE LOOK PRETTY
**************************************/

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #fff;
  color: #FFF;
  font-family: Helvetica;
  text-align: top;
  margin: 0;
}

header,
nav,
section {
  border: 1px solid rgba(0,0,0,0.8);
  margin-bottom: 10px;
  border-radius: 3px;
}

header {
  padding: 20px 0;
}

nav, section {
  padding: 20px 0;
}