img {
max-width:100%
}

p {
   text‐overflow: ellipsis;
   overflow: hidden;
   white‐space: nowrap;
}
/*navigation*/
.nav,
		.nav ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		/* Top level nav */
		.nav {
			float: left;
			margin: 20px 0;
			background: #DDD;
			background-image: -webkit-gradient(linear, left top, left bottom, from(#DDD), to(#999));
			background-image: -moz-linear-gradient(top, #DDD, #999);
	
			-webkit-border-radius: 7px;
			-moz-border-radius: 7px;
			border-radius: 7px;
	
			-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
			-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
			box-shadow: 0 2px 2px rgba(0,0,0,0.1);
		}

		/* Dropdowns */
		.nav ul {
			position: absolute;
			top: 2.5em;
			left: -9999px;
			opacity: 0;

			-webkit-transition: 0.1s linear opacity;

			min-width: 150px;
			background: #333;
			background: #340449;
			background: rgba(0,0,0,0.9);

			-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.5);
			-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.5);
			box-shadow: 0 3px 3px rgba(0,0,0,0.5);
		}

		.nav li {
			float: left;
			position: relative;
		}

		/* Top level nav items */
		.nav li > a {
			float: left;
			padding: 10px 15px;
			border-left: 1px solid rgba(255,255,255,0.4);
			border-right: 1px solid rgba(0,0,0,0.2);
			color: #333;
			font-weight: bold;
			font-size: 14px;
			text-shadow: 0 1px 0 rgba(255,255,255,0.4), 0 -1px 0 rgba(0,0,0,0.2);
			text-decoration: none;
		}

		/* Top level hover state, preserve hover state when hovering dropdown  */
		.nav li > a:hover,
		.nav li > a:focus,
		.nav li:focus > a,
		.nav li:hover > a {
			background: #999;
			background-image: -webkit-gradient(linear, left top, left bottom, from(#999), to(#DDD));
			background-image: -moz-linear-gradient(top, #999, #DDD);
			/* text shadow just makes reading more difficult in my opinion */
			/* text-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 -1px 0 rgba(255,255,255,0.2); */
			outline: 0;
		}

		/* Rounded corners for first top level nav item */
		.nav > li:first-child > a {
			border-left: 0;
	
			-webkit-border-top-left-radius: 7px;
			-webkit-border-bottom-left-radius: 7px;
			-moz-border-radius-topleft: 7px;
			-moz-border-radius-bottomleft: 7px;
			border-top-left-radius: 7px;
			border-bottom-left-radius: 7px;
		}

		/* Rounded corners for last top level nav item */
		.nav > li:last-child > a {
			border-right: 0;

			-webkit-border-top-right-radius: 7px;
			-webkit-border-bottom-right-radius: 7px;
			-moz-border-radius-topright: 7px;
			-moz-border-radius-bottomright: 7px;
			border-top-right-radius: 7px;
			border-bottom-right-radius: 7px;
		}

		.nav li:hover ul,
		.nav li:focus ul,
		ul.show-menu {
			left: 0;
			opacity: 0.99;
		}

		.nav ul li {
			float: none;
			position: static;
		}

		.nav ul a {
			float: none;
			display: block;
			color: #FFF;
			font-size: 12px;
			text-shadow: none;
			border: 1px solid #222;
			border-width: 0 0 1px;

			-webkit-transition: 0.1s linear all;
		}

		/* Rounded corners for ul and last list item */
		.nav ul,
		.nav ul li:last-child a {
			border: 0;
			-webkit-border-bottom-left-radius: 7px;
			-webkit-border-bottom-right-radius: 7px;
			-moz-border-radius-bottomleft: 7px;
			-moz-border-radius-bottomright: 7px;
			border-bottom-left-radius: 7px;
			border-bottom-right-radius: 7px;
		}

		.nav ul a:hover,
		.nav ul a:focus {
			background: #EEE;
			color: #333;
			text-shadow: none;
		}
		p { clear: both; }

body {
	margin: 2em 5em;
	font-family:Georgia, "Times New Roman", Times, serif;
}
h1, legend {
	font-family:Arial, Helvetica, sans-serif;
}
h3 {align:left;}
h2 {align:left;
color:black;
}

a {
	color:white;
	}
label, input, select {
	display:block;
}
input, select {
	margin-bottom: 1em;
}
fieldset {
	margin-bottom: 2em;
	padding: 1em;
}
fieldset fieldset {
	margin-top: 1em;
	margin-bottom: 1em;
}
input[type="checkbox"] {
	display:inline;
}
.range {
	margin-bottom:1em;
}	
.card-type input, .card-type label {
	display:inline-block;
}

.borderradius #content {
 border: 1px solid #141414;
 -webkit-border-radius: 12px;
 -moz-border-radius: 12px;
 border-radius: 12px;
}
.boxshadow #content {
 border: none;
 -webkit-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
 -moz-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
 box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
}

@-webkit-keyframes spin {
   0% { -webkit-transform: rotateY(0); }
 100% { -webkit-transform: rotateY(360deg); }
}
.csstransforms3d.cssanimations section {
 -webkit-perspective: 1000;
}

.csstransforms3d.cssanimations section h4 {
 background-image: url(modernizr-logo.png);
 overflow: hidden;
 -webkit-animation: spin 2s linear infinite;
}

@media only screen and (orientation: landscape) {
	h5{ visibility:hidden;
	}

.elementhyphen {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto; /* or "manual" */
}

.columns{
 column-count: 4;
 column-gap: 10px; 
}
.elementCol{
    -webkit-column-count: 3;
    -webkit-column-width: 75px;
    -webkit-column-gap: 20px;
    -webkit-column-rule: 1px solid #fff;
    -moz-column-count: 3;
    -moz-column-width: 75px;
    -moz-column-gap: 20px;
    -moz-column-rule: 1px solid #fff;
    -o-column-count: 3;
    -o-column-width: 75px;
    -o-column-gap: 20px;
    -o-column-rule: 1px solid #fff;
    column-count: 3;
    column-width: 75px;
    column-gap: 20px;
    column-rule: 1px solid #fff;
}

.elementhyphen {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto; /* or "manual" */
}
.hyphen {
    max-width: 500px;
  margin: 0 auto;
  width: 100%;
  text-align: justify;
}

 .hidden
      {
          display: none;
      }
 
      .buttons-wrapper
      {
          text-align: center;
      }
      .button-demo
      {
          padding: 0.5em;
          margin: 1em auto;
      }
      
      
      #myElement1 {
  background: grey;
  height: 300px;
  text-align: center;
  font: 30px/300px Helvetica, Arial, sans-serif;
}