* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: arial, 'Source Sans Pro', sans-serif;
  background:#fff;
}



#container {
    display:flex;
    align-items: stretch;
    margin:0;
    padding:1%;
}
#utils {
    position:relative;
    width:20%;
    min-width:400px;
    margin:0;
    border-right:1px solid #ccc;
}
.logo {
    width:100%;
}
.form {
    width:80%;
    margin:0 auto;
    padding:0;
}
#utils + .form {
    margin-left:1%;
}

.titulo {
    margin-bottom: 1%;
    font-size: 3em;
    }

#selector-idioma {
    position:relative;
    text-align:center;
    margin:0;
    padding:0;
}

.btn,
#selector-idioma a {
  display:inline-block;
  background-color: #fff;
  border: 2px solid #ccc;
    -webkit-border-radius: 25px;
     -khtml-border-radius: 25px;
       -moz-border-radius: 25px;
            border-radius: 25px;  
  padding: 10px 15px;
  color: #ccc;
  font-size: 1em;
  font-weight:bold;
  text-decoration:none;
}

    .btn.volver::before {
        content:"← ";
    }
.btn:hover,
#selector-idioma a.on{
  background-color: #ccc;
  color: #fff;
}
#selector-idioma a + a{
    margin-left:1%;
}

.validationsummary {
    position:relative;
    padding:5%;
    margin:5%;
    border: 1px solid #ccc;
            overflow:hidden;
    -webkit-border-radius: 25px;
     -khtml-border-radius: 25px;
       -moz-border-radius: 25px;
            border-radius: 25px;  
}
    .validationsummary > * {
  /* Safari 4.0 - 8.0 */
  -webkit-animation-name: persiana;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  /* Standard syntax */
  animation-name: persiana;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: alternate;
    }
/* Safari 4.0 - 8.0 */
@-webkit-keyframes persiana {
  0%   {margin-left:-100%;}
}

/* Standard slideInFromTop */
@keyframes persiana {
  0%   {margin-left:-100%;}
}

.validationsummary label {
    display:block;
    margin-bottom:1em;
}
.validationsummary UL { 
    list-style-position: inside;
    list-style-type:square;
}
.validationsummary UL LI{ 
    margin:0 0 .5em .5em;

}
.validationsummary a { 
    color:firebrick;
    text-decoration:none;
}

.info {
    font-size:1em;
    line-height: 1.4em;
    font-family: georgia;
    color: #107a91;
    background: #c6f5ff;
    padding: 3%;
    margin-bottom:1%;
}
    .info > p {
        text-align:justify;   
    }
    .info > p + p{
        margin: .5em 0 0 0;
    }
.info::before { 
    content: "i";
    display: block;
    float:left;
    margin:0 3% 3% 0;
    background: #15a3c0;
    border: 2px solid #08768d;
    color: #ffffff;
    width:100px;
    height:100px;
    line-height: 100px;
    font-size:80px;
    text-align:center;
    vertical-align:middle;
    font-family:Georgia, "Times New Roman", Times, serif;
    -webkit-border-radius: 100px;
     -khtml-border-radius: 100px;
       -moz-border-radius: 100px;
            border-radius: 100px;
}
.info::after{
    content: " ";
    display:block;
    height:0px;
    clear:both;
    }
/*FORMULARIOS*/
.wrap-form-input, 
.wrap-form-input-upload,
.wrap-form-textarea,
.wrap-form-check,
.wrap-form-radio,
.wrap-form-select,  
.wrap-form-photo,
.wrap-form-buttons,
.wrap-form-button,
.wrap-form-reorderlist,
.wrap-paragraph,
.wrap-form-labels,
.wrap-forms-group,
.wrap-visibility { 
    margin:0; 
    padding:0; 
    display:block; 
    position:relative; 
}

*[class*="wrap-form"] + *[class*="wrap-form"] {
    margin-top:1em;
}

/*labels forms*/
.label-form,
.label-forms-group {
  font-size: 1.2em;
  color: #000;
  margin-bottom:.5em;
}

*[class*="wrap-form"].d_fullField .label-form  {
    color: firebrick;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
}
/*croppie foto*/
.wrap-photo {
        margin-bottom:1em;
}
.wrap-photo #fotoImage{
        vertical-align:top;
}
#uploaderHTML5 {
 text-align:center;
}
#uploaderHTML5 input[type="file"]{
    border: 5px solid #cccccc;
    padding: .5em;
}

/*input type text*/
.wrap-form-input .label-form {
    font-size:.8em;
    color:#fff;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
}
.wrap-form-input.d_focusField .label-form{
  color: #ccc;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
}
.wrap-form-input input[type="text"] {
    display: block;
    font-size: 1.2em;
    border:0;
    border-bottom: 2px solid #ccc;
    background-color: #fff;
    width: 100%;
    padding:0;
    margin: 0 auto;
    color: #000;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
    -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
            outline: 0;

}
.wrap-form-input.d_fullField input[type="text"] {
    border-bottom: 2px solid firebrick;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
}

/*input type file*/
.wrap-form-input-upload .label-form {
    display:block;
}

.wrap-form-input-upload input[type="file"] {
    border: 5px solid #cccccc;
    padding: .5em;
    width:100%;
}

/*check*/
.wrap-form-check input {
    margin-bottom:1em;
    vertical-align:baseline;
}
.wrap-form-check input + label,
.wrap-form-check input + a {
 margin-left:5px;
}
.wrap-form-check input + a {
    color:#999;
}
.wrap-form-check.d_fullField input + a{
    color: firebrick;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
}

/*radio*/
.wrap-form-radio input {
    margin-bottom:1em;
    vertical-align:baseline;
}
.wrap-form-radio .grupo-selectores {
    display:block;
    padding:0;
    margin-left:3%;
}
.wrap-form-radio input + label {
    margin-left:5px;
    color:#999;
}
.wrap-form-radio.d_fullField input::selection + label {
    color: firebrick;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
}
.wrap-form-radio.d_fullField input.d_on + label{
    color: firebrick;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
}

/*select*/
.wrap-form-select select {
    font-size:1em;
    border: 2px solid #ccc;
    width:100%;
}
.wrap-form-select.d_fullField select {
    border-color: firebrick;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
}

/*button, type="submit"*/
.wrap-form-button {
    text-align:left;
}
.wrap-form-button.center {
    text-align:center;
}
.wrap-form-button.right {
    text-align:right;
}
.wrap-form-button input[type="submit"]{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  background-color:#999;
  border: 0;
  padding: 10px 15px;
  color: #fff;
    -webkit-border-radius: 3px;
     -khtml-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;  
  width: 250px;
  cursor: pointer;
  font-size: 1.2em;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
}
.wrap-form-button input[type="submit"]:hover,
.wrap-form-button input[type="submit"]:focus,
.wrap-form-button input[type="submit"]:active{
  background-color:firebrick;
  outline:0px;
  outline-offset:-2px;
}
.wrap-form-button input[type="submit"]::-moz-focus-inner {
  border: 0;
}

/* pseudo popups */

.wrap-pop-msg  
{
    font-size:1em;
    line-height:1.6em; 
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    right:0;
    z-index:1;
    background:rgba(0,0,0,.5);
    }
.pop-msg {    
    display: block;
    position: fixed;
    z-index:1;
    left:50%;
    top:50%;
    transform:translate(-50%, -100%);
    max-width:400px;
    text-align: justify;
    margin: 0 auto;
    padding: 1%;
    line-height: 160%;
    background: #fff none;
    border-left: 10px solid #1E77B1;
    box-shadow: 1px 1px 3px rgba(0,0,0,.5);

  /* Safari 4.0 - 8.0 */
  -webkit-animation-name: slideInFromTop;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  /* Standard syntax */
  animation-name: slideInFromTop;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: alternate;
}
.wrap-pop-msg.alert .pop-msg {
    border-left-color:#a71b1b; 

}
.pop-msg-text {
    margin:1em 0;
    padding:1em 0;
}
.pop-msg-button {
    text-align:center;

}


/* agrupar formularios en linea */
.wrap-forms-group > *[class*="wrap-form"] {
    display:inline-block;
    vertical-align:top;
    margin:0;
}
.label-forms-group {

}
/*  --------------------------------------------------------------------------------------------------------------------------

    inputs con attr placeholder y funcionando con el plugin jquery.placeholder.js
    para solucionar IE 7, 8, y 9

    -------------------------------------------------------------------------------------------------------------------------- */   

html.ie7 .placeholderIEOld { color:#999; } /*IE */
html.ie8 .placeholderIEOld { color:#999; } /*IE */
html.ie9 .placeholderIEOld {  } /*IE */

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  font-family: arial, 'Source Sans Pro', sans-serif;
  color: #ccc;
  opacity:1;
}
:focus::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: #fff;
  }

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  font-family: arial, 'Source Sans Pro', sans-serif;
  color: #ccc;
  opacity:1;
}
:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #fff;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  font-family: arial, 'Source Sans Pro', sans-serif;
  color: #ccc;
  opacity:1;
}
:focus::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #fff;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  font-family: arial, 'Source Sans Pro', sans-serif;
  color: #ccc;
  opacity:1;
}
:focus:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #fff;
}

:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  font-family: arial, 'Source Sans Pro', sans-serif;
  color: #ccc;
  opacity:1;
}
:focus:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  color: #fff;
}


/* Keyframes*/

/* Safari 4.0 - 8.0 */
@-webkit-keyframes slideInFromTop {
  0%   {top:-100%;}
}

/* Standard slideInFromTop */
@keyframes slideInFromTop {
  0%   {top:-100%;}
}



/*media queries*/
@media only screen and (max-width : 1024px) {
    #container {
        display:block;
        align-items:initial;
        margin:5%;
        padding:1%;
    }
    #utils {
        width:100%;
        min-width:initial;
        margin:0;
        padding: 0 5% 5% 0;
        border-right:0px;
        border-bottom:1px solid #ccc;

    }
    .form {
        width:100%;
    }
    #utils + .form {
        margin-left:0;
        margin-top:5%;
    }

    #selector-idioma {
        text-align: right;
    }
    .btn,
    #selector-idioma a {
      padding: 5px 10px;
    }
    .titulo {
        font-size: 2em;
    }
}
@media only screen and (max-width : 768px) {
}
@media only screen and (max-width : 480px) {

    .titulo {
        font-size: 1.4em;
    }

}