/* load custom fonts */

/*http://stackoverflow.com/questions/24990554/how-to-include-a-font-ttf-using-css*/
@font-face {
  font-family: 'pt-mono';
    src: url('../assets/fonts/PTMonoWeb/PTM55F_W.eot') format('embedded-opentype'), /* IE6-IE8 */
         url('../assets/fonts/PTMonoWeb/PTM55F_W.woff') format('woff'), /* Modern Browsers */
         url('../assets/fonts/PTMonoWeb/PTM55F_W.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('../assets/fonts/PTMonoWeb/PTM55F_W.svg') format('svg'); /* Legacy iOS */
}

body img.fidImg {
	width: 100%;
}

body img.centerImg {
	margin-left: auto;
    margin-right: auto;
}

.simpleText
{
	font-family: Helvetica, Helvetica Neue, Arial, sans-serif;
}

.verticalspacer
{
	height: 14px;
	margin:0px;
}

/* see http://stackoverflow.com/questions/12121090/responsively-change-div-size-keeping-aspect-ratio*/
.keep-ratio-wrapper {
  width: 100%;
  display: inline-block;
  position: relative;
}

.keep-ratio-wrapper:after {
  /* specify ratio in state css */
  /*padding-top: 75%;*/
  display: block;
  content: '';
}

.keep-ratio-main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.imageOverlapContainer {
    position:relative;
    width: 100%;
    height: 100%;
}

.imageOverlapElement {
    height:100%;
    position:absolute;
    top:0;
}

.imageOverlapElement-left {
    left:0;
}

.imageOverlapElement-right {
    right:0;
}

/*custom container*/
@media (min-width: 1200px) {
	.container-medium {
		max-width: 970px;
	}
}

@media (min-width: 1200px) {
	.container-small {
	max-width: 640px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.container-small {
		max-width: 640px;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.container-small {
    	max-width: 640px;
    }
}