/* Shared */
.text-primary { font-size:1.25em; }

.gone {color:#000000;}

.embed-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
    height: auto; 
} 

.embed-container iframe, 
.embed-container object, 
.embed-container embed { 
    position: absolute; 
    top: 1%; 
    left: 1%; 
    width: 98%; 
    height: 95%; 
}

li {text-indent: -14px; padding-left: 14px;}

body {
	background-color:#000000;
	line-height:1.6;
}

/* Header and footer styles */
.site-header {
    margin-top: 2px;
    margin-bottom: 50px;
}
.pop { display:none; }
@media (min-width: 990px) {
  .site-header { margin-top: 25px; }
  .pop { display:inherit; }
}

.site-footer {
    margin-top: 50px;
    margin-bottom: 50px;
}

.contra-color { color: #1EAEDB; }
.contra-color:hover { color: #0FA0CE; }
.contra-co2 { color: #981df0; }
.contra-co2:hover { color: #892de1; }

/* Dashboard Styles */
.username { padding: 0 0 10px 10px; font-weight: bolder; font-size: 25px; }
.delete { color: #000!important; background-color: red!important; border-color: red!important; }
.popup { display: none; position: absolute; top: 0; left: 0; background: #000000; width: 100%; height: 100%; margin-left: 0; margin-top: 0; z-index: 200; }
.popupclose { float: right; padding: 2px 10px 2px 10px; cursor: pointer; color: #ffffff; border: solid; border-radius: 30px; margin: 10px 20px 10px 10px; }
.popupcontent { padding: 10px; }
.boxpop { border-color: #444444; border-width: thick; border: outset; }

/* Additional Styles */
.mainintro { opacity:1; }
.custom-form-button { width: 100%; margin-top: 20px; }


.button {
  border-radius: 100px;
}

.button.button-link {
  background: none!important;
  border: none;
  padding: 0!important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: #069;
  text-decoration: underline;
  cursor: pointer;
}

.frameimg {
	max-height:10em;
	max-width:100%;
}

.section {
	padding:2px;
}

.container {
	width:96%;
}

.imgcontainer {
  position: relative;
  width:100%;
}

.oimage {
  display: block;
  height: auto;
}

.ioverlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.imgcontainer:hover .ioverlay {
  opacity: 0.6;
}

.text {
  color: white;
  font-size: inherit;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.hidden {
	visibility:hidden;
}

input {
	color:#000;
	width:100%;
}

/* Overlay Circles */
.popper {
	z-index:2;
	position:absolute;
	right:0;
	top:0;
	width:9.5em;
	height:9.5em;
	margin:0;
	padding: 1.25em .5em 0;
	font-size:medium;
	text-align:center;
	border-radius:100%;
	background-color:#fe0;
	transform-origin: top right;
	transition: transform .33s ease-in-out;
}

/* Big Video Background */
.bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(../images/bg.jpg) no-repeat;
    background-size: cover; 
}

/* Big Button Style Overrides */
.bigbutton {
    height: 100%;
    color: #fff;
    white-space: normal;
    line-height: normal;
}

.bigbutton:hover {
	color:yellow;
	border-color:yellow;
}

/* MoniLink */
.mobilink {
    color: #fff;
    font-style: normal;
    text-decoration: none;
}

.mobilink:hover {
	color:yellow;
	border-color:yellow;
}


/* Sections */
.section {
  text-align: center;
}
.section-heading,
.section-description {
  margin-bottom: 1.2rem;
}

/* Hero */
.phones {
  position: relative;
  min-height:40em;
}
.phone {
  position: absolute;
  left: 15%;
  max-width: 70%; 
  width: 70%;
  margin: 3rem auto -12rem;
}
/* .phone + .phone {
  display: none;
}
*/

/* Values */
.values {
  background-color: #000;
  opacity:1;
  background-size: cover;
  color: #fff;
  padding-bottom: 1rem;
}
.value-multiplier {
  margin-bottom: .5rem;
  color: #11DFC7;
}
.value-heading {
  margin-bottom: .3rem;
}
.value-description {
  opacity: 1;
  font-weight: 300;
}

/* Help */
.get-help {
  border-bottom: 1px solid #ddd;
}

/* Categories */
.categories {
  background-image: url('../images/values-bg.jpg');
  background-size: cover;
  color: #fff;
}
.categories .section-description { 
  margin-bottom: 4rem;
}

/* Less than 320 */
@media (max-width: 320px) {
  body { font-size: 1em !important; }
  p { margin-bottom: 0.5em !important; }
  td { padding: 4px 5px; }
  input {
      height:16px !important; 
      margin-bottom: 0.5em;
  }
  .button {
      font-size: 1em !important;
      height: 16px !important;
      line-height: 16px !important;
      margin-bottom: 0;
  }
  .username {
    font-size: 1em !important;
    padding: 0;
  }
  .mainintro { display:none; }
  .hero {
    padding-bottom: 0rem;
    text-align: left;
    height: 165px;
  }
  .phones {
  	min-height:0em;
  }
  .phone {
    position: absolute;
    top: -7rem;
    right: 3rem;
    max-height: 362px;
    z-index: 3;
  }
/*  .phone + .phone {
    top: -6rem;
    display: block;
    max-width: 73.8%;
    right: 0;
    z-index: 2;
    max-height: 338px;
  }
*/
  .hero-heading {
    font-size: 2.4rem;
  }
}

/* Bigger than 550 */
@media (min-width: 550px) {
  .hero {
    padding-bottom: 12rem;
    text-align: left;
    height: 165px;
  }
  .phones {
  	min-height:0em;
  }
  .phone {
    position: absolute;
    top: -7rem;
    right: 3rem;
    max-height: 362px;
    z-index: 3;
  }
/*  .phone + .phone {
    top: -6rem;
    display: block;
    max-width: 73.8%;
    right: 0;
    z-index: 2;
    max-height: 338px;
  }
*/
  .hero-heading {
    font-size: 2.4rem;
  }
}

/* Bigger than 750 */
@media (min-width: 750px) {
  .hero {
    height: 190px;
  }
  .hero-heading {
    font-size: 2.6rem;
  }
  .hero {
    padding: 16rem 0 14rem;
  }
  .section-description {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
  }
  .phones {
  	min-height:0em;
  }
  .phone {
    top: -14rem;
    right: 5rem;
    max-height: 510px;
  }
/*  .phone + .phone {
    top: -12rem;
    max-height: 472px;
  }
 */
  .categories {
    padding: 15rem 0 8rem;
  }
}

/* Bigger than 1000 */
@media (min-width: 1000px) {
  .hero {
    padding: 22rem 0;
  }
  .hero-heading {
    font-size: 3.0rem;
  }
  .phones {
  	min-height:0em;
  }
  .phone {
    top: -16rem;
    max-height: 615px;
  }
/*  .phone + .phone {
    top: -14rem;
    max-height: 570px;
  }
*/
}