@charset "utf-8";
/* CSS Document */


 @media screen and  (min-device-width: 568px){


#bg{
	/*background:url(../images/bg.jpg) no-repeat 50% 0 #fff;
	
	*/
	width:100%;
	height:400px;
	margin:0 auto}
#container{
	width:816px;
	margin:0 auto;
	position:relative}
/*header start*/
header, .formContrl, .botmTxt{width:495px}
header{
	margin:23px 0 34px 185px;
	display:inline-block;
	position:relative}
header img.logo, header img.punchline{max-width:100%}
header img.punchline{margin-left:29px}
#midBody{position:relative}
.midBgShadow{
	background:url(../images/botm-shadow.png) no-repeat 100% 100%;
	padding-bottom:22px}
.formContrl{
	position:relative;
	margin:0 0 -7px 5px;
	z-index:100;
}
.girlImg{
	position:absolute;
	left:-185px;
	top:-59px;
	z-index:101}
.formHead{
	background-color: #7392ab; 
	background-repeat: repeat-x; 
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7392ab), to(#3e5e78));   /* Safari 4-5, Chrome 1-9 */
	background: -webkit-linear-gradient(top, #7392ab, #3e5e78); /* Safari 5.1, Chrome 10+ */
	background: -moz-linear-gradient(top, #7392ab, #3e5e78);  /* Firefox 3.6+ */
	background: -ms-linear-gradient(top, #7392ab, #3e5e78); /* IE 10 */ 
	background: -o-linear-gradient(top, #7392ab, #3e5e78);/* Opera 11.10+ */
	height:52px;
	font:normal 28px/52px "Myriad Pro", Arial, Helvetica, sans-serif;
	color:#fcfdff;
	text-shadow:0 1px 1px #333;
	padding-left:19px}
.formBg{
	background-color: #eef5f9; 
	background-repeat: repeat-x; 
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eef5f9), to(#cfdce4));   /* Safari 4-5, Chrome 1-9 */
	background: -webkit-linear-gradient(top, #eef5f9, #cfdce4); /* Safari 5.1, Chrome 10+ */
	background: -moz-linear-gradient(top, #eef5f9, #cfdce4);  /* Firefox 3.6+ */
	background: -ms-linear-gradient(top, #eef5f9, #cfdce4); /* IE 10 */ 
	background: -o-linear-gradient(top, #eef5f9, #cfdce4);/* Opera 11.10+ */
	border-radius:0 0 2px 2px;
	font:normal 16px/25px "Myriad Pro", Arial, Helvetica, sans-serif;
	padding:25px 0}
.formBg label{
	position:relative;
	height:23px;
	margin-bottom:8px;
	float:left}
.formBg label:before {
    content:'';
    right:1px; 
	top:0;
	background:url(../images/arrow.gif) no-repeat 0 0;
    width:22px; 
	height:23px;
    position:absolute;
    pointer-events:none;
    display:block}
.formBg label span{
	width:110px;
	text-align:right;
	display:inline-block;
	float:left}
.formBg select{
	width:178px;
	height:23px;
	-webkit-border-radius:4px;
    -moz-border-radius:4px;
	border:1px solid #7392ab;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #7392ab inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #7392ab inset;
    box-shadow: 0 1px 0 #ced6da, 0 -1px #ced6da inset;
    font-size:14px;
	line-height:22px;
	text-indent:2px;
	color:#2d4b67;
	margin-left:18px;
	padding:0;
    outline:none;
    display: inline-block;
	float:left;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none}


      #modal-background {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: white;
        opacity: .50;
        -webkit-opacity: .5;
        -moz-opacity: .5;
        filter: alpha(opacity=50);
        z-index: 1000;
    }
    
    #modal-content {
        background-color: white;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        box-shadow: 0 0 20px 0 #222;
        -webkit-box-shadow: 0 0 20px 0 #222;
        -moz-box-shadow: 0 0 20px 0 #222;
        display: none;
        height: 240px;
        left: 50%;
        margin: -120px 0 0 -160px;
        padding: 10px;
        position: absolute;
        top: 50%;
        width: 320px;
        z-index: 1000;
        font:normal 16px/25px "Myriad Pro", Arial, Helvetica, sans-serif;
    }

    #modal-background.active, #modal-content.active {
        display: block;
    }

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:18px}
}
.button{
    display: block;
	border:1px solid #7e9f28;
    background-color: #97be30; 
	background-repeat: repeat-x; 
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#97be30), to(#7e9f28));   /* Safari 4-5, Chrome 1-9 */
	background: -webkit-linear-gradient(top, #97be30, #7e9f28); /* Safari 5.1, Chrome 10+ */
	background: -moz-linear-gradient(top, #97be30, #7e9f28);  /* Firefox 3.6+ */
	background: -ms-linear-gradient(top, #97be30, #7e9f28); /* IE 10 */ 
	background: -o-linear-gradient(top, #97be30, #7e9f28);/* Opera 11.10+ */
	border-radius:3px;
    text-decoration: none;
    box-shadow: 0 1px 1px rgba(56,56,56,0.7);
    line-height: 32px;
    font-size: 16px;
	font-family:"Myriad Pro", Arial, Helvetica, sans-serif;
    color: #fff;
	/*padding: 0 15px;*/
	margin:8px 0 0 130px}
.button:active{
    color: #fff;
    background:#7e9f28;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7e9f28), to(#97be30));   /* Safari 4-5, Chrome 1-9 */
	background: -webkit-linear-gradient(top, #7e9f28, #97be30); /* Safari 5.1, Chrome 10+ */
	background: -moz-linear-gradient(top, #7e9f28, #97be30);  /* Firefox 3.6+ */
	background: -ms-linear-gradient(top, #7e9f28, #97be30); /* IE 10 */ 
	background: -o-linear-gradient(top, #7e9f28, #97be30);/* Opera 11.10+ */
    text-shadow:none}

.buttonDisabled{
    display: block;
	border:1px solid #000000;
    background-color: #777777; 
	background-repeat: repeat-x; 
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#777777), to(#555555));   /* Safari 4-5, Chrome 1-9 */
	background: -webkit-linear-gradient(top, #777777, #555555); /* Safari 5.1, Chrome 10+ */
	background: -moz-linear-gradient(top, #777777, #555555);  /* Firefox 3.6+ */
	background: -ms-linear-gradient(top, #777777, #555555); /* IE 10 */ 
	background: -o-linear-gradient(top, #777777, #555555);/* Opera 11.10+ */
	border-radius:3px;
    text-decoration: none;
    box-shadow: 0 1px 1px rgba(56,56,56,0.7);
    line-height: 32px;
    font-size: 16px;
	font-family:"Myriad Pro", Arial, Helvetica, sans-serif;
    color: #fff;
	/*padding: 0 15px;*/
	margin:8px 0 0 130px}

.gmpMeter{
	position:absolute;
	right:-33px;
	top:4px;
	background:url(../images/gmp-meter.png) no-repeat 0 0;
	width:220px;
	height:342px;
	display:block;
	padding:38px 0 0 60px;
	font-family: "Wallpoet", monospace;
	font-size:14px;
	line-height:14px;
	z-index:101}
.gmpMeter span.greenTxt, .gmpMeter span.whiteTxt{
	display:block}
.greenTxt{color:#97be30}
.whiteTxt{
	color:#fff;
	margin-bottom:5px}

.botmTxt{
	font-size:14px;
	margin:0 0 0 185px}


		.select2-container{
	width:178px;
	height:23px;
	-webkit-border-radius:4px;
    -moz-border-radius:4px;
	/*border:1px solid #7392ab;
	*/
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #7392ab inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #7392ab inset;
    box-shadow: 0 1px 0 #ced6da, 0 -1px #ced6da inset;
    font-size:14px;
	line-height:22px;
	text-indent:2px;
	color:#2d4b67;
	margin-left:18px;
	padding:0;
    outline:none;
    display: inline-block;
	float:left;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none}


.select2-input
{
	font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
	font-color: #f00;
	font-size: 16px;

}

.select2-results li {
	font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
    list-style: none;
    display: list-item;
    background-image: none;
    font-size: 10px;
}
}




/*iphone hasta el 5 */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px){

/* Para resoluciones menores*/

#container{
	/*width:320%;*/
	margin:0 auto;
	position:relative}
/*header start*/
header, .formContrl, .botmTxt{width:100%}
header{
	/*margin:23px 0 34px 185px;
	*/
	display:inline-block;
	position:relative}
header img.logo, header img.punchline{max-width:100%}
header img.punchline{margin-left:29px}
#midBody{position:relative}
.midBgShadow{
	background:url(../images/botm-shadow.png) no-repeat 100% 100%;
	padding-bottom:22px}
.formContrl{
	z-index:100;
	width:320px;
	text-align:center;
	display:inline-block;
	float:center;
}
.formHead{
	background-color: #7392ab; 
	background-repeat: repeat-x; 
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7392ab), to(#3e5e78));   /* Safari 4-5, Chrome 1-9 */
	background: -webkit-linear-gradient(top, #7392ab, #3e5e78); /* Safari 5.1, Chrome 10+ */
	background: -moz-linear-gradient(top, #7392ab, #3e5e78);  /* Firefox 3.6+ */
	background: -ms-linear-gradient(top, #7392ab, #3e5e78); /* IE 10 */ 
	background: -o-linear-gradient(top, #7392ab, #3e5e78);/* Opera 11.10+ */
	height:28px;
	font:normal 18px/23px "Myriad Pro", Arial, Helvetica, sans-serif;
	color:#fcfdff;
	text-shadow:0 1px 1px #333;
	padding-left:19px;

}
.formBg{
	background-color: #eef5f9; 
	background-repeat: repeat-x; 
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eef5f9), to(#cfdce4));   /* Safari 4-5, Chrome 1-9 */
	background: -webkit-linear-gradient(top, #eef5f9, #cfdce4); /* Safari 5.1, Chrome 10+ */
	background: -moz-linear-gradient(top, #eef5f9, #cfdce4);  /* Firefox 3.6+ */
	background: -ms-linear-gradient(top, #eef5f9, #cfdce4); /* IE 10 */ 
	background: -o-linear-gradient(top, #eef5f9, #cfdce4);/* Opera 11.10+ */
	border-radius:0 0 2px 2px;
	font:normal 16px/25px "Myriad Pro", Arial, Helvetica, sans-serif;
	padding:25px 0}
.formBg label{
    float: left;
    height: 23px;
    margin-bottom: 26px;
    position: relative;
    width: 100%;
}

.formBg label span{
	width:100%;
	text-align:center;
	display:inline-block;
	float:left
}
.formBg select{
	width:90%;
	margin-left:5%;
	margin-right:5%;
	height:23px;
	-webkit-border-radius:4px;
    -moz-border-radius:4px;
	border:1px solid #7392ab;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #7392ab inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #7392ab inset;
    box-shadow: 0 1px 0 #ced6da, 0 -1px #ced6da inset;
    font-size:14px;
	line-height:22px;
	text-indent:2px;
	color:#2d4b67;

	padding:0;
    outline:none;
    display: inline-block;
	float:left;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:18px}
}
.button{
    display: inline-block;
	border:1px solid #7e9f28;
    background-color: #97be30; 
	background-repeat: repeat-x; 
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#97be30), to(#7e9f28));   /* Safari 4-5, Chrome 1-9 */
	background: -webkit-linear-gradient(top, #97be30, #7e9f28); /* Safari 5.1, Chrome 10+ */
	background: -moz-linear-gradient(top, #97be30, #7e9f28);  /* Firefox 3.6+ */
	background: -ms-linear-gradient(top, #97be30, #7e9f28); /* IE 10 */ 
	background: -o-linear-gradient(top, #97be30, #7e9f28);/* Opera 11.10+ */
	border-radius:3px;
    text-decoration: none;
    box-shadow: 0 1px 1px rgba(56,56,56,0.7);
    line-height: 32px;
    font-size: 16px;
	font-family:"Myriad Pro", Arial, Helvetica, sans-serif;
    color: #fff;
	/*padding: 0 15px;*/
	width: 44%;
	height: 40px;
	margin:1% 0 0 1%;
}
.button:active{
		width: 44%;
	margin:3% 0 0 3%;
    color: #fff;
    background:#7e9f28;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7e9f28), to(#97be30));   /* Safari 4-5, Chrome 1-9 */
	background: -webkit-linear-gradient(top, #7e9f28, #97be30); /* Safari 5.1, Chrome 10+ */
	background: -moz-linear-gradient(top, #7e9f28, #97be30);  /* Firefox 3.6+ */
	background: -ms-linear-gradient(top, #7e9f28, #97be30); /* IE 10 */ 
	background: -o-linear-gradient(top, #7e9f28, #97be30);/* Opera 11.10+ */
    text-shadow:none;
	width: 44%;
	height: 40px;
	margin:1% 0 0 1%;
	}
.gmpMeter{
	display:block;
	background:#000;
    
	font-family: "Wallpoet", monospace;
	font-size:14px;
	line-height:14px;
	z-index:101}
.gmpMeter span.greenTxt, .gmpMeter span.whiteTxt{
	display:block}
.greenTxt{color:#97be30}
.whiteTxt{
	color:#fff;
	margin-bottom:5px}






.select2{
		width:90%;
	margin-left:5%;
	margin-right:5%;
}
.select2-input
{

	font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
	font-color: #f00;
	font-size: 16px;

}

.select2-results li {
	font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
    list-style: none;
    display: list-item;
    background-image: none;
    font-size: 10px;
}


}