﻿/* REVEAL MODAL */

#popup-bg {
  position: fixed;
  height: 100%;
  width: 100%;
  background: black;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999999;
  display: none;
  top: 0;
  left: 0; }
  
#popup {
  text-align:center;
  margin-top:-240px;
  margin-left:-300px;
  position:absolute;
  top:50%;
  left:50%;
  height:510px;
  width:600px;
  background: #a0243c; /* Old browsers */
  background: -moz-linear-gradient(top,  #a0243c 0%, #b43952 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a0243c), color-stop(100%,#b43952)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #a0243c 0%,#b43952 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #a0243c 0%,#b43952 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #a0243c 0%,#b43952 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #a0243c 0%,#b43952 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0243c', endColorstr='#b43952',GradientType=0 ); /* IE6-9 */  
}

#popup:after {
  content: "";
  display: table;
  clear: both;
}


#popup h2 {
  margin:0 0 5px 0;
  padding:0;
  font-size:36px;
  font-family: 'open_sansbold';
}

#popup h3 { 
  margin:0 0 3px 0;
  padding:0 0 30px 0;
  font-size:24px;
  border-bottom: 2px solid #fff;
}

#popup h4 { 
  margin:3px 0 10px 0;
  padding:10px 0 0 0;
  font-size:36px;
  border-top: 2px solid #fff;
}

#popup h2,
#popup h3,
#popup h4 {
  color:#fff;  
}

.btn {
  color:#fff !important;
  border:1px solid #fff;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  display:inline-block;
  text-decoration: none;
}

#btncontinue {
  font-size:12px;
  margin:0;
  padding:0 20px 0 20px;
  height:35px;
  line-height:35px;
  color: #FFF;
}

#btnrequest {
  font-size:24px;
  margin:0 0 20px 0;
  padding:0 20px 0 20px;
  height:50px;
  line-height:50px;
  background: #63a35c; /* Old browsers */
  background: -moz-linear-gradient(top,  #63a35c 0%, #3f7f38 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#63a35c), color-stop(100%,#3f7f38)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #63a35c 0%,#3f7f38 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #63a35c 0%,#3f7f38 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #63a35c 0%,#3f7f38 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #63a35c 0%,#3f7f38 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63a35c', endColorstr='#3f7f38',GradientType=0 ); /* IE6-9 */
}

#price {
  padding:0;
  background: #fff;
  width:600px;
  display:block;
  font-size: 110px;
  letter-spacing:-2px;
  min-height:125px;
  line-height:120px;
  overflow:hidden;
}

#price span {
  font-family: 'open_sansbold';
  color:#a52941;
}

#price .subtext {
    display: block;
    color: #000;
    line-height: 28px;
    font-size: 20px;
    margin-bottom: 5px;
}

.popup__img
{
	float: right;
}

.popup__content
{
	padding-top: 30px;
	overflow: hidden;

}

#popup.popup--hasimage
{
	width: 800px;
	margin-left:-400px;

	background: #633F5B;
}

#popup.popup--hasimage h2,
#popup.popup--hasimage h3,
#popup.popup--hasimage h4
{
	padding-left: 10px;
	padding-right: 10px;
}


#popup.popup--hasimage h2
{
    font-size: 32px;
}

#popup.popup--hasimage h3
{
	font-size: 36px;
}

#popup.popup--hasimage h4
{
	font-family: 'open_sanslight', Arial, sans-serif;
	font-size: 24px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.popup--hasimage #price
{
	width: auto;
	font-size: 48px;
	color: #633F5B;
	font-family: 'Fjord One', serif;
	line-height: 1.4;
}

@media only screen and (max-width: 900px) {
	.popup__img
	{
		display: none;
	}

	#popup.popup--hasimage
	{
		width: 700px;
		margin-left:-350px;
	}
}

@media only screen and (max-width: 767px) {
    #popup,
	#popup.popup--hasimage
    {
        width: 280px;
        margin-left: -140px;
        padding: 10px 0;
        height: auto;
        margin-top: -172px;
    }

    #popup #price 
    {
		width: 280px;
		height: 75px;
		line-height: 75px;
		font-size: 50px;
		min-height: 0;
    }

	#popup.popup--hasimage #price
	{
		font-size: 26px;
	}

    #popup h2
    {
        font-size: 22px;
    }
    #popup h3,   #popup h4
    {
        font-size: 16px;
    }

	#popup.popup--hasimage h3
	{
		font-size: 26px;
		padding-bottom: 10px;
	}

	#popup.popup--hasimage h4
	{
		font-size: 20px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
  
    #popup #btnrequest
    {
        height: 40px;
        line-height: 40px;
        font-size: 18px;
    }

	.popup__content
	{
		padding: 0;
	}
}