/* vocoder_styles.css Dromedary Modular */

/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-condensed-v25-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-condensed-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-condensed-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-condensed-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-condensed-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-condensed-v25-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-700 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-condensed-v25-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-condensed-v25-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-condensed-v25-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-condensed-v25-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-condensed-v25-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-condensed-v25-latin-700.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}


body {
    font-family: 'Roboto Condensed', Verdana, Arial, Helvetica, sans-serif;
    font-size: medium;
	margin: 1vw auto;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}
section {
    clear: both;
	height: auto;
}
article p{
	text-align: justify;
	text-justify: inter-word;
}
article h3{
	text-align: justify;
	text-justify: inter-word;
}
#outer {
    width: 100vw;
    height: auto;
    margin: 0;
}
#wrapper {
    width: 100vw;
    height: auto;
    margin: 0 auto;
}
#topwrapper {
	width: 100%;
    box-sizing: border-box;
	display: block;
	margin: 0;
	background-color: #ffffff;
}
#top {
    width: 90%;
    height: auto;
    max-width: 1260px;
    min-width: 300px;
	margin: 0 auto;
    box-sizing: border-box;
	display: block;
	background-color: #ffffff;
	text-align: center;
}
	
#mainwrapper {
    width: 100%;
    height: auto;
	margin: 0;
    box-sizing: border-box;
	display: block;
	background-color: #ffffff;
}
#main {
    width: 90%;
    height: auto;
	background-color: #ffffff;
    max-width: 1260px;
    min-width: 300px;
	margin: 2em auto;
    box-sizing: border-box;
	display: block;
	text-align: center;
}
.builderscorner {       /*SH*/
	/*font-size: large;*/
	text-justify: inter-word;
	display: inline-block;
}

.text {
	position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.textImg {
    text-align: center;
	display: block;
}

.textImg img {
	width: 100%;
	height: auto;
	text-align: center;
	margin: 1em 1em 1em 0em;
}
.textImg p {
    text-align: center;
}	
.halfImg {
    text-align: center;
	display: block;
	margin: 2em 1em 4em 1em;
}
.halfImg img {
	float: left;
	width: 50%;
	height: auto;
	text-align: center;
}
.halfImg p{
	/*font-size: large;*/
	float: right;
	width: 50%;
}
.textBox{
	width: 100%;
	margin: 0 auto;
    text-align: center;
	display: block;
}
.textBox img {
	width: 90%;
	max-width: 400px;
	height: auto;
	margin: 0;
}
.textBox div {
	width: 90%;
	margin: 0 auto;
}
.textBox h4, ul, li, p {
	text-align: left;
}
.flex-box {
    width: 640px; /*50%;*/   /*100%;*/
	position: relative;
    overflow: hidden;
    padding-top: 360px; /*28.125%;*/ /*56.25%;*/
	margin: 2em auto;
}
.flex-iframe {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/*----------------------------------------------------------------*/
.flex-tabs-col {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}
.flex-tab-col {
	width: 100%;
	margin: 1em 0;
	text-align: center;
	justify-content: center;
}
.flex-tab-col:first-child {
	margin: 1em 0;
}
.flex-tab-col a {
	max-width: 100%;
}
.flex-tab-col a img:first-child {
	min-width: 150px;   /*210px;*/
}
.flex-tab-col a img {
	max-width: 704px; /*60%;*/
	height: auto;
}
/****************************************************/
.flex-tabs-row {
	width: 100%;
	height: 60px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-end;
}
/******************************/
.flex-tab-row {
	display: flex;
	width: 25%;
	background-color: rgb(220,220,220);
	border: 1px solid white;
	justify-content: center;
	align-items: flex-end;
}
.flex-tab-row:first-child {
	background-color: White;
}
.flex-tab-row a {
	display: flex;
	width: 100%;
	text-decoration: none;
	color: Black;
	line-height: 2.3em;
	justify-content: center;
	align-items: flex-end;
}
.flex-tab-row a img {
	width: 98%;
	height: auto;
	max-width: 168px;
}
/******************************/
.flex-tab-row-active {
	width: 25%;
	background-color: rgb(50,50,50);
	text-align: center;
	border: 1px solid white;
}
.flex-tab-row-active a {
	width: 100%;
	text-decoration: none;
	color: White;
	text-align: center;
	line-height: 2.3em;
}
/*----------------------------------------------------------------*/
#home-link {
	margin:0;
}
#home-link img{
	max-width: 150px;  /*210px;*/
}

/*****************************************************************************************/
.modalImg{
    margin: 0 auto;
	display: block;
}
.modalImg img{
	width: auto;
	height: auto;
    margin: 0;
}
.modalDialog {
	position: fixed;
	font-family: 'Roboto Condensed', Verdana, Arial, Helvetica, sans-serif;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99998;
	opacity: 0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
	text-align: center;
}
.modalDialog:target {
	opacity: 1;
	z-index: 99999;
	pointer-events: auto;
}
.modalDialog > div {
	position: relative;
	width: 90vw;
    height: 90vh;
	/*max-width: 1071px;*/
	margin: .5vw auto;
	padding: 1vw 4vw 2.5vw 2vw;
	border-radius: 10px;
	background: #fff;
}
.modalDialog div div {
	margin: 0;
	display: block;
}
.modalDialog div div div {
	/*width: 100%;
	height: auto;*/
	width: 93vw;
    height: 80vh;
	display: inline-block;
	overflow: scroll;
}
.modalDialog div div div img {
    text-align: center;
	overflow: scroll;
}
.modalDialog div p img {
	vertical-align: text-top;
}
.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -6px;
	text-align: center;
	top: -6px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #ee0000; }
/******************************************************************************************/	
#footwrapper {
    width: 100%;
    height: auto;
	margin: 0;
    box-sizing: border-box;
	display: block;
}
#footer {
    width: 90%;
    height: auto;
    max-width: 1260px;
    /*min-width: 300px;*/
	margin: 0 auto;
    box-sizing: border-box;
	display: block;
}
#footlink {
	/*float: right;*/
    /*width: 100%;*/
    height: auto;
	padding: 2em 0;
    max-width: 480px;
    min-width: 150px;
	margin: 0;
    display: block;
    box-sizing: border-box;
	font-size: smaller;
	text-align: right;	
}
/*---------------------------------------------------------------------------------------*/
.italic{
	font-style: italic;
}
.thick{
	font-weight: bold;
}
.red{
	color: red;
}
.blue{
	color: #5c88c5;
}
.nobreak{
	white-space: nowrap;
}
.unitspacing{
	word-spacing: -2px;
}
.nobreak{
	white-space: nowrap;
}		

/*****************************************************************************************/
@media (max-width: 800px) {
	.flex-tab-col a img {
		width: 100%;
		min-width: 300px;
		height: auto;
	}
/*	.flex-tabs-row {
		flex-direction: column;
		align-items: center;
	}
	.flex-tab-row {
		width: 210px;
		margin: 0;
	}
	.flex-tab-row:first-child {
		margin: 1em 0 4em 0;
	}
	.flex-tab-row a {
		max-width: 100%;
	}
	.flex-tab-row a img {
		width: 100%;
		height: auto;
	}
	.flex-tab-row-active {
		width: 210px;
		margin: 0;
	}
	.flex-tab-row-active a {
		max-width: 100%;
	}
	.flex-tab-row-active a img {
		width: 100%;
		height: auto;
	}*/
	.flex-box {
		width: 90%;
		position: relative;
		overflow: hidden;
		padding-top: 50.625%;
		margin: 2em auto;
	}
	.flex-iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}	
}
/*-----------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 650px) {
	.flex-tab-row a {
		font-size: smaller;
	}
	.flex-tab-row-active a {
		font-size: smaller;
	}
	.halfImg img{
		float: none;
		width: 75%;
		height: auto;
		margin: 0 auto;
		text-align: center;
	}
	.halfImg p{
		float: none;
		width: 100%;
		/*font-size: medium;*/
	}
	.textBox div {
		width: 90%; 
		margin: 0 auto;
	}	
	.modalDialog > div {
		position: relative;
		width: 90vw;
		height: 90vh;
	}
	.modalDialog div div div {
		width: 90vw;
		height: 75vh;
	}
	.modalImg img{
		width: auto;
		height: auto;
		margin: 0;
	}	
}