/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 *
 * ==|== normalize ==========================================================
 */

 :root {
   /*Principales*/
  --color1:#FF411C;
  --lightColor1: #F8E2DA;
  --color2: #181818;

  /* Especiales */
  --commonTextColor: #3D3D3D;

  /* Fondo y General */
  --sidebarBgColor: #F7F7F7;
  --sidebarNavColor: #515151;
  --topnavbar-bg : #E0E0E0;
  --textColor: #3D3D3D;
  --textColor2 : #666666;
  --border-base: #CCCCCC;
  --leftbar-color-label: #666666;

  /* Botones */
	--color-btn-primary-bg : #181818;
	--color-btn-primary-ft : #F7F7F7;
	--color-btn-primary-hover-bg : #FF411C;
	--color-btn-primary-hover-ft: #F7F7F7;
	--color-btn-primary-disabled-bg : #B8B8B8;
	--color-btn-primary-disabled-ft : #515151;
  
  
	--color-btn-secondary-border : #FF411C;
	--color-btn-secondary-bg: #FFFBFA;
	--color-btn-secondary-ft: #3D3D3D;
  
	--color-btn-secondary-hover-border : #FF411C;
	--color-btn-secondary-hover-bg: #F8E2DA;
	--color-btn-secondary-hover-ft: #3D3D3D;
  
	--color-btn-secondary-disabled-border : #7A7A7A;
	--color-btn-secondary-disabled-bg: #E0E0E0;
	--color-btn-secondary-disabled-ft: #515151;
 }


/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

   article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
   audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
   audio:not([controls]) { display: none; }
   [hidden] { display: none; }
   
   
   /* =============================================================================
      Base
      ========================================================================== */
   
   /*
    * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
    * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
    */
   
   html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
   
   html, button, input, select, textarea ,label, h4  { font-family: 'Roboto-Regular'; color: rgb(113, 113, 116); }
   
   body { margin: 0; font-size: 1em; line-height: 1.4; }
   
   /*
    * Remove text-shadow in selection highlight: h5bp.com/i
    * These selection declarations have to be separate
    * Also: hot pink! (or customize the background color to match your design)
    */
   
   ::-moz-selection { background: rgba(0,0,0,0.7); color: #fff; text-shadow: none; }
   ::selection { background: rgba(0,0,0,0.7); color: #fff; text-shadow: none; }
   
   
   /* =============================================================================
      Links
      ========================================================================== */
   
   a { color:#4878BF; }
   a:visited { color: #4878BF; }
   a:hover { color: #06e; }
   a:focus { outline: thin dotted; }
  
   
   
   /* Improve readability when focused and hovered in all browsers: h5bp.com/h */
   a:hover, a:active { outline: 0; }
   
   
   /* =============================================================================
      Typography
      ========================================================================== */

 @font-face {
    font-family: 'Roboto-Regular';
    src: url('../fonts/Roboto-Regular.ttf');
  }
  @font-face {
    font-family: 'Roboto-Bold';
    src: url('../fonts/Roboto-Bold.ttf');
  }
  @font-face {
    font-family: 'Roboto-Medium';
    src: url('../fonts/Roboto-Medium.ttf');
  }
   
   abbr[title] { border-bottom: 1px dotted; }
   
   b, strong { font-weight: bold; }
   
   blockquote { margin: 1em 40px; }
   
   dfn { font-style: italic; }
   
   hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
   
   ins { background: #ff9; color: #000; text-decoration: none; }
   
   mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
   
   /* Redeclare monospace font family: h5bp.com/j */
   pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
   
   /* Improve readability of pre-formatted text in all browsers */
   pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
   
   q { quotes: none; }
   q:before, q:after { content: ""; content: none; }
   
   small { font-size: 85%; }
   
   /* Position subscript and superscript content without affecting line-height: h5bp.com/k */
   sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
   sup { top: -0.5em; }
   sub { bottom: -0.25em; }
   
   .mainText1 {
     font-family: 'Roboto-Bold';
     color: var(--textColor);
   }
   /* =============================================================================
      Lists
      ========================================================================== */
   
   ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
   dd { margin: 0 0 0 40px; }
   nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
   
   
   /* =============================================================================
      Embedded content
      ========================================================================== */
   
   /*
    * 1. Improve image quality when scaled in IE7: h5bp.com/d
    * 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
    */
   
   img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
   
   /*
    * Correct overflow not hidden in IE9
    */
   
   svg:not(:root) { overflow: hidden; }
   
   
   /* =============================================================================
      Figures
      ========================================================================== */
   
   figure { margin: 0; }
   
   
   /* =============================================================================
      Forms
      ========================================================================== */
   
   form { margin: 0; }
   fieldset { border: 0; margin: 0; padding: 0; }
   
   /* Indicate that 'label' will shift focus to the associated form element */
   label {/* cursor: pointer; */}
   
   /*
    * 1. Correct color not inheriting in IE6/7/8/9
    * 2. Correct alignment displayed oddly in IE6/7
    */
   
   legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
   
   /*
    * 1. Correct font-size not inheriting in all browsers
    * 2. Remove margins in FF3/4 S5 Chrome
    * 3. Define consistent vertical alignment display in all browsers
    */
   
   button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
   
   /*
    * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
    */
   
   button, input { line-height: normal; }
   
   /*
    * 1. Display hand cursor for clickable form elements
    * 2. Allow styling of clickable form elements in iOS
    * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
    */
   
   button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
   
   /*
    * Re-set default cursor for disabled elements
    */
   
   button[disabled], input[disabled] { cursor: default; }
   
   /*
    * Consistent box sizing and appearance
    */
   
   input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
   input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
   input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
   
   /*
    * Remove inner padding and border in FF3/4: h5bp.com/l
    */
   
   button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
   
   /*
    * 1. Remove default vertical scrollbar in IE6/7/8/9
    * 2. Allow only vertical resizing
    */
   
   textarea { overflow: auto; vertical-align: top; resize: vertical; }
   
   /* Colors for form validity */
   input:valid, textarea:valid {  }
   input:invalid, textarea:invalid { background-color: #f0dddd; }
   
   
   /* =============================================================================
      Tables
      ========================================================================== */
   
   table { border-collapse: collapse; border-spacing: 0; }
   td { vertical-align: top; }
   
   
   /* =============================================================================
      Chrome Frame Prompt
      ========================================================================== */
   
   .chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }

/*nuevos JO*/
.img-responsive {
    width: 60%;
    height: 600px;
    border-right: solid 2px #d3d3d3;
    padding-right: 25%;
}

   /*
      Login Nuevo
   */
   
  .loginContainer {
    background-color: #F5F6F8
  }

  .panel-body {
		padding: 10px;
  }
  
  .tab-base .tab-content .panel-body {
		padding: 0;
  }
  
  .panel-body.overflow-x .table {
    margin-bottom: 0;
  } 

  .logo-name {
    background: url(../img/logo-bolsa_resp.svg) no-repeat center;
    height: 150px;
    background-size: 150px auto;
    text-indent: -999999px;
}

.form-group.fix {
	height: 55px;
}

.form-group.fix .input-group span {
	line-height: 33px;
}

.wizard .form-horizontal .form-group {
	margin-left: 0;
	margin-right: 0;
}

.wizard .form-inline .form-group {height: auto;}

.form-inline .form-group {
  height: auto;
}
   
   /* ==|== primary styles =====================================================
      Author:
      ========================================================================== */
   .fl {float:left;}
   .fr {float:right;}
   .overlayVideo {
     position: absolute;
     z-index: 2;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background-color: rgba(51, 51, 51, 0.37);
   }
   /* Alertas */
   .alert.alert-danger {
       background-color: #f0dddd;
       border-radius: 3px;
       padding: 10px;
       color: red;
   }
   .alert-danger p {
     margin: 0;
   }
   .alert-danger small {
       width: 100%;
       font-size: 13px;
       line-height: normal;
       display: block;
   }
   
   #formulario .alert.alert-danger {
     margin-bottom: 20px;
       margin-top: -10px;
   }
   
   body {
       font-family: 'Roboto-Regular';
       background-color: #282828;
       color: #d3d3d3;
   }
   
   #main {
       position: relative;
       z-index: 9;
       margin: 0 auto;
       width: 80%;
       max-width: 1024px;
       padding-bottom: 40px;
   }
   
   section#logo {
     padding-top: 50px;
     padding-right: 30px;
     padding-bottom: 50px;
     padding-left: 80px;
       background: url(../img/LogoOptimusBlanco.png) bottom left no-repeat,
       url(../img/LogoBolsa-Blanco.png) bottom right no-repeat;
       background-size: 220px, 220px;
       height: 50px;
       width: 920px;
   }
   section#contenidos #Corredor{
     padding-top: 100px;
     background:   url(../img/logo_mbi.png) bottom left no-repeat;
     background-size: 120px;
     padding-top: 50px;
     padding-right: 80px;
     padding-bottom: 50px;
     padding-left: 190px;
     height: 40px;
    
   }
   section#contenidos {
   /*margin-top: 90px;*/
 }
   #hr{
     float:'center'
   }
   
   #leyenda {
     width: 52.33333333%;
     float: left;
     /*padding-right: 6%;*/
   }
   #leyenda h2 {
     margin: 10px 0 10px;
     color: #fff;
     font-size: 54px;
     line-height: 117px;
     font-weight: 900;
   }
   #leyenda h3 {
     color: #fff;
     font-size: 19px;
     line-height: 26px;
     font-weight: 400;
     text-transform: none;
     TEXT-ALIGN:justify;
     margin-bottom: 30px;
   }
   #leyenda #leyend-logos {
     overflow: auto;
     position: relative;
     margin-top: 20%; /*50%*/
   }
   #leyenda #logoSap {
     position: absolute;
     bottom: 0;
   }
   #leyenda #logoBolsa #logoBlack {
     display:none;
   }
   
   /* Formulario */
   #form-content {
     color: #fff;
     padding: 50px 45px;
     background-color: rgb(0, 0, 0);
     background-color: #F5F6F8;
     -webkit-border-radius: 5px 5px;
     -moz-border-radius: 5px 5px;
     border-radius: 5px 5px;
     margin-top: 20px;
   }
   form.form input#usuario,
   form.form input#password {
     width: calc(100% - 20px);
     margin-bottom: 20px;
     padding: 13px 10px;
     border-radius: 3px;
     border: none;
     
   }
   form.form input#usuario:disabled,
   form.form input#password:disabled,
   form.form input#usuario:read-only,
   form.form input#password:read-only,
   input:-webkit-autofill:disabled,
   input:-webkit-autofill:read-only {
     opacity: 0.6;
   }
   
   form.form select#empresa,
   form.form select#perfil {
     width: 100%;
     margin-bottom: 15px;
     padding: 13px 10px;
     border-radius: 3px;
     border: none;
   }
   input#btn-login {
       color: var(--color-btn-primary-ft);
       width: 100%;
       background-color: var(--color-btn-primary-bg);
       display: block;
       font-size: 13px;
       font-weight: 500;
       padding: 13px 25px;
       border-color: var(--color-btn-primary-bg);
       background-image: none;
       border: 1px solid transparent;
       text-transform: uppercase;
       vertical-align: baseline;
       -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
       border-radius: 3px;
       -webkit-transition: all 300ms ease-in-out;
       -moz-transition: all 300ms ease-in-out;
       -o-transition: all 300ms ease-in-out;
       -ms-transition: all 300ms ease-in-out;
       transition: all 300ms ease-in-out;
       margin-top: 10px;
   }
   h3#text-title {
    color: rgb(255, 255, 255);
    width: 100%;
    background-color: #84C050;
    display: block;
    font-size: 13px;
    font-weight: 500;
    padding: 13px 25px;
    background-color: #84C050;   
    margin-top: 10px;
}
   input#btn-login:hover {
     background-color: var(--color-btn-primary-hover-bg);
         -webkit-transition: all 300ms ease-in-out;
       -moz-transition: all 300ms ease-in-out;
       -o-transition: all 300ms ease-in-out;
       -ms-transition: all 300ms ease-in-out;
       transition: all 300ms ease-in-out;
   }
   input#btn-login:disabled {
     background-color: var(--color-btn-primary-disabled-bg)
   }
   .button-spinner input#btn-login {
       background-color: var(--color1) !important;
       background: url(../img/loading.svg) no-repeat 7px center;
       background-size: 25px;
       padding-left: 45px;
   }

   #formulario {
       width: 41.66666667%;
       float: right;
   }
   h1, h2,  h4, h5, h6 {
       font-family: 'Roboto-Regular';
   }

  img{
    display:block;
    margin:auto;
    }

  hr{ 
    border:         none;
    border-left:    1px solid hsla(200, 10%, 50%,100);
    height:         100vh;
    width:          1px;       
  }

   h3{
    font-family: 'Roboto-Regular';
    color: #4878BF;
   }

   label{
    font-family: 'Roboto-Bold';    
    color: var(--textColor2);
    font-weight: 600;
    font-size:14px;
   }

   label:hover{
    color:var(--textColor);
   }

   #form-content h4 {
     font-size: 15px;
     margin-top: 0;
     font-weight: normal;
     margin-bottom: 30px;
   }
   
   
   /* Video */
   #video-background {
       position: absolute;
       right: 0;
       bottom: 0;
       min-width: 100%;
       min-height: 100%;
       width: auto;
       height: auto;
       z-index: 1;
       -webkit-filter: blur(5px);
       -moz-filter: blur(5px);
       -o-filter: blur(5px);
       -ms-filter: blur(5px);
       filter: blur(5px);
   }
   
   /* Footer */
   .stock-footer {
       opacity: 0;
       background-color: rgba(0, 0, 0, 0.7);
       position: fixed;
       bottom: 0;
       left: 0;
       z-index: 100;
       width: calc(100% - 20px);
       color: #FFFFFF;
   }
   .stock-footer-container {
       max-width: 1024px;
       margin: 0 auto;
       font-size: 14px
   }
   .stock-footer-date-time {
       float: right;
   }
   footer aside {
       padding: 0;
   }
   .stock-footer-stocks {
       margin-bottom: 0;
       float: left;
       padding-left: 0;
       margin-top: 0;
   }
   .stock-footer-stocks li {
       list-style: none;
       float: left;
       margin: 0;
       margin-right: 20px;
   }
   .stock-footer-close .market-decrease .stock-standing:before {
       content: '';
       width: 0;
       height: 0;
       border-left: 7px solid transparent;
       border-right: 7px solid transparent;
       display: inline-block;
       margin-left: .3rem;
       margin-bottom: .2rem;
       margin-right: 0.3rem;
   } 
   .stock-footer-close .market-increase .stock-standing:before {
       content: '';
       width: 0;
       height: 0;
       border-left: 7px solid transparent;
       border-right: 7px solid transparent;
       display: inline-block;
       margin-left: .3rem;
       margin-bottom: .2rem;
       margin-right: 0.3rem;
   }
   .stock-footer-close .market-decrease.market-decrease span {
     color: #f63c39;
   } 
   .stock-footer-close .market-increase.market-increase span {
       color: #1dc73b;
   }
   .stock-footer-close .market-decrease.market-decrease .stock-standing:before {
     border-top: 6px solid #f63c39;
     border-bottom: 0;
   } 
   .stock-footer-close .market-increase.market-increase .stock-standing:before {
       border-bottom: 6px solid #1dc73b;
       border-top: 0;
   }
   
   .market-decrease.market-decrease .stock-change {
     color: #f63c39;
   } 
   .market-increase.market-increase .stock-change {
       color: #1dc73b;
   }
   .market-decrease.market-decrease .stock-standing:before {
     border-top: 6px solid #f63c39;
   } 
   .market-increase.market-increase .stock-standing:before {
       border-top: 6px solid #1dc73b;
   }
   
   @media (min-width: 1023px) and (max-width: 1025px){
     #leyenda h2 {
       font-size: 51px;
     }
     section#contenidos {
       margin-top: 50px;
     }
     section#logo {
       padding-top: 70px;
     }
     section#contenidos #Corredor {
       padding-top: 40px;
     }
     
   }
   
   
   @media (min-width: 768px) {
     .vc_col-sm-5 {
         width: 41.66666667%;
     }
     .vc_col-sm-1, .vc_col-sm-10, .vc_col-sm-11, .vc_col-sm-12, .vc_col-sm-2, .vc_col-sm-3, .vc_col-sm-4, .vc_col-sm-5, .vc_col-sm-6, .vc_col-sm-7, .vc_col-sm-8, .vc_col-sm-9 {
       float: left;
     }
     .vc_col-sm-7 {
       width: 58.33333333%;
     }
   
   }
   @media (min-width: 1200px){
   .container {
       width: 1170px;
   }
   }
   @media (min-width: 992px){
   .container {
       width: 970px;
   }
   }
   @media (min-width: 768px) {
   .container {
       width: 750px;
   }
   }
   
   @media only screen and (max-width: 991px) { 
     .stock-footer {display: none;}
   }
   
   /* iPhone [portrait + landscape] */
   @media only screen and (max-device-width: 768px) {
     body {background-color: #333333;}
     #leyenda {width: 100%; float: none; margin-bottom: 50px;}
     #formulario {width: 100%; float: none;}
   
   
     #leyenda br {display: none}
     section#logo {
       padding-top: 40px;
     }
     section#logo #Corredor {
       padding-top: 40px;
     }
     section#contenidos {
       margin-top: 40px;
     }
     form.form input#usuario, form.form input#password,
     form.form select#empresa, form.form select#perfil {
       font-size: 14px;
       padding: 10px;
     }
     input#btn-login {
       width: 100%;
     }
   
   }
   
   
   /* iPhone [portrait + landscape] */
   @media only screen and (max-device-width: 740px) {
     body {
       background: #DBEFFA url(../img/bgbolsa.jpg) no-repeat; 
     }
     #leyenda {
       width: 100%; 
       float: none;
       padding: 0;
       margin-bottom: 20px;
     }
     #formulario {width: 100%; float: none;}
     #leyenda h2 {
       margin: 0px 0 10px;
       font-size: 30px;
       line-height: 123px;
       color: #FFFFFF;
       padding-right: 80px;
       padding-left: 0px;
     }
     #leyenda h3 {
       font-size: 14px;
       line-height: 14px;
       font-weight: 400;
       margin-top: 20;
       margin-bottom: 18px;
       color: #ffffff;
     }
     #form-content {
       padding: 20px;
     }
     #form-content h4 {
       font-size: 14px;
     }

     video {display: none;}
     #leyenda br {display: none}
     section#logo {
       padding-top: 80px;
       background: url(../img/LogoOptimusBlanco.png) no-repeat left bottom;
       background-size: 250px;
       height: 23px;
       width: 250px;
     }
     section#contenidos #Corredor {
      padding-top: 30px;
       background: url(../img/logo_mbi.png) no-repeat left bottom;
       background-size: 100px;
       height: 23px;
       width: 90px;
     }
     #logoSap img {width: 70%;}
     #leyenda #logoBolsa #logoWhite {
     display:none;
     }
     #leyenda #logoBolsa #logoBlack {
       display: block;
       width: 70%;
       float: right;
     }
     section#logo img {
       height: 55px;
     }
     section#contenidos {
       margin-top: 30px;
     }
     form.form input#usuario, form.form input#password,
     form.form select#empresa, form.form select#perfil {
       font-size: 14px;
       padding: 10px;
     }
     input#btn-login {
       width: 100%;
       padding: 10px 25px;
     }
   
   }
   
   
   /* ==|== media queries ======================================================
      EXAMPLE Media Query for Responsive Design.
      This example overrides the primary ('mobile first') styles
      Modify as content requires.
      ========================================================================== */
   
   @media only screen and (min-width: 35em) {
     /* Style adjustments for viewports that meet the condition */
   }
   
   
   
   /* ==|== non-semantic helper classes ========================================
      Please define your styles before this section.
      ========================================================================== */
   
   /* For image replacement */
   .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
   .ir br { display: none; }
   
   /* Hide from both screenreaders and browsers: h5bp.com/u */
   .hidden { display: none !important; visibility: hidden; }
   
   /* Hide only visually, but have it available for screenreaders: h5bp.com/v */
   .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
   
   /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
   .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
   
   /* Hide visually and from screenreaders, but maintain layout */
   .invisible { visibility: hidden; }
   
   /* Contain floats: h5bp.com/q */
   .clearfix:before, .clearfix:after { content: ""; display: table; }
   .clearfix:after { clear: both; }
   .clearfix { *zoom: 1; }
   
   
   
   /* ==|== print styles =======================================================
      Print styles.
      Inlined to avoid required HTTP connection: h5bp.com/r
      ========================================================================== */
   
   @media print {
     * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
     a, a:visited { text-decoration: underline; }
     a[href]:after { content: " (" attr(href) ")"; }
     abbr[title]:after { content: " (" attr(title) ")"; }
     .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
     pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
     thead { display: table-header-group; } /* h5bp.com/t */
     tr, img { page-break-inside: avoid; }
     img { max-width: 100% !important; }
     @page { margin: 0.5cm; }
     p, h2, h3 { orphans: 3; widows: 3; }
     h2, h3 { page-break-after: avoid; }
   }


 /*
consulta de medios para movil */
 @media screen and (min-width: 0px) and (max-width: 768px) {
section#contenidos {
    margin-top: 0;
}
#leyenda {
    width: 60%;
    margin: auto;
    float: none;
}
.img-responsive {
    width: 80%;
    height: 10%;
    border-right: none;
    padding-right: 0;
    padding-top: 20%;
}
#form-content {
    padding: 0;
}
#formulario {
    width: 100%;
}
 }
   /*
consulta de medios para tablet */
 @media screen and (min-width: 768px) and (max-width: 1024px) {
#form-content {
    padding: 0;
}
.img-responsive {
    padding-right: 20%;
}
 }