@import url("../../../assets/css/fontawesome-all.min.css");
@font-face {
  font-family: "FS Joey";
  src: url("../fonts/fsjoey/FSJoeyWeb-Bold.woff2");
  font-weight: bold;
}
@font-face {
  font-family: "FS Joey";
  src: url("../fonts/fsjoey/FSJoeyWeb-BoldItalic.woff2");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "FS Joey";
  src: url("../fonts/fsjoey/FSJoeyWeb-Medium.woff2");
  font-weight: medium;
}
@font-face {
  font-family: "FS Joey";
  src: url("../fonts/fsjoey/FSJoeyWeb-MediumItalic.woff2");
  font-weight: medium;
  font-style: italic;
}

@font-face{
  font-family: "Barlow";
  src: url("../fonts/barlow/Barlow-Bold.ttf");
  font-weight: bold;
}
@font-face{
  font-family: "Barlow";
  src: url("../fonts/barlow/Barlow-BoldItalic.ttf");
  font-weight: bold;
  font-style: italic;
}

@font-face{
  font-family: "Barlow";
  src: url("../fonts/barlow/Barlow-Medium.ttf");
  font-weight: normal;
}
@font-face{
  font-family: "Barlow";
  src: url("../fonts/barlow/Barlow-MediumItalic.ttf");
  font-weight: normal;
  font-style: italic;
}

@font-face{
  font-family: "Barlow-Regular";
  src: url("../fonts/barlow/Barlow-Regular.ttf");
}

body{
  width: 100%;
}


h1{
  font-family: "FS Joey";
  font-weight: bold;
  font-size: 48px;
  color: #00aec7 !important;
  margin: 30px 0 30px 0;
}

h2{
  font-family: "FS Joey";
  font-weight: bold;
  font-size: 42px;
  color: #0033A0 !important;
  margin: 20px 0 20px 0;
}

h3{
  font-family: "Barlow";
  font-weight: bold;
  font-size: 22px;
  color: #00aec7 !important;
}

h4{
  font-family: "Barlow";
  font-weight: bold;
  font-size: 18px;
  color: #0033A0 !important;
}

.parrafo ul,li{
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}


#nav{
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding-left: -10px;
    background-color: #0033A0;
    width: 100%;
}

#logo-SURA{
  width: 180px;
  height: auto;
}

.container header{
}

.parrafo{
  font-family: "Barlow-Regular";
  font-size: 18px;
  color: #53565a;
}

#map{
  height: 350px !important;
}

#form{
  font-family: "Barlow-Regular";
  font-size: 18px;
  padding-top: 20px;
  margin-top: 10px;
  background-color: #fff;
  border: 0px !important;
  /* padding-left: 50px;
  padding-right: 50px; */
  /* padding-bottom: 20px; */
  /* margin-bottom:50px; */
}

.form-control{
  padding: 0px !important;
}

.pregunta{
  background-color: #fff;
  border: 1px solid #0033A0;
  border-radius: 15px;
  color: #0033A0;
  font-family: "Barlow";
  font-weight: bold;
  margin-left: 7px;
  outline: none !important;
}

.pregunta:hover{
  cursor: pointer;
}

.pregunta:hover{
  cursor: pointer;
  outline: none !important;
  background-color: #0033A0;
  color: #fff;
}



/* .botones-envio{
  background-color: #00aec7;
  border-color: #00aec7;
  color: #fff;
  border-radius: 25px;
  font-family: "Barlow";
  font-weight: bold;
  font-size: 18px;
  padding: 10px 20px 10px 20px;
  width: auto !important;
} */

.botones-envio{
  color: #0033A0;
  background: #E1E829;
  padding: 5px 21px;
  border-radius: 100px;
  font-family: "Barlow";
  font-weight: bold;
  font-size: 18px;
  border: none;
  width: auto !important;
  height: auto !important;
}

.botones-envio:focus{
  /* color: #fff;
  background-color: #00aec7;
  border-color: #00aec7; */
  box-shadow: 0 0 0 0.2rem #E1E829;
  outline: none;
}

.botones-envio:hover{
  cursor: pointer;
  outline: none;
}

.form-row .botones-envio{
  text-align: center;
}

.form-control .form-row{
    text-align: left;
    width: 100%;
    margin: 20px auto 0;
}

.form-control-cotizacion .form-row{
    text-align: left;
    width: 100%;
    margin: 30px auto 0;
}

.form-control .form-row2{
    text-align: left;
    width: 100%;
    margin: 20px auto 0;
}

.form-control .form-row > label span{
    display: block;
    box-sizing: border-box;
    color:  #5f5f5f;
    width: 100%;
    padding: 0 0 5px;
    font-weight: bold;
}

.form-control-cotizacion .form-row > label span{
    display: block;
    box-sizing: border-box;
    color:  #5f5f5f;
    width: 100%;
    padding: 0 0 5px;
    font-weight: bold;
}

.form-control .form-row2 > span{
    display: block;
    box-sizing: border-box;
    color:  #5f5f5f;
    width: 100%;
    padding: 0 0 5px;
    color: #0033A0 !important;
}

.form-control-cotizacion .form-row{
    text-align: left;
    width: 100%;
    margin: 25px auto 0;
}

.form-control-cotizacion input,label{
  width: 100% !important;
}

.form-control-cotizacion textarea{
    color:  #5f5f5f;
    box-sizing: border-box;
    width: 100%;
    height: 100px;
    resize: none;
    border-radius: 0px 0px 12px 0px;
    border-top: none;
    border-left: none;
    border-bottom: 1px solid #0033A0;
    border-right: 1px solid #0033A0;
    font: 18px 'Barlow-Regular';
    overflow: hidden !important;
    color: #0033A0;
}

.form-control-cotizacion textarea:focus{
  outline: none !important;
}

input{
    background: none;
    border-radius: 0px 0px 12px 0px;
    border-top: none;
    border-left: none;
    border-bottom: 1px solid #0033A0;
    border-right: 1px solid #0033A0;
    /* width: 500px; */
    width: 100%;
    color: #0033A0 !important;
    outline: none !important;
    font-size: 18px;
    height: 30px;
    font-family: 'Barlow-Regular';
}
select{
    background: none;
    border-radius: 0px 0px 12px 0px;
    border-top: none;
    border-left: none;
    border-bottom: 1px solid #0033A0;
    border-right: 1px solid #0033A0;
    /* width: 500px; */
    width: 100%;
    color: #0033A0;
    outline: none !important;
    font-size: 18px;
    height: 30px;
  }

  #select-modal{
    width: auto !important;
  }


  option{
    color: #0033A0;
  }

  input checkbox{
    width: 500px;
    font-size: 18px !important;
  }

  .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #0033A0 !important;
  }

  .custom-control-label{
    font-size: 18px !important;
    display: block;
    margin-bottom: 10px;
  }
  .custom-control-input{
    height: 1px;
    vertical-align: top;
  }

  div.custom-control.custom-checkbox{
    height: 30px !important;
  }

  label{
    margin-bottom: 0px !important;
  }
/* input,select{
  border-radius: 25px;
  border: 1.5px solid #00aec7;
  outline: none !important;
  width: 500px;
  font-family: "Barlow-Regular";
  font-size: 18px;
  color: #53565a;
  padding: 5px 10px 5px 10px;
} */

/* input:focus{
  border-radius: 25px;
  border: 3px solid #00aec7;
  outline: none !important;
} */

.form-row span{
  font-family: "Barlow-Regular";
  font-size: 18px;
  color: #0033A0 !important;
}


/*VENTANAS MODALES*/
.modal-title{
  font-size: 18px;
  color: #0033A0;
  font-family: "Barlow";
  font-weight: bold;
}

/* .modal-body .row{
  border: 1px solid black;
}

.modal-body .col-md-6{
  border: 1px solid black;
} */

.modal-body h6{
  margin-top: 15px;
  margin-bottom: 5px;
  color: #0033A0;
  font-family: "Barlow";
  font-weight: medium;
}

.modal-content{
  border-radius: 15px;
}
.modal-body{
  padding-bottom: 25px;
}
.close{
  outline: none !important;
}
/* #ProvServicios div{
  display: none;
} */

#ProvServicios img{
  display:block;
  margin:20px auto 15px auto;
  width: 90%;
  height: 90%;
}
.row-interna{
  padding-left: 20px;
  padding-right: 20px;
}

/* Pie de página */
#contacto{
  background: #0033A0;
  padding-top: 20px;
  color: white;
  font-family: "Barlow-Regular";
  width: 100%;
}
#logos-alianza{
  margin-bottom: 30px;
}

/* Tablas Resultados */

.Individual{
  margin-top: 50px;
  margin-bottom: 70px;
  text-align: center !important;
  align-items: center !important;
}

.Individual table{
  box-sizing: border-box;
  border-radius: 15px;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-family: "Barlow-Regular";
  font-weight: normal !important;
  font-size: 22px;
  text-align: center;
  width: 100%;
  height: 100%;
  margin-top: 10px;
}

.cuadro-resultado{
  padding: 0 20px 0 20px !important;
}

.Individual thead{
  /* box-sizing: border-box; */
  background: #F5F6F6;
  color: #0033A0;
  border-radius: 25px 0 0 0;
  text-align: center;
}

.Individual tbody{
  box-sizing: border-box;
  background: #F5F6F6;
  color: #606060;
  text-align: center;
}

.Individual th{
  box-sizing: border-box;
  border-radius: 25px 25px 0 0;
  padding: 10px 5px 0px 5px;
  text-align: center;
  font-weight: normal !important;
}

.Individual .linea{
  border-bottom: 1px solid rgba(96,96,96,0.3);
  width: 90%;
  margin: auto;
  padding-bottom: 15px;
}

.Individual td{
  box-sizing: border-box;
  border-radius: 0 0 25px 25px;
  padding: 15px 5px 20px 5px !important;
  font-size: 30px;
  font-weight: lighter !important;
  text-align: center;
  height: auto;
}

.Individual .primer-fila td{
  border-bottom: none;
  border-radius: 0;
}

.Individual .intermedia-fila td{
  border-bottom: none;
  border-top: none;
  border-radius: 0;
}

.Individual .ultima-fila td{
  border-top: none;
}

.fila-resultados{
  padding: 15px;
  width: 90%;
  margin: auto;
}

/* Gráficos reducción de emisiones */
.emisiones{
  margin-top: 50px;
  margin-bottom: 100px;
  font-family: "Barlow-Regular";
  font-weight: normal;
  font-size: 22px;
  text-align: center;
}

.emisiones table{
  margin: auto;
  width: 100%;
}

.emisiones th{
  color: #0033A0;
  font-weight: bold;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.emisiones td{
  padding-left: 10px;
  padding-right: 10px;
}

.emisiones .num-emision{
  color: #00aec7;
  font-family: "Barlow";
  font-size: 32px;
  font-weight: bold;
}

.emisiones .col-md-4{
  padding-left: 20px;
  padding-right: 20px;
}




/* Social */

	ul.social {
		cursor: default;
		margin: 0;
		list-style: none;
		padding-left: 0;
	}

		ul.social li {
			position: relative;
			display: inline-block;
			margin: 0.25em;
			top: 0;
			padding-left: 0;
		}

			ul.social li a {
				-moz-transition: top .2s ease-in-out;
				-webkit-transition: top .2s ease-in-out;
				-ms-transition: top .2s ease-in-out;
				transition: top .2s ease-in-out;
				display: block;
				width: 48px;
				height: 48px;
				border-radius: 6px;
				top: 0;
				position: relative;
			}

				ul.social li a:before {
					background-image: url("images/bg.png"), -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
					background-image: url("images/bg.png"), -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
					background-image: url("images/bg.png"), -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
					background-image: url("images/bg.png"), linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
					-moz-transition: background-color .2s ease-in-out;
					-webkit-transition: background-color .2s ease-in-out;
					-ms-transition: background-color .2s ease-in-out;
					transition: background-color .2s ease-in-out;
					background-color: #444;
					border-radius: 6px;
					box-shadow: inset 0px 0px 0px 1px #282828, inset 0px 2px 1px 0px rgba(255, 255, 255, 0.1);
					color: #2E2E2E !important;
					display: block;
					font-size: 26px;
					height: 48px;
					line-height: 48px;
					text-align: center;
					outline: 0;
					overflow: hidden;
					text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.1);
					width: 48px;
				}

				ul.social li a.fa-twitter {
					background-color: #2DAAE4;
				}

				ul.social li a.fa-facebook-f {
					background-color: #3C5A98;
				}

				ul.social li a.fa-dribbble {
					background-color: #C4376B;
				}

				ul.social li a.fa-linkedin-in {
					background-color: #006599;
				}

				ul.social li a.fa-tumblr {
					background-color: #51718A;
				}

				ul.social li a.fa-google-plus {
					background-color: #DA2713;
				}

				ul.social li a.fa-github {
					background-color: #FAFAFA;
				}

				ul.social li a.fa-rss {
					background-color: #F2600B;
				}

				ul.social li a.fa-instagram {
					background-color: #E0D7C8;
				}

				ul.social li a.fa-foursquare {
					background-color: #39A3D4;
				}

				ul.social li a.fa-skype {
					background-color: #10BEF1;
				}

				ul.social li a.fa-soundcloud {
					background-color: #FE5419;
				}

				ul.social li a.fa-youtube {
					background-color: #BF2E25;
				}

				ul.social li a.fa-blogger {
					background-color: #FF6501;
				}

				ul.social li a.fa-flickr {
					background-color: #0062DB;
				}

				ul.social li a.fa-vimeo {
					background-color: #4C8AB0;
				}

        ul.social li a.fa-whatsapp {
					background-color: #25d366;
				}

				ul.social li a:hover {
					top: -5px;
				}

					ul.social li a:hover:before {
						background-color: transparent;
					}

/* Actions */

	ul.actions {
		list-style: none;
		padding-left: 0;
	}

		ul.actions li {
			display: inline-block;
			margin: 0 0 0 1em;
			padding-left: 0;
		}

			ul.actions li:first-child {
				margin-left: 0;
			}

      /* Icons */

      	.icon {
      		text-decoration: none;
      		text-decoration: none;
      	}

      		.icon:before {
      			-moz-osx-font-smoothing: grayscale;
      			-webkit-font-smoothing: antialiased;
      			display: inline-block;
      			font-style: normal;
      			font-variant: normal;
      			text-rendering: auto;
      			line-height: 1;
      			text-transform: none !important;
      			font-family: 'Font Awesome 5 Free';
      			font-weight: 400;
      		}

      		.icon:before {
      			font-size: 1.25em;
      		}

      		.icon > .label {
      			display: none;
      		}

      		.icon.solid:before {
      			font-weight: 900;
      		}

      		.icon.brands:before {
      			font-family: 'Font Awesome 5 Brands';
      		}

      		.icon.featured {
      			color: #EA8A95;
      			display: block;
      			margin: 0 0 1.5em 0;
      			cursor: default;
      		}

      			.icon.featured:before {
      				font-size: 6em;
      			}

a:hover{
  text-decoration: none !important;
}

.razones{
  padding-left: 10px;
  padding-right: 10px;
  /* border: 1px solid black; */
}

@media (max-width: 991.98px){
  header{
      padding-bottom: 17px;
      padding-top: 17px;
      padding-right: 1rem;
  }
}


@media (max-width: 768px){
  input{
    width: 100%;
  }
  select{
    width: 100%;
  }
  label{
    width: 100%;
  }
  #IMG-SURA{
    display: none !important;
  }
}


@media (max-width: 576px){
  #logos-alianza{
    width: 50%;
  }
  #banner-movil{
    display:inline !important;
  }
  #banner{
    display:none !important;
  }
}