html,body {height: 100%;margin: 0}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&display=swap');
     
     
    .demo-icon
    {
      font-family: "subtitularfont";
      font-style: normal;
      font-weight: normal;
      speak: never;
     
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      text-align: center;
      /* opacity: .8; */
     
      /* For safety - reset parent styles, that can break glyph codes*/
      font-variant: normal;
      text-transform: none;
     
      /* fix buttons height, for twitter bootstrap */
      line-height: 1em;
     
      /* Animation center compensation - margins should be symmetric */
      /* remove if not needed */
      margin-left: .2em;
     
      /* You can be more comfortable with increased icons size */
      /* font-size: 120%; */
     
      /* Font smoothing. That was taken from TWBS */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
     
      /* Uncomment for 3D effect */
      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    }
     

/* Styles */

BODY {background:#ffffff;font-family:'Montserrat', sans-serif;}

/* Outlines */
.main, .wrapper-browser, .wrapper-camera, .wrapper-speech, .col-main, .col-aside {}

/* Paddings */
.main, .col-main, .col-aside,.results, .info, .controls {box-sizing: border-box}

	/* Interfaz 
	body {font-size: 18px}
	h1 {font-size: 48px}
	h2 {font-size: 40px}
	h3 {font-size: 32px}
	h4 {font-size: 28px}
	h5 {font-size: 20px}
	h6 {font-size: 18px}*/

	/* Landing */
	body {font-size: 18px; line-height: 28px; overflow-wrap: break-word;
  word-wrap: break-word;}
	.p-sm {font-size: 16px !important; line-height: 24px !important}
	.p-lg {font-size: 24px}
	.p-md {font-size: 20px}
	.caption {font-size: 16px; line-height: 24px}

	h1, h2, h3, h4, h5, h6 {font-weight: 400}
	h1 {font-size: 64px}
	h2 {font-size: 48px}
	h3 {font-size: 20px; line-height: 24px; font-weight: bold}
	h4 {font-size: 28px}
	h5 {font-size: 20px}
	h6 {font-size: 18px}

	.display {font-size: 80px; line-height: 80px; font-weight: bold; color: #404BCB;}
	.landing-custon-title-01 {font-size: 20px; color: #666666; text-transform: uppercase;}
	.landing-custon-title-02 {font-size: 40px;}
	.form-label {font-size:20px}


	.search-container-title {font-size: 48px; line-height: 1.2em}

	@media (max-width: 991px){

		body {font-size: 16px; line-height: 24px}
		.p-lg, .p-md {font-size: 16px; line-height: 24px}
		.caption {font-size: 14px; line-height: 20px}

		h1 {font-size: 32px}
		h2 {font-size: 24px}

		.instructions h2 {font-size: 32px; line-height: 40px; text-align: center}

		.display {font-size: 60px; line-height: 60px}
		.landing-custon-title-01 {font-size: 16px; line-height: 24px}
		.landing-custon-title-02 {font-size: 32px;}

		.text-center-in-mobile {text-align: center}

		footer p {font-size:12px; line-height: 16px}
	}

	.input-url {max-width: 740px; height: 60px; margin-right: 30px; border-color: #C5D0F6}
	.input-url-container-style-2 input{margin-right: 0; border-right:none;border-top-right-radius: 0; border-bottom-right-radius: 0}
	.input-url-container-style-2 .btn-search {border-top-left-radius: 0; border-bottom-left-radius: 0}
	.input-url-container-style-2 .search-btn-icon{padding:0 !important}
	.input-url-container-style-2 .search-btn-icon button {border-top-left-radius: 0; border-bottom-left-radius: 0; height: 100%; width: 100px}
	/* Buttons */

	.btn {font-family:'Montserrat', sans-serif; border-radius:40px; padding: 12px 40px; justify-content: center}
	.btn-primary {background:#404BCB;border:solid 1px #404BCB;}
	.btn-primary:hover, .btn-primary:active, .btn-primary:focus {background-color: #28265E !important; border: solid 1px #28265E; outline: none !important}

	.btn-shadow {box-shadow: 0px 4px 40px 0px rgba(0,0,0,0.15)}
	.btn-icon-label i{font-size:20px;margin-right: 16px !important}

	.btn-outline {background:none;border:solid 1px #404BCB; color: #404BCB}
	.btn-outline:hover, .btn-outline:active, .btn-outline:focus {background-color: #FAFAFC; color: #28265E; border-color:#28265E}
	.btn-primary:disabled {border-color: #C5D0F6 !important; background-color: #C5D0F6 !important; color: #ffffff}
	.btn-outline:disabled {background:none;border:solid 1px #C5D0F6; color: #C5D0F6}

	.btn.btn-lg{font-size:20px;line-height: 24px; padding: 17px 40px}
	.btn.btn-sm{font-size:16px; line-height: 20px; padding: 6px 16px}
	.btn-icon{width:54px; height: 54px; padding: 0}
	.btn-icon2{width:54px; height: 54px; padding: 0; font-size: 20px}
	.btn-icon2:hover, .btn-icon2:active, .btn-icon2:focus {background-color: #FAFAFC; color: #28265E; border-color:#28265E}
	.btn-icon2 img, .btn-icon2 i{align-self: center;margin: 0 auto;}
	.btn-camera {background-color: none; color: #fff;}
	.btn-camera:hover {background-color: rgba(0,0,0,0.2); color: #ffffff}
	.btn-camera.active {color: #2ECDC2; background-color: #ffffff}
	.btn-camera.active:hover {opacity:.8;}
	/*.btn i {margin: 0 auto; align-self: center;}*/
	.btn {display: flex; flex-direction: row;}
	.fit-button {width: fit-content}

	.btn-social i{margin-top: 10px}
	.btn-search {width: 300px}
	.btn-navbar {padding: 10px 30px 8px 30px !important; font-weight: 500}


	@media (max-width: 767px){
		.btn.btn-lg {font-size: 16px; padding: 15px 40px}
		.landing .btn.btn-primary, .landing .btn.btn-outline {width: 100%}
	}

	/* Colores */

	BODY {color: #28265E}

	h1, h2, h3, h4, h5, h6, .search-container-title {color: #404BCB}

	.nav-link {color:#ffffff !important; text-transform: uppercase; font-weight: 500; font-size: 16px}
	.nav>li>a:focus, .nav>li>a:hover {background: none}
	@media (min-width: 992px) {
		.nav-item {margin-right: 10px}
	}
	@media (min-width: 992px) and (max-width: 1199px) {
		.nav-link {font-size: 14px}
	}

	.dark-background p, .dark-background h1, .dark-background h2, .dark-background h3{color: #ffffff}
	
	BODY a {color:#28265E}

	.how-use a, .instructions a, .modal-body a, .open-URL-link a {text-decoration: underline;}
	.how-use a:hover {color: inherit;}
	.dark-background a {color: #ffffff}

	.bg-blue {color:#ffffff}
	.dark-background .btn-primary, .btn-arrow-hero {background-color: #fff; border-color: #fff; color: #404BCB} 
	.dark-background .btn-primary:hover, .btn-arrow-hero:hover, .btn-arrow-hero:active, .btn-arrow-hero:focus {color: #ffffff; background-color: #28265E; border-color: #28265E}
	.dark-background .btn-primary:disabled {border-color: #C5D0F6; background-color: #C5D0F6; color: #ffffff}
	.btn-arrow-hero i {color: #404BCB; font-size: 24px}
	.btn-arrow-hero:hover i, .btn-arrow-hero:focus i, .btn-arrow-hero:active i {color: #ffffff}
	.dark-background .btn-outline {border-color: #fff; color: #ffffff}
	.dark-background .btn-outline:hover, .dark-background .btn-outline:active, 	.dark-background .btn-outline:focus {background-color: rgba(236,2235,252,.2) !important}
	.dark-background .btn-icon {color: #ffffff}
	.dark-background .btn-icon:hover {background-color: rgba(236,2235,252,.2); color: #ffffff}

	.custom-bg-hero {position: relative;
    background: url('../../images/bg-hero.svg') no-repeat center -120px, -webkit-linear-gradient(98deg, rgb(255, 255, 255) 304px,#5761D7 305px, #2E38AD 100%);); /* W3C */
	background-size: cover
}

	.custom-bg-diagonal {position: relative;
    padding-top: 180px;
    padding-bottom: 80px;
	/* background:-webkit-linear-gradient(-85deg, rgb(255, 255, 255) 179px,#5761D7 180px, #2E38AD 100%);) */ /* W3C */
	background:-webkit-linear-gradient(265deg, #FAFAFA 179px,#5761D7 180px, #2E38AD 100%);
}
	.text-primary {color: #404BCB !important}
	.text-secondary {color: #2ECDC2 !important}
	.text-error {color: #FF8793 !important}


.quotes {position: relative;
    padding-top: 180px;
	/* padding-bottom: 80px; */
	background: -webkit-linear-gradient(-85deg, rgba(255, 255, 255, 0) 179px, #fafafa 180px);

}

/*

../../images/bg-lines-01.svg
*/

	.how-use-bg-01 {position: relative;
    padding-bottom: 80px;
    background:-webkit-linear-gradient(-85deg, rgb(255, 255, 255) 180px,#f1f1f1 180px);), /* W3C */
	background-image:url('../../images/bg-lines-01.svg'); background-repeat: no-repeat;
	padding-top: 150px;
	background: url('../../images/bg-lines-01.svg') no-repeat left 150px, -webkit-linear-gradient(-85deg, rgb(255, 255, 255) 180px,#f1f1f1 180px);); /* W3C */
}
	.how-use-bg-02 {background-color: #f1f1f1, 	background-image:url('../../images/bg-lines-02.svg'); background-repeat: no-repeat;}
	.how-use-bg-03 {background-color: #f1f1f1}
	.how-use-bg-04 {position: relative;
    padding-top: 150px;
    padding-bottom: 80px;
    background:url('../../images/bg-lines-03.svg') no-repeat bottom center, -webkit-linear-gradient(85deg, rgb(255, 255, 255) 22%,#f1f1f1 22%)
}

	@media (max-width: 767px) {
	.custom-bg-hero {background:-webkit-linear-gradient(98deg, rgb(255, 255, 255) 150px,#5761D7 151px, #2E38AD 100%);) /* W3C */}
	.how-use-bg-01 {background:-webkit-linear-gradient(-85deg, rgb(255, 255, 255) 3%,#f1f1f1 3%);), /* W3C */}
	.how-use-bg-04 {background:-webkit-linear-gradient(85deg, rgb(255, 255, 255) 6%,#f1f1f1 6%);), /* W3C */}
	.custom-bg-diagonal {
		 	padding-top: 100px; 
		 	/* background:-webkit-linear-gradient(-85deg, rgb(255, 255, 255) 88px,#5761D7 89px, #2E38AD 100%);) */
		 	background:-webkit-linear-gradient(265deg, #fafafa 88px,#5761D7 89px, #2E38AD 100%);)
		}
	}

	@media (max-width: 1199px) {
		.how-use-bg-01 {background: -webkit-linear-gradient(-85deg, rgb(255, 255, 255) 100px,#f1f1f1 100px);}
	}
	footer {background-color: #28265E}


	/* Estructura */

	header {padding-top: 85px; padding-bottom: 45px}
	.hero {margin-bottom: 45px}

	.main {display: flex; flex-direction: row; height: 100%; width: 100%}

	.btn-arrow-hero-container {width: 280px; margin-top: 80px}

	.col-main {flex: 1; overflow-y: scroll} /* Columna que contiene la presentación */
	.col-aside {display: flex; flex-direction: column; width: 480px} /* Columna que contiene la cámara y la transcripción */

	footer {padding-top: 80px; padding-bottom: 80px}

	@media (min-width: 768px){
		.como-usar-invert {text-align: right !important}
	}
	@media (min-width: 992px) and (max-width: 1199px){
		header {padding-bottom: 125px}
		.btn-arrow-hero-container {margin-top: 60px}
	}
	@media (max-width: 1023px){
		.col-main {display: none}
		.col-aside {width: 100%}
	}

	@media (max-width: 768px){
		header {padding-top: 30px; padding-bottom: 15px}
		.hero {margin-bottom: 0}
		footer {padding-top: 60px; padding-bottom: 60px}
	}

	.what-is{}
	.what-is .subtitle {max-width: 730px !important}
	.how-use {padding-bottom: 0; background-color: #f1f1f1}
	.how-use-last {padding-bottom: 164px}
	.who-we-are .container{max-width: 920px}
	.instructions {padding-top: 48px}


	/* Display bg */
	.display-bg {background-image:url('../../images/display-bg-right.svg'); background-repeat: no-repeat; background-position: 30px 0; padding-top: 10px; padding-bottom: 10px}

	@media (min-width: 768px){
	.display-bg-left {background-image:url('../../images/display-bg-left.svg'); background-position-x:calc(100% - 35px) !important}
	}

	@media (max-width: 767px){
		.display-bg {padding: 20px 0; background-position: 28px center;}
		.how-use {padding-top: 96px;}
		.how-use-last {padding-bottom: 122px}
	}

	/* secciones */
	.intruction-item {margin-top: 20px; margin-bottom: 40px}

	/* Las secciones se llaman BROWSER, CAMARA y SPEECH */

	.wrapper-browser {height: 100%;}
	.wrapper-camera {display: flex; height: 360px;}
	.wrapper-speech {flex-grow: 1; overflow: hidden; background-color: #ffffff}
	.browser, .camera, .speech {box-sizing: border-box}

	/* BROWSER */	
	.camera-open{height: 360px;}
	.camera-close{background:#D1D7F4}
	.camera-close .icon-cam-on {display: none}
	.camera-close .icon-cam-off {display: block !important}
	.camera-close .closed-cam {display:block !important; align-self: center; text-align: center; margin: 0 auto; padding-bottom: 88px}
	.camera-close .closed-cam i{font-size: 100px; color:#ECEBFC;}
	.camera-close video{display: none !important}
	.camera-close .btn-magic, .camera-close .btn-expand-cam {visibility: hidden}
	.camera-close .camera-nav {border-bottom: solid 1px #ccc; }
	.camera-close .camera-nav .nav-container {}
	.camera-close .btn-camera {background-color: #ffffff; color: #404BCB}

    .camera-container{ width: 100%; height: 360px }

	/******** Módulo permisos ********/
	.permissions {background-color: #000000; position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
display: flex;
justify-content: center}
	.permissions > div {display: flex;align-self: center;font-size: 40px;line-height: 1.4em;text-align: center; padding: 50px}
	.permissions p{color: #ffffff}	

	/******** BROWSER ********/

	.browser {height: 100%; position: relative;}
	.browser .search-container {align-self: center; flex:auto; padding-top: 30px; padding-bottom: 30px; padding-right: 20px}
	.browser .search-container .input-url-container {align-items: left}
	.browser .search-container .hide-button-container {align-items: right; padding-right: 50px; padding-left: 50px}
	.browser .search-btn-icon {padding-top: 3px}

	.uses{padding-top: 56px; max-width: 960px}
	.uses-icon {color: #2ECDC2}
	.uses-icon i {font-size: 100px}
	.rounded-icon-container {width: 120px; height: 120px; background-color: #fafafa; border-radius: 50%; margin: 0 auto; margin-bottom:16px; display: flex; flex-direction: row; text-align: center}
	.rounded-icon-container > i {flex-grow: 1; align-self: center; color: #2ECDC2}
	.browser .uses-title{font-weight: bold; font-size:20px; color: #404BCB}
	.browser .uses-description{font-size: 20px}

	@media (max-width: 1200px){
		.browser .uses-description{font-size: 16px}
	}

	UL.social-list {display: flex;flex-wrap: wrap; padding: 0 0 0 16px}
	UL.social-list > LI {white-space: nowrap;flex-basis: 0}
	UL.social-list > LI a{font-size: 24px; color: #C4C4C4}
	UL.social-list > LI a:hover, UL.social-list > LI a:active, UL.social-list > LI a:focus{color: #28265E}


	/* BROWSER / CAMBIO de VISTAS */

	/* Full view. Carga inicial */
	.full-view .browser {display: flex}
	.full-view .browser iframe{z-index:-10;}
	.full-view .browser .search-btn-icon {display: none; padding-top: 3px}
	.full-view .browser .hide-button-container {display: none}
	.full-view .browser .open-URL-link {display: none}

	/* Search view. Barra de búsqueda superior */
	.search-view .browser .browser-title, .search-view .browser .uses, .search-view .browser .form-label {display: none}
	.search-view .browser .search-container {align-self: start; border-bottom: solid 1px #ccc}
	.search-view .browser .search-container > div {max-width:100%; margin-left: 15px !important}
	.search-view .browser .search-container .btn-search {content:'';}
	.search-view .browser .search-btn-full {display: none}

	/* Hide view. Barra de búsqueda oculta */
	.hide-view .browser .search-container{display: none}
	.hide-view .browser .search-open-area {display: block; width: 100%; height: 30px; position: absolute;}
	.hide-view .settings-container .btn {background-color: #ffffff; border: solid 1px #ffffff; color: #000000}

	.browser-states {height: 80%; display: flex}
	.searching {align-self: center;flex: auto;padding-top: 30px;padding-bottom: 30px;padding-right: 20px;text-align: center}
	.error {align-self: center;flex: auto;padding-top: 30px;padding-bottom: 30px;padding-right: 20px;text-align: center}
	.browser-states .searching img + p, .browser-states .error img + p {margin-top: 48px}

	/******** CAMERA ********/
	.wrapper-camera {position: relative}
	.camera {width: 100%; height: 100%; display: flex; position: relative}
	.camera video {width: 100%;height: 100%}

	.nav-container {position: absolute; bottom: 0; z-index: 99;width: 100%}
	.nav-container > ul { width: 100%; display: flex; justify-content: space-around; padding: 20px 0 20px; background-color: rgba(0,0,0,.3);}
	.nav-container .camera-nav-empty-col {width: 480px; display: none}


	/******** SPEECH ********/

	.speech-container {height: 100%; display: flex; flex-direction: column}
	.speech-container .speech-iniciar-text {padding: 0 20px}
	.speech-iniciar {display: flex; height: 100%; padding: 15px 45px}
	.speech-iniciar > div {align-self: center}
	.speech-iniciar-text {text-align: center; align-self: center}
	.speech-iniciar-text > p{margin-top: 20px; font-size: 20px}


	.info {display: flex; flex-grow: 1}
	.info-cont {background-color: #fffcd4; border-bottom:solid 1px #ebeca1; visibility: visible;margin-bottom: 20px;padding: 20px 12px; height: max-content; width: 100%}
	.info-cont p{margin-bottom: 0}

	#info {display: none}

	.info-on #info {display: flex}
	.info-on .results {display: none}

	.results { flex: 1; overflow-y: scroll; }
	.results {font-family:'Montserrat', sans-serif;font-size:18pt;line-height: 130%;padding: 15px;text-align: left;min-height: 150px;}

	.results .timestamp{font-size:11px;color:#999;display:block;}
	.results.timestamps-off .timestamp{display:none;}

	/*#start_button{border:0;background-color:transparent;padding:0;}*/
	.interim{color:gray;}
	.final{color:black;padding-right:3px;}
	.button{display:none;}
	.marquee{margin:0 auto 20px;}
	#buttons{margin:10px 0;position:relative;top:-50px;}
	#copy{margin-top:20px;}
	#copy > div{display:none;margin:0 70px;}
	#interim_span{margin-bottom:30px;}

	/* Hide scrollbar for Chrome, Safari and Opera */
	.results::-webkit-scrollbar {display: none;}

	.controls {background-color: #eeeeee; border-bottom:solid 1px #ebeca1}


	.activar-div{display:block} /* Clases para switchear el botón activar - desactivar*/
	.desactivar-div{display:none}
	.subtitular-on .activar-div{display:none}
	.subtitular-on .desactivar-div{display:block}

	.controles{border-top:solid 1px #D6D6D6;padding:30px 40px;background-color:#ECEBFC; margin-bottom: 0}
	.select-holder{display:flex;margin:0 -12px 20px}
	.select-holder .select-container {text-align: left}
	.select-holder > div{width:auto;flex:50%;padding:0 12px}
	.select-holder > label{display:block;margin-bottom:10px}
	.select-holder select{border:solid 1px #C4C4C4;border-radius:3px;padding:7px 24px;width:100%; font-size: 16px; color: #666666}
	select.custom-icon{-webkit-appearance:none;-moz-appearance:none;background-image:linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);background-position:calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;background-size:5px 5px, 5px 5px, 1px 1.5em;background-repeat:no-repeat;}
	.showtimestamps-holder{margin-bottom:20px;padding:0}



	/* Botón Configuración */

	.settings-container {position: absolute;top: 33px; right: 530px; z-index: 999}
	.settings-menu {min-width: 360px}
	.settings-menu span.dropdown-item {background:none;}
	.settings-menu i {font-size: 28px; vertical-align: bottom}
	.settings-container .item a {padding: 10px 20px; cursor: pointer; color: #404BCB}
	.settings-container .list-icon {width: 32px; margin-right: 20px; font-size: 24px; color:#666666}
	.dropdown-item:focus, .dropdown-item:active {color: #ffffff !important; background-color: #28265E;
}


	/******** CAMBIOS GENERALES DE VISTA ********/


	/* Vista 01: Muestra BOWSER, CAMARA y SPEECH */

	/* Vista 02: Muestra CAMARA GRANDE Y SPEECH al costado */

	/* Vista 03: Muestra CAMARA FULL SCREEN Y SPEECH sobre la cámara y con transparencia. */

	.vista-1 .btn-compress-cam {display: none}

	.vista-2 .main, .vista-3 .main {display: block}
	.vista-2 .btn-expand-cam, .vista-3 .btn-expand-cam {display: none}
	.vista-2 .col-main, .vista-3 .col-main{display: none}
	.vista-2 .col-aside, .vista-3 .col-aside{display: flex; flex-direction: row; height: 100%; box-sizing: border-box; width: initial;}
	.vista-2 .col-aside .wrapper-camera, .vista-3 .col-aside .wrapper-camera{flex: 1; height: 100%}
	.vista-2 .col-aside .wrapper-speech{width: 480px; flex-grow: initial;}
	.vista-2 video, .camera, .vista-3 video, .camera {	position: absolute !important;
		top: 50%; 
		left: 50%;
		-webkit-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
		min-width: 100%; 
		min-height: 100%; 
		width: auto; 
		height: auto;
		z-index: -1000; 
		overflow: hidden;
	}

	.vista-3 .col-aside .wrapper-speech{width: 480px; flex-grow: initial; position: absolute; top:0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, .7);}
	.vista-3 .nav-container {display: flex; flex-direction: row;flex-grow: 1}
	.vista-3 .nav-container .nav{display: flex; flex-direction: row; flex-grow: 1; width: auto;}
	.vista-3 .camera-nav-empty-col {display: block !important}


	/* Custom margins / paddings */

		.mt-40 {margin-top: 2.5rem!important}
		.mb-40 {margin-bottom: 2.5rem!important}
		.pt-40 {padding-top: 2.5rem!important}
		.pb-40 {padding-bottom: 2.5rem!important}

	@media (min-width: 576px){
		.mt-sm-40 {margin-top: 2.5rem!important}
		.mb-sm-40 {margin-bottom: 2.5rem!important}
		.pt-sm-40 {padding-top: 2.5rem!important}
		.pb-sm-40 {padding-bottom: 2.5rem!important}
	}
	@media (min-width: 768px){
		.mt-md-40 {margin-top: 2.5rem!important}
		.mb-md-40 {margin-bottom: 2.5rem!important}
		.pt-md-40 {padding-top: 2.5rem!important}
		.pb-md-40 {padding-bottom: 2.5rem!important}
	}
	@media (min-width: 992px){
		.mt-lg-40 {margin-top: 2.5rem!important}
		.mb-lg-40 {margin-bottom: 2.5rem!important}
		.pt-lg-40 {padding-top: 2.5rem!important}
		.pb-lg-40 {padding-bottom: 2.5rem!important}
	}
	@media (min-width: 1200px){
		.mt-xl-40 {margin-top: 2.5rem!important}
		.mb-xl-40 {margin-bottom: 2.5rem!important}
		.pt-xl-40 {padding-top: 2.5rem!important}
		.pb-xl-40 {padding-bottom: 2.5rem!important}
	}

		/******** MODALES ********/
	.modal-title {font-weight: bold}
	.modal-content {padding-top: 40px; padding-bottom: 40px}
	.modal-header {border-bottom: none; flex-direction: column; max-width: 790px;}
	.modal-header p {font-size:20px; line-height: 24px}
	.modal-header h4 {margin: 0 auto}
	.modal-header button {position: absolute; top:20px; right:20px;margin: 0 auto}

	.modal-settings .modal-body {max-width: 400px}
	.modal-settings .modal-settings-camera {z-index: 999; height: auto}
	.modal-settings .modal-settings-camera video {width: 100%; height: auto}
	.modal-body {text-align: center; max-width: 600px;margin: 0 auto}
	.modal-body .item-title {text-align: left}
	.modal-body .item-title .number {display: inline; font-size: 32px; color: #404BCB; font-weight: bold; position: absolute;}
	.modal-body .item-title .number + p {padding-left: 64px; display: inline-block; padding-top: 4px;}
	.modal-body .select-container {font-size: 16px}
	.modal-body .select-container label {font-weight: 500; color: #28265E;}
	.modal-footer {border-top: none;margin: 0 auto}
	.modal-footer > button {margin: 0 auto}


	.modal-carrusel .modal-header {max-width: 600px; margin: 0 auto}


	.custom-radio-button div {display: inline-block;}
	.custom-radio-button input[type="radio"] {display: none;}
	.custom-radio-button input[type="radio"] + label span {display: inline-block;width: 134px;height: 90px; margin: -1px 4px 0 0; vertical-align: middle; cursor: pointer; border: 2px solid #cccccc; background-color:#cccccc; text-align: center;}
	.custom-radio-button input[type="radio"] + label span img { opacity: 0; transition: all 0.3s ease;}
	.custom-radio-button input[type="radio"]:checked + label span { opacity: 1; display: inline-block; border: solid 5px #DA00FF;}

	.modal-carrusel .carousel-control-prev {left: -100px}
	.modal-carrusel .carousel-control-next {right: -100px}
	.custom-carousel-control-prev-icon, .custom-carousel-control-next-icon {position: absolute; top: 260px}
	.custom-carousel-control-prev-icon i, .custom-carousel-control-next-icon i {color: #404BCB}

	@media (max-width: 767px) {
		.modal-title h4 {font-size: 24px}
		.modal-header p, .modal-body {font-size: 16px; line-height: 24px}
	}

	/* Custom font */
	@font-face {
  font-family: 'subtitularfont';
  src: url('../../fwebfonts/subtitularfont.eot?1262353');
  src: url('../../webfonts/subtitularfont.eot?1262353#iefix') format('embedded-opentype'),
       url('../../webfonts/subtitularfont.woff2?1262353') format('woff2'),
       url('../../webfonts/subtitularfont.woff?1262353') format('woff'),
       url('../../webfonts/subtitularfont.ttf?1262353') format('truetype'),
       url('../../webfonts/subtitularfont.svg?1262353#subtitularfont') format('svg');
  font-weight: normal;
  font-style: normal;
}



/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'subtitularfont';
    src: url('../font/subtitularfont.svg?21842928#subtitularfont') format('svg');
  }
}
*/

 .demo-icon
    {
      font-family: "subtitularfont";
      font-style: normal;
      font-weight: normal;
      speak: never;
     
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      text-align: center;
      /* opacity: .8; */
     
      /* For safety - reset parent styles, that can break glyph codes*/
      font-variant: normal;
      text-transform: none;
     
      /* fix buttons height, for twitter bootstrap */
      line-height: 1em;
     
      /* Animation center compensation - margins should be symmetric */
      /* remove if not needed */
      margin-left: .2em;
     
      /* You can be more comfortable with increased icons size */
      /* font-size: 120%; */
     
      /* Font smoothing. That was taken from TWBS */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
     
      /* Uncomment for 3D effect */
      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    }



 
 .icon-cam-on, .icon-cam-off {width: 28px}
.icon-user:before { content: '\62'; } /* 'b' */
.icon-cam-off:before { content: '\63'; } /* 'c' */
.icon-desktop:before { content: '\64'; } /* 'd' */
.icon-cam:before { content: '\65'; } /* 'e' */
.icon-cam-on:before { content: '\66'; } /* 'f' */
.icon-dialog-off:before { content: '\69'; } /* 'i' */
.icon-dialog-on:before { content: '\6b'; } /* 'k' */
.icon-chrome:before { content: '\6f'; } /* 'o' */
.icon-mic:before { content: '\73'; } /* 's' */
.icon-dialog:before { content: '\74'; } /* 't' */
.icon-youtube:before { content: '\79'; } /* 'y' */
.icon-settings:before { content: '\7a'; } /* 'z' */
.icon-slidesahre:before { content: '\e80e'; } /* '' */