/* popup */

.popup { width: 402px; height: 429px; text-align: center; overflow: hidden; background-color: #ffffff;  -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}

.popup #pop-head{width: 402px; margin: 0; padding: 0; background: #489aff;}
.popup .arrow-down {
    width: 0; 
    height: 0; 
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 14px solid #489aff;
    margin: 0 auto;
}
.popup #pop-head h1{font-family: 'Source Sans Pro', sans-serif; font-weight: 600; font-size: 25px; color: #ffffff; padding: 28px 25px;}
.popup #pop-head h1 span {color:#fae500;}
.popup h1 { font-size: 24px; text-align: center; font-weight: normal; padding: 18px 0 10px 0; margin: 0 0 0 -7px; word-spacing: 1px; font-family: 'Open Sans', sans-serif; color: #333333; }
.popup p { margin: 0; font-family: 'Source Sans Pro', sans-serif; font-weight: 400; color: #333333; font-size: 24px; padding: 10px 0 14px 0; }
.row-pop { width: 346px; margin: 0 auto;}
.row-pop #email { 
	font-family: 'Source Sans Pro', sans-serif; 
	font-weight: 200; 
	border: none; 
	width: 330px; 
	height: 43px;  
	font-size: 18px; 
	line-height: 26px; 
	color: #777777; 
	padding: 0px 8px; 
	font-style: italic;
    border: 1px solid #CCC;
    border-radius: 4px;
    background: #f8f8f8;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4ZjhmOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #f8f8f8 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #f8f8f8 0%,#ffffff 100%);
    background: -o-linear-gradient(top,  #f8f8f8 0%,#ffffff 100%);
    background: -ms-linear-gradient(top,  #f8f8f8 0%,#ffffff 100%);
    background: linear-gradient(to bottom,  #f8f8f8 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#ffffff',GradientType=0 );

}
.row-pop p{float: left; font-family: 'Source Sans Pro', sans-serif; font-weight: 700; font-size: 30px; color: #bdbdbd;}
.row-pop p.small{float: right;font-family: 'Source Sans Pro', sans-serif; font-weight: 200; font-size: 18px; color: #bdbdbd;}
.button-holder-pop {margin: 0px auto 15px;}
.submit-btn{
	margin: 0 auto;
    cursor: pointer;  
    width: 345px; 
    text-decoration: underline;
    text-align: center;
	font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;
    padding: 10px 0px;
    	*padding: 0px;
    font-size: 30px;
    text-shadow: 1px 1px 2px rgba(3, 3, 3, 0.35); 
    letter-spacing: 1px;
    color: #fff;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.1);
        *border: none;
    box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.8);
	background: #fec100;
	background: -moz-linear-gradient(top,  #fec100 0%, #f1b000 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fec100), color-stop(100%,#f1b000));
	background: -webkit-linear-gradient(top,  #fec100 0%,#f1b000 100%);
	background: -o-linear-gradient(top,  #fec100 0%,#f1b000 100%);
	background: -ms-linear-gradient(top,  #fec100 0%,#f1b000 100%);
	background: linear-gradient(to bottom,  #fec100 0%,#f1b000 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec100', endColorstr='#f1b000',GradientType=0 );

}

.submit-btn:hover{
	background: #f1b000;
	background: -moz-linear-gradient(top,  #f1b000 0%, #fec100 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1b000), color-stop(100%,#fec100));
	background: -webkit-linear-gradient(top,  #f1b000 0%,#fec100 100%);
	background: -o-linear-gradient(top,  #f1b000 0%,#fec100 100%);
	background: -ms-linear-gradient(top,  #f1b000 0%,#fec100 100%);
	background: linear-gradient(to bottom,  #f1b000 0%,#fec100 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1b000', endColorstr='#fec100',GradientType=0 );
}
#arrow-btn {margin-left: 5px;}
#pop-footer{margin: 10px 0 0 0; padding:0 30px; height: 99px; background:#e8e8e8; box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.2)}
#pop-footer p{font-family: 'Source Sans Pro', sans-serif; font-weight: 400; font-size: 14px; *font-size: 12px; font-size:12px\9; color: #777777;margin: 10px 0 0 0; padding:0; height: 99px; padding-top:20px; line-height: 20px;}


/*  --------------------------------------------------
    Reveal Modals
    -------------------------------------------------- */
        
    .reveal-modal-bg { 
        position: fixed; 
        height: 100%;
        width: 100%;
        background: #000;
        background: rgba(0,0,0,.8);
        z-index: 100;
        display: none;
        top: 0;
        left: 0; 
        }
    
    .reveal-modal {
        visibility: hidden;
        top: 100px; 
        left: 45%;
        margin-left: -100px;
        width: 402px;
        height: 428px;
        background: #fff no-repeat -200px -80px;
        position: absolute;
        z-index: 101;
        /*padding: 30px 40px 34px;*/
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
        -box-shadow: 0 0 10px rgba(0,0,0,.4);
        }
        
    .reveal-modal.small         { width: 200px; margin-left: -140px;}
    .reveal-modal.medium        { width: 400px; margin-left: -240px;}
    .reveal-modal.large         { width: 600px; margin-left: -340px;}
    .reveal-modal.xlarge        { width: 800px; margin-left: -440px;}
    
    .reveal-modal .close-reveal-modal {
        font-size: 22px;
        line-height: .5;
        position: absolute;
        top: -10px;
        right: -10px;
        color: #aaa;
        text-shadow: 0 -1px 1px rbga(0,0,0,.3);
        font-weight: bold;
        cursor: pointer;
        } 
    /*
        
    NOTES
    
    Close button entity is ×
    
    Example markup
    
    <div id="myModal" class="reveal-modal">
        <h2>Awesome. I have it.</h2>
        <p class="lead">Your couch.  I it's mine.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam. </p>
        <a class="close-reveal-modal">&#215;</a>
    </div>
    
    */