@font-face {
    font-family: 'latolight';
    src: url('../fonts/lato-light-webfont.eot');
    src: url('../fonts/lato-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-light-webfont.woff2') format('woff2'),
         url('../fonts/lato-light-webfont.woff') format('woff'),
         url('../fonts/lato-light-webfont.ttf') format('truetype'),
         url('../fonts/lato-light-webfont.svg#latolight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'latothin';
    src: url('../fonts/lato-thin-webfont.eot');
    src: url('../fonts/lato-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-thin-webfont.woff2') format('woff2'),
         url('../fonts/lato-thin-webfont.woff') format('woff'),
         url('../fonts/lato-thin-webfont.ttf') format('truetype'),
         url('../fonts/lato-thin-webfont.svg#latothin') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'latoregular';
    src: url('../fonts/lato-regular.eot');
    src: url('../fonts/lato-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-regular.woff2') format('woff2'),
         url('../fonts/lato-regular.woff') format('woff'),
         url('../fonts/lato-regular.ttf') format('truetype'),
         url('../fonts/lato-regular.svg#latoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body {
	width: 100%;
	height: 100%;
	background: url(../img/sala_tradicional.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}



h1,h2,h3,h4,h5 {
	color: #FBB726;
	font-weight: 200;
}

label {
	color: black;
}

a, a:hover {
	color: #FBB726;
	text-decoration: none;
}

.bg-tradicional {
	height: 175px;
    background: rgb(8,40,91);
	text-align: center;
	position:relative;
	display: block !important;
}

.bg-vip {
	height: 175px;
    background: #fbb914;
	text-align: center;
	position:relative;
	display: block !important;
}

.bg-start {
    height: 175px;
    text-align: center;
    position: relative;
	display: none;
}

.notificacion {
	color: #fff !important;
	font-size: 20px;
	text-align: center;
}

.img-sc{
	width: 250px;
    border-radius: 20px;
	margin-bottom: 15px;
}

.div-error{
	border-bottom: 1px solid #fbb914;
    color: #1e4264;
    font-size: 22pt;
    font-family: 'latolight';
    text-align: center;
    padding: 0 0 5px;
    margin: 18px auto 30px;
}

#logo{
	width: 200px;
	-webkit-animation: 2s anime;
    -moz-animation: 2s anime;
    animation: anime 2s;
}

.title-header{
    font-size: 22pt;
    color: #fff;
    font-family: 'latoregular';
}

#indica{
	font-size: 19px;
}

.img-scale{
	margin-top: 20px;
}

@keyframes anime {
    0% {
        transform:scale(0); 
        opacity: 0;
    }
    100% {
        transform:scale(1);
        opacity: 1;
    }   
}
@-webkit-keyframes anime {
    0% {
        -webkit-transform:scale(0); 
        opacity: 0;
    }
    100% {
        -webkit-transform:scale(1);
        opacity: 1;
    }   
}
@-moz-keyframes anime {
    0% {
        -moz-transform:scale(0);
        opacity: 0; 
    }
    100% {
        -moz-transform:scale(1);
        opacity: 1;
    }   
}

#head-nav {
	top: 80px;
    position: absolute;
}


.logo-header {
	position: absolute;
	left: 48%;
	bottom: -30px;
	height: 60px;
	width: 60px;
}

.top {
    height: 40px;
}

.panel-encuesta {
	width: 90%;
	margin-top:100px;
	margin-left: auto;
	margin-right: auto;
}

.jumbotron {
	-webkit-box-shadow: 1px 1px 27px 0px rgba(50, 50, 50, 0.33);
	-moz-box-shadow:    1px 1px 27px 0px rgba(50, 50, 50, 0.33);
	box-shadow:         1px 1px 27px 0px rgba(50, 50, 50, 0.33);
}

.jumbotron hr {
	border :#004C9A
}

.question, .result {
	margin-top: 20px;
	width: 100%;
	text-align: center
}

.question .col-xs-1 {
	text-align: center;
}

.question .col-xs-1 span {
	cursor:pointer;
}

.center-star-text{
	display: block;
	font-size: 15px !important;
}

.color-white{
	color : #1e4264;
	font-family: 'latolight';
}

.icon-size img {
	width: 30px;
	height: 30px;
}

.font-size {
	font-size: 18px;
}

.tab-pane > div > h2{
	border-bottom: 1px solid #fbb914;
    color: #1e4264;
    font-size: 22pt;
    font-family: 'latolight';
    text-align: center;
    padding: 0 0 5px;
    margin: 18px auto 0;
}

.col-xs-1 {
	width: 68px;
	cursor: pointer;
	/*left: calc((100% - 680px)/2);*/
    left: calc((100% - 748px)/2);
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #555;
    cursor: default;
    background-color: transparent;
    border: 0px solid #ddd; 
    border-bottom-color: transparent;
}

.btn-default {
    width: 100px;
}

select.form-control {
	width: 350px;
}

.glyphicon-star, .glyphicon-star-empty  {
	font-size: 40px;	
}

.center-star-text {
	padding-left :7px;
}

.main-container .col-xs-12, .main-container .col-sm-12, .main-container .col-md-12{
	padding-bottom: 20px;
}

.white {
	color: white;
}

.img-responsive.img-center {
  margin-bottom: 10px;
  margin: 0 auto;
}

.Ajust{
	height: auto;
}

#surveyId-1>div>div>div>.special{
	color: #005B9D;
}

#surveyId-2>div>div>div>.special{
	color: #FFF;
}

.special{
	font-family: 'latoregular' !important;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 40pt !important;
}

.msg-survey{
	text-align: center;
    padding: 0px 10px;
	color: #fff;
	font-size: 20px;
}

#surveyId-2>div>div>.msg-survey{
	color: #fbb914;
}

@media (max-width: 1024px) and (min-width: 769px){
	.col-xs-1 {
		width: calc(100%/10);
		cursor: pointer;
		left: 0;
	}
	
	.logo-header {
		left: calc(95%/2);
	}
}

@media (max-width: 768px) and (min-width: 481px){
	.title-header{
		font-size: 21pt;
	}
	
	.bg-tradicional, .bg-vip, .bg-start{
		height: 215px;
	}
	
	#head-nav{
		top: 110px;
	}
	
	.logo-header{
		left: calc((90%-360px)/2);
	}
	
	.col-xs-1 {
		width: calc(100%/5);
		cursor: pointer;
		left: 0;
	}
	
	#logo{
		width: 220px;
	}
}

@media (max-width: 480px) and (min-width: 398px){
	 select.form-control {
		width: 100%;
	}
	
	.title-header{
		font-size: 17pt;
	}
	.col-xs-1 {
		cursor: pointer;
		left: 0px;
		width: calc(100%/5);
	}

	.glyphicon-star, .glyphicon-star-empty {
		font-size: 20px;	
	}

	.center-star-text {
    	padding-left: 3px;
	}

	h1,h2,h3,h4,h5 {
		color: #FBB726;
		font-weight: 50;
	}

	.logo-header {
    	left: 42%;
	}

	.white {
    	height: 38px;
	}

	#head-nav {
		top: 120px;
    	position: absolute;
	}

	.bg-azul {
    	height: 110px;
	}
	
	#logo{
		width: 270px;
	}
	
	.bg-tradicional, .bg-vip, .bg-start{
		height: 235px;
	}
	
	.img-scale{
		margin-top: 15px;
	}
	
	.buttonControl{
		margin-left: 0px;
	}
	
	#btnContinue{
		margin-left: 0px;
	}
}

@media (max-width: 397px) and (min-width: 300px){
	.bg-tradicional, .bg-vip, .bg-start{
		height: 235px;
	}
	
	.logo-header{
		left: calc((85%-360px)/2);
	}
	
	.title-header{
		font-size: 17pt;
	}
	
	#head-nav{
		top: 120px;
	}
	
	.col-xs-1 {
		width: calc(100%/4);
		cursor: pointer;
		left: 0;
	}
	
	.start9, .start10{
		left: calc(100%/4);
	}
	
	.container {
		padding-right: 0px;
		padding-left: 0px;
	}
	
	.img-sc{
		width: 240px;
	}
}



.result.has-feedback {

    margin-top:10px;
}