* { font-family: "Open Sans", Arial, sans-serif;}

body, html { margin: 0; padding: 0; }
.container1, .container2 { padding: 25px 0 50px; background: transparent url("img/pinstriped_suit.png") repeat scroll 0% 0%; color: #DDDDDD; }
/* Background pattern from subtlepatterns.com */
.container2 { background: transparent url("img/footer_lodyas.png") repeat scroll 0% 0%; box-shadow: -5px 15px 25px 20px #111; }
/* Background pattern from subtlepatterns.com */
.contained1, .contained2 { max-width: 1280px; min-width: 560px; margin : auto; }
.sections{ margin:0 auto; width:400px; text-align:center; padding:5px 0 10px;}
.sections > span { display:inline-block; width: 150px; cursor:pointer; background: transparent url("img/mochaGrunge.png") repeat scroll 0% 0%; padding:10px 0; margin:10px 10px; color:black; font-size:20px; border-radius:3px; }
/* Background pattern from subtlepatterns.com */
.sections > span.active { font-weight:bold; box-shadow: 0 4px 10px 4px #111;}
header{  background: transparent url("img/footer_lodyas.png") repeat scroll 0% 0%; box-shadow: -5px -15px 25px 20px #111; position: relative; padding: 0 20px; }
/* Background pattern from subtlepatterns.com */
h1{ max-width: 1280px; min-width: 560px; margin:auto; padding-bottom: 5px; }
h1 a, h1 a:visited, h1 a:hover { color: #2a9fd6; text-decoration: none; font-weight: normal; font-size: 40px; padding-bottom: 5px; }

.showcase div { display: none; }
.showcase div.active { display: block; }
/*.tabs li { list-style-type: none; font-weight: 300; display: inline-block; cursor: pointer; padding: 5px 10px 7px; font-size: 18px; color: white; background-color: #2a9fd6; margin: 10px; border-radius: 5px; border-bottom: 3px solid #1856CF; transition: background-color 0.3s, border-bottom 0.3s;}*/
.tabs li { list-style-type: none; display: inline-block; cursor: pointer; width: 150px; height: 150px; border-bottom: 3px solid #1856CF; transition: border-bottom 0.2s; }

.vids { display: inline-block; margin: 15px 10px; min-width: 560px; width: 48%; }
.imgs { margin: 25px 0; }
.demo { display: inline-block; margin: 15px 0; min-width: 1280px; }
.vids:last-child { width: 100%; }

.mobile, .hide { display: none; }
.non-mobile { display: block; }

.floats { width: 49.5%; display: inline-block; }/* not so float anymore */

iframe { display: block; margin: auto; }

div.overlay { width: 100%; display: block; height: 100%; transition: background-color 0.2s; }
div.overlay:hover, .tabs li.active div.overlay { background-color: rgba(24,86,207,0.25); }
.tabs li.active { background-color: #1856CF; border-bottom: 3px solid #13377E; }
.tabs li:hover { border-bottom: 3px solid #13377E; }
ul.tabs { text-align: center; padding: 0; margin: 0; margin-bottom: 25px; }

p { margin: auto; text-align: center; padding: 10px; width:auto; max-width: 800px; background-color: #444444; margin-top: 20px; border-radius: 10px; box-shadow: 5px 5px 5px 0 #111; color: #DDDDDD;}
p > a:hover { color: #46AEE0; }
h2 { margin: auto; padding-top: 30px; color: #2a9fd6;  font-size: 34px; }
a, a:visited { color: #2a9fd6; transition: color 0.2s;}
a:hover { color: #1856CF; }
ul.infos { padding: 0; }
.infos > li { list-style-type: none; }
.float { float:left; }
.left { max-width: 1030px; width: 75%; width: calc(100% - 250px); }
.right { width: 250px; }
.float.right { float:right; }
.clear { clear:both; }

.hideBehind { margin-left: -50px; }
.fade { z-index: 2; position: relative; }
.first .hideBehind { margin-top: 10px; margin-right: 10px; }
a.icons { opacity: 1; transition: opacity .5s; }
a.icons:hover .fade { opacity: 0; }
.center-icons{ width: 100%; text-align: center; }

.portrait { border-radius: 25px; }
.alignRight { text-align: right; float: right; color: #DDDDDD; font-size: 16px; font-weight: 300; margin-top: 5px; }
.alignRight a, .alignRight a:visited{ color: #DDDDDD; font-size: 16px; font-weight: 300; }
.alignRight a:hover { color: #46AEE0; font-size: 16px; font-weight: 300; }
.text { margin: 5px 0 30px; max-width: 800px; }
.float.left h2 { padding-top: 0; }

@media only screen and (max-width: 1225px) {
	.vids { width: 100%; }
	.text { float: left; }
	h2 { clear: both; }
	.left { margin-right: 25px; width: calc(100% - 275px); }
}

@media only screen and (max-width: 960px) {
	.mobile { display: block; }
	.non-mobile { display: none; }
	.left { width: 100%; max-width: none; }
	.text { width: calc(100% - 300px); }
}

.link { display:block; width: 250px; margin:auto; padding-top: 10px; font-size:24px; text-align: center; }
.link a, .link a:visited { color: #DDDDDD; text-decoration: underline; }
.link a:hover { color: #2a9fd6; }

.offcenter { width: 1280px; text-align: left; }