@charset "utf-8";
/* CSS Document mainr.css */

input:hover {
	width:130px;
	height:40px;
	align:center;
	margin: 5px;
	margin-left:0;
	margin-right:8;
	padding: 8px;
	text-align:left;
  font-size: 18px;  
	
	font-family: 'Acme', Arial, Verdana, Cambria, sans-serif;
	border:2px solid #451523 ;
	border-radius: 5px;
	
	box-shadow:rgba(110,110,110,.6) 5px 5px 5px;
	vertical-align: text-top;
	-webkit-vertical-align: text-top;
	-ms-vertical-align: text-top;

	background:-webkit-linear-gradient(top,  #C0C0C0, #000000, #000000, #202020);
	background:-moz-linear-gradient(top,  #C0C0C0,  #000000, #000000, #202020);
	background:-ms-linear-gradient(top,  #C0C0C0,  #000000, #000000, #202020);

	background:linear-gradient(top,  #C0C0C0,  #000000, #000000, #202020);
color:#ffffff;
} 


input {
	width:130px;
	height:40px;
	align:center;
	margin: 5px;
	margin-left:0;
	margin-right:8;
	padding: 8px;
	text-align:left;
  	font-size: 18px;  
	font-family: 'Acme', Arial, Verdana, Cambria, sans-serif;
	
	border:1px solid #451523;
	border-radius: 5px;  
	-moz-border-radius: 5px;  
	-webkit-border-radius: 5px;  
  
	box-shadow:rgba(110,110,110,.6) 5px 5px 5px;
	vertical-align: text-top;
	-webkit-vertical-align: text-top;
	-ms-vertical-align: text-top;

	background:-webkit-linear-gradient(top,  #C0C0C0, #000000, #000000, #202020);
	background:-moz-linear-gradient(top,  #C0C0C0,  #000000, #000000, #202020);
	background:-ms-linear-gradient(top,  #C0C0C0,  #000000, #000000, #202020);

	background:linear-gradient(top,  #C0C0C0,  #000000, #000000, #202020);
	
color:#ffffff;

}

.footertext { 
	font: 10px Arial, Helvetica, sans-serif; 
	text-align: left;
	color: #888;
}


#text{
	font-family: 15px 'Rambla', Cambria, sans-serif;
	-webkit-text-shadow:rgb(110, 110, 110, .6) 3px 3px 5px;
	-moz-text-shadow:rgb(110, 110, 110, .6) 3px 3px 5px;
	text-shadow:rgb(110, 110, 110, .6) 3px 3px 5px;
}


.roundedtg {
border: 1px solid #202020;
background-color: #ffffff;
border-radius: 3mm;
/* opacity:0.9 */
}

.linkknobs {
	float:left; margin-right: 3px; width:32; height:32
}
	
h2 {
	
	color:#202020;	
	font-family:  'Oswald', Cambria, serif;
}

h4 {
font-family: 'Oswald', serif; 
font-weight: bold;
margin-top: 1em;
margin-bottom: 0.5em;
}

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}


/* Test of OwlCarousel */

#owl-demo .item{
  margin: 3px;
}
#owl-demo .item img{
  display: block;
  width: 100%;
  height: auto;
}

/* test of keyframes */

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}

body {  

/* IE10 Consumer Preview  
background-image: -ms-linear-gradient(bottom right, #000000 0%, #000000 100%);

/* Mozilla Firefox 
background-image: -moz-linear-gradient(bottom right, #000000 0%, #000000 100%);

/* Opera 
background-image: -o-linear-gradient(bottom right, #000000 0%, #000000 100%);

/* Webkit (Safari/Chrome 10)
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #000000 ), color-stop(1, #000000 ));

/* Webkit (Chrome 11+)  
background-image: -webkit-linear-gradient(bottom right, #000000 0%, #000000 100%);

/* W3C Markup, IE10 Release Preview 
background-image: linear-gradient(to top left, #000000 0%, #000000 100%);


filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#000000   ', endColorstr='#000000 '); 
-ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#000000   ', endColorstr='#000000 '); 
*/ 


background: linear-gradient(45deg, #F0F0F0 12%, transparent 0, transparent 88%, #F0F0F0 0),
    linear-gradient(135deg, transparent 37%, #EAEAEA 0, #EAEAEA 63%, transparent 0),
    linear-gradient(45deg, transparent 37%, #F0F0F0 0, #F0F0F0 63%, transparent 0) #E4E4E4;
    background-size: 25px 25px;

font-family: 'Rambla', 'Roboto', Cambria, serif;
}


p 	{ font-family: 'Rambla', 'Roboto', Arial, sans-serif; }
div { font-family: 'Rambla', 'Roboto', Arial, sans-serif; }

/*
.example pre {
background-color: #d5d5d5;
margin: 1em 1cm;
padding: 0 0.3cm;
}
*/

pre { text-align:left }
pre.code { font-family: monospace }

	
	
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; 
	height: 0; 
	overflow: hidden;
	
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/* min-width */
@media screen and (min-width: 1000px) {
	
	.one {		
		width: 975px;
	}
	
	.dl_btn {
		float:left;
		height:40px; 
		margin-right: 3px;
		margin-bottom: 3px;
		border-radius: 4px;
	}
	
	nav {
		width: 145px;
		display: inline-block; 
		display: -webkit-inline-block; 
		margin-bottom:5px;
	}
	
	article {
		display: inline-block;
		vertical-align:top;
		/* Firefox */
		width: -moz-calc(100% - 315px);
		/* WebKit */
		width: -webkit-calc(100% - 315px);
		/* Opera */
		width: -o-calc(100% - 315px);
		/* Standard */
		width: calc(100% - 315px);
	}
	aside {
		display: inline-block;
		vertical-align:top;
		float:right;
	}
	
	div {
	}
		
	form {
		display: inline-block;
		margin-bottom:auto;
	}
		
	.two {
		width: 975px;
		align: center;
	}
	
	.xxx {
		width: 70px;
		height: 70px;
	}
	.yyy {
		height: 80px;
	}
	
	.zzz {
		display:none
	}
	tr {
		vertical-align:top;
	}
		
}

/* min-width & max-width */
@media screen and (min-width: 540px) and (max-width: 999px) {
	.one {
		width: 100%;
	}
	
	.dl_btn {
		float:left;
		height:40px; 
		margin-right: 3px;
		margin-bottom: 3px;
		border-radius: 4px;
	}
	
	.table {
		width: 100%;
	}
	
	.two {
		width: 100%;
		float: left;
	}
	
	.xxx {
		width: 7vw;
		height: 7vw;
	}
	.yyy {
		height: 8vw;
	}
	
	nav {
		width: 100%;
		display: inline-block;
		margin-bottom:5px;
	}
	
	div {
		vertical-align:top;
	}
	
.video-container div {
	display:initial;
}
	
	
	form {
		display: inline;
		margin-bottom:auto;
	}	
	
	article {
		display: inline-block;
		vertical-align:top;
		/* Firefox */
		width: -moz-calc(100% - 185px);
		/* WebKit */
		width: -webkit-calc(100% - 185px);
		/* Opera */
		width: -o-calc(100% - 185px);
		/* Standard */
		width: calc(100% - 185px);
	}
	
	aside {
		display: inline-block;
		vertical-align:top;
		float:right;
	}
	
	td {
		vertical-align:top;
	}
	
	.zzz {
		display:none
	}
	
}


/* max-width */
@media screen and (max-width: 539px) {
	.one {
		width: 100%;
	}
	span.lt600 {
		display: inline-block;
	}
		
	.yt {
		width: 560px;
		height: 315px;
	}


	.dl_btn {
		float:left;
		height:40px; 
		margin-right: 3px;
		margin-bottom: 3px;
	border-radius: 4px;
	}

	.two {
		width: 100%;
		float: left;
	}
	
	.xxx {
		display:none;
	}
	
	nav {
		width: 100%;
		display: inline-block;
	}
	
	div {
	}
	
.video-container div {
	display:initial;
}
	
	form {
		display: inline;
		margin-bottom:auto;
	}
	
	aside {
		display: inline-block;
		vertical-align:top;
	}
	
	
	article {
		display: inline-block;
		vertical-align:top;
	}
	
	.zzz {
		float:inherit ;
		margin: 0;
		height: 40px;
		
	}
	
	.foot {
		display:none
	}
	
	.roundedtg {
			height:auto;
	}
	
	.yyy {
		display:none;
	}
}

/* max device width */
@media screen and (max-device-width: 439px) {
	
	.dl_btn {
		float:left;
		height:40px; 
		margin-right: 3px;
		margin-bottom: 3px;
		
	border-radius: 4px;
	}
	
	.xxx {
		width: 7vw;
		height: 7vw;
	}
	.yyy {
		height: 40px;
	}
	
	.zzz {
		
		float: left;
		margin: 0;
		text-align: left;
		display: block;
		height: 40px;
		
	}
	
	.foot {
		display:none;
	}
	
	.roundedtg {
			height:auto;
	}
	
	nav {
		width: 100%;
		display: inline-block;
		margin-bottom:5px;
	}
	
	aside {
		display: inline-block;
		vertical-align:top;
	}
	
	
	article {
		display: inline-block;
		vertical-align:top;
	}
	
	div {
		vertical-align:top;
	}
	
.video-container div {
	display:initial;
}
	
}

@media handheld and (max-device-width: 1024px) and (orientation: landscape) { 
	
	.one {
		width: 100%;
	}

	.xxx {
		width: 3vw;
		height: 3vw;
	}
	.yyy {
		height: 4vw;
	}
		
	.dl_btn {
		float:left;
		height:40px; 
		margin-right: 3px;
		margin-bottom: 3px;
		border-radius: 4px;
	}	
	
	nav {
		width: 145px;
		display: inline-block;
		margin-bottom:5px;
	}
	
		aside {
		display: inline-block;
		vertical-align:top;
	}
	
	
	article {
		display: inline-block;
		vertical-align:top;
	}
	
	div {
		vertical-align:top;
	}
	
	
.video-container div {
	display:initial;
}
	
	form {
		display: inline-block;
		margin-bottom:auto;
	}
		
	.two {
		width: 975px;
		align: center;
	}
	
	.xxx {
		width: 200px;
		height: 70px;
	}
	.yyy {
		height: 80px;
	}
	
	.zzz {
		display:none
	}


}


@media handheld and (max-device-width: 419px) and (orientation: portrait) { 

	.one {
	}
		

	.dl_btn {
		float:left;
		height: 37px; 
		margin-right: 3px;
		margin-bottom: 3px;
		border-radius: 4px;
	}	
	
	.xxx {
		display:none;
	}
	
	.yyy {
		display:none;
	}
	
	.zzz {
		
		float: left;
		margin: 0;
		text-align: left;
		display: block;
		width: auto;
		
	}
	
	.foot {
		display:none;
	}
	
	.roundedtg {
			height:auto;
	}
	
	nav {
		width: 100%;
		display: inline-block;
		margin-bottom:5px;
	}
	
	aside {
		display: inline-block;
		vertical-align:top;
	}
	
	
	article {
		display: inline-block;
		vertical-align:top;
	}
	
	div {
		vertical-align:top;
	}
	
	

}