/* ========= CSS Reset ========== */
body, h1, h2, h3, h4, h5, h6, a, p, ul, ol, li, em, strong, pre, code, form {
    padding: 0;
    margin: 0;
}

ul {
  margin-left: 5%;
}

/* ========= LAYOUT STYLES ========== */
html, body { height: 100%; }

#body_wrapper {
    width: 100%;
}

#wrapper {
    left: 35px;
    width: 550px;
    height: 640px;

    margin: 0px 0px 35px 0px;

    position: relative;
    z-index: 100;
}

#menu_wrap {
    width: 100%;
    position: relative;
    top: 0px;
    z-index: 500;
}

#menu {
    width: 100%;
    padding: 0;
}

#logo {
    margin-bottom: 10px;
}

#logo h1 a {
    display: block;
    width: 100%;
    height: 100px;
}

iframe {
    padding: 0px;
	height: 100%;
}

.iframe_ai,
.iframe_ai_firma,
.iframe_ai_donativo {
	/* width: 480px; */ /* ========= IMPORTANT - PARA EVITAR AL ANCHO TOTAL VS RESPONSIVE =========== */
	height: 392px;
	/* margin-left: 35px; */
}

#footer {
    width: 100%;
    height: 40px;

    padding-top: 10px;

    clear: both;
}

#footer_info {
    position: relative;
    padding-left: 20px;
    width: 100%;
    height: 100%;
}

#image_caption {
    position: absolute;
    top: 0px;
    right: 20px;

    width: 500px;
    height: 80px;

    z-index: 400;
}

#image_caption .photo_description {
    position: absolute;

    width: 470px;
    height: 40px;

    left: 15px;
    top: 15px;
}

#image_caption .photo_copyright {
    position: absolute;
    text-align: right;

    height: 15px;

    right: 15px;
    bottom: 15px;
}

/*** GRID BACKGROUND - FELIPE - MICROSITE MUJERES IRÁN - 16/06/2015 ***/
/** .grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
} **/

#content_wrapper {
    padding-top: 15px;
    padding-left: 25px;
    padding-right: 25px;
}

p, input {
    margin-top: 8px;
}

#buttons {
    /* position: absolute; */  /* ========= IMPORTANT -BOTONES DONATIVOS EN POSICIÓN CORRECTA =========== */
    bottom: 20px;
    right: 15px;
}

/* ========= COLORS, BACKGROUNDS AND FONTS =========== */
@font-face {
      font-family: 'TradeGothic-BoldCondTwenty';
      src: url('../font/TradeGothic-BoldCondTwenty.eot?#iefix') format('embedded-opentype'),
      url('../font/TradeGothic-BoldCondTwenty.woff') format('woff'),
      url('../font/TradeGothic-BoldCondTwenty.ttf')  format('truetype'),
      url('../font/TradeGothic-BoldCondTwenty.svg#TradeGothic-BoldCondTwenty') format('svg');
      font-weight: normal;
      font-style: normal;
}

@font-face {
  font-family: 'TradeGothicLT-BoldCondTwenty';
  src: url("../font/tradegothiclt-boldcondtwenty.eot?#iefix") format("embedded-opentype"),
  url("../font/tradegothiclt-boldcondtwenty.woff") format("woff"),
  url("../font/tradegothiclt-boldcondtwenty.ttf") format("truetype"),
  url("../font/tradegothiclt-boldcondtwenty.svg#TradeGothicLT-BoldCondTwenty") format("svg");
  font-weight: normal;
  font-style: normal;
}


body {
	color: white;
	background: black;
	font-family: Sans-Serif;
  font-size: 13px;
}

#menu_wrap {
    -webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.75);
}

/**
.grid {
    background: url(../images/grid.png);
} **/  /*** GRID BACKGROUND - FELIPE - MICROSITE MUJERES IRÁN - 16/06/2015 ***/

#menu {
    background-color: #ffee00;
}

.gris {
    color: black;
    background-color: #f5f5f5;
}

/* Firefox *//** letra más pequeña en firefox para evitar el scroll - 01/07/2015 **/
@-moz-document url-prefix() {
  .gris {
     font-size:12px !important;
  }
}


#logo h1 a {
    background: url(../images/logo_back.png) no-repeat top left;
}

a { color: #999999; }
a:hover { color: #c4c4c4; }

.quote {
    font-style: italic;
}

#image_caption {
    font-size: 15px;
    background-color:rgba( 0, 0, 0, 0.5);
    color: white;
}

#footer {
    font-size: 10px;
}

#footer_info p { color: #000; }

.photo_description {
    font-weight: bold;
}

/*  ========= AMNESTY BUTTONS =========  */
#buttons .ai-button {
    background: url("../images/boton-bg-derecha.png") no-repeat scroll right top transparent;
    display: block;
    float: left;
    height: 47px;
    margin: 0px 10px 0px 0px;
    padding-right: 20px;
    color: rgb(0, 0, 0) !important;
    margin-left: 10%;
}

#buttons .ai-button a,
#buttons .ai-button input
 {
    background: url("../images/boton-bg-izquierda.png") no-repeat scroll 0% 0% transparent;
    font: bold 16px Arial,Helvetica,sans-serif !important;
    --font-family: "TradeGothicLT-BoldCondTwenty","HelveticaNeue-CondensedBold","Franklin Gothic Medium",sans-serif;
    text-decoration: none;
    display: block;
    height: 47px;
    line-height: normal;
    margin: 0px;
    color: rgb(0, 0, 0) !important;
    border: 0px none;
    cursor: pointer;
}

#buttons .ai-button a {
    padding: 13px 0px 5px 20px;
}

#buttons .ai-button input {
    padding: 0px 0px 5px 20px;
}

#buttons .ai-button-padding input{
    padding: 0px 10px 1px 24px;
    --margin-left: 19%;
}

#buttons .ai-button-padding{
  padding: 0% 4% 0% 16%;
}

#buttons .ai-button-padding a{
    --padding: 14px 53px 0px 63px;
}


#buttons .ai-button-verde {
    background: url("../images/boton-bg-derecha-verde.png") no-repeat scroll right top transparent;
    display: block;
    float: left;
    height: 47px;
    margin: 0px 10px 0px 0px;
    padding-right: 20px;
    color: rgb(0, 0, 0) !important;
}

#buttons .ai-button-verde a,
#buttons .ai-button-verde input
 {
    background: url("../images/boton-bg-izquierda-verde.png") no-repeat scroll 0% 0% transparent;
    font: bold 16px Arial,Helvetica,sans-serif !important;
    text-decoration: none;
    display: block;
    height: 47px;
    line-height: normal;
    margin: 0px;
    color: rgb(0, 0, 0) !important;
    border: 0px none;
    cursor: pointer;
}

#buttons .ai-button-verde a {
    padding: 13px 0px 5px 20px;
}

#buttons .ai-button-verde input {
    padding: 0px 0px 5px 20px;
}

#input .input-dni {
  margin-left: 27%;
}

#texto .text-gracias {
  margin-left:24px;
}


.clear-clear { clear: both !important;}

/*  ========= MEDIA QUERIES =========  */
@media screen and (max-width: 1120px) {

    #image_caption {
        width: 300px;
        height: 125px;
    }

    #image_caption .photo_description {
        width: 270px;
    }

}

@media screen and (max-width: 940px) {

    #image_caption {
        display: none;
        visibility: hidden;
    }

}

@media screen and (max-device-width: 1120px) {

    #content_wrapper {
        font-size: 13px;
    }

}

@media screen and (max-device-width: 940px) {

    #content_wrapper {
        font-size: 11px;
    }

@media screen and (max-device-width: 768px) {

      #buttons .ai-button-padding{
      padding: 0% 4% 0% 9%;
    }


@media screen and (max-device-width: 414px) {

      #buttons .ai-button-padding{
      padding: 0% 5% 0% 0%;
    }

}