*
{
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.webgl
{
    position: fixed;
    top: 0;
    left: 0;
    outline: none;
}
body
{
    background: #ffffff;
    background-size: cover;
    overflow: hidden;
}
#c{
        width: 100%;
        height: 100%;
        display: block;
        background: #ffffff;
        background-size: cover;    
}
.icon
{
    position: absolute;
    top: 5%;
    left: 50%;
    width: 520px;
    height: auto;
    content: url(assets/images/fddfc77805593d9b68a7f2b5246ab46e.png);
    transform: translate(-50%, 0px);
    opacity: 0;
    transition: opacity 0.5s;
}
.icon.invisible{opacity: 0;}
.icon.visible{opacity: 1;}
.iconShield
{
    position: absolute;
    top: 20px;
    left: 20px;
    width: 110px;
    content: url(assets/images/73b66684097bb059fa6db59c03554e42.png);    
    transition: opacity 0.5s;
    opacity: 0;
    display: none;
}
.iconShield.visible{opacity: 1;display: block;}
.icon-gray
{
    position: absolute;
    bottom: 20px;
    right: 40px;
    width: 150px;
    opacity: 0;
    content: url(assets/images/90624114f823a9bad70c174cb694d0a5.png);       

}
.icon-gray.visible{opacity: 1;transition: opacity 0.5d;}
.help{position: absolute;top: 80%;left: 50%;}
.help-rot
{    
  position: absolute;
  width: 100px;
  height: 100px;    
  content: url(assets/images/ad17b233e32955695161d13da2edc1ca.png);  
  filter: drop-shadow(1px 1px 0 white)
          drop-shadow(-1px 1px 0 white)
          drop-shadow(1px -1px 0 white)
          drop-shadow(-1px -1px 0 white);   
  transform: translate(-50%, 0px);
  animation-name: shakeX;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  display: none;    
}
.help-rot.visible{display: block;}
.help-rot.invisible{display: none;}
.container{position: relative;}  
.center 
{
  margin: 0;
  position: fixed;
  bottom: 10px;
  left: 50%;  
  transform: translate(-50%, -50%);
}
.segment
{        
    width: 200px;
    height: 50px;   
    background: #093B5C;
    color: white;    
    border: none;
    border-radius: 30px;
    font-size: 15px;
    font-weight: bold;
    transition-duration: 0.2s;   
    font-family: Helvetica, Arial, sans-serif;   
    transform: scale(0,0);    
    transition: transform 0.3s;
}
.segment.visible{transform: scale(1,1);}
.segment:hover{transform: scale(1.25);}
.segment:active{transform: translateY(4px);}
.close
{
  margin: 0;
  position: fixed;
  top: 30px;
  right: 20px;
  display: none;
}
.close.visible{display: block;}
.close-btn
{
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0;    
  background: #093B5C;
  color: white;  
  border: none;
  border-radius: 20px;
  font-size: 15px;
  font-weight: bold;
  transition-duration: 0.2s;
  font-family: Helvetica, Arial, sans-serif;
}
.close-btn:hover{transform: scale(1.1);background: #ce122a;}
#closeImg
{
  display:flex;             
  align-self:center; 
  margin-left: 17px;
}
.centerContainer
{
  margin: 0;
  position: fixed;
  bottom: 50%;
  left: 10%;
  width: 80%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s;
}
.centerContainer.invisible{opacity: 0;}
.centerContainer.visible{opacity: 1;}
p.header{
  font-size: 40px;
  letter-spacing: 0.02em;
  font-family: 'Lato', sans-serif;
  margin-top: 10px;
  text-align: center;
  color: #093B5C;  
}
.sectorData
{
  position: absolute;
  right:100px;
  bottom: 50%;
  width: 360px;
  background: rgba(256, 256, 256, 1);
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 15px;
  display: none;
  transform: translate(0px, 50%);
  animation-duration: 1s;
  animation-name: fadeInUp;
}
.sectorData.invisible{display: none;}
.sectorData.visible{display: block;}
.sectorIcon1
{  
  margin-top: 30px;  
  content: url(assets/images/56aea4166d5afcdfee1d8dfb37bf554e.png);
  height: 70px;
  display:block;
  margin-left: 40px;
}
.sectorIcon2
{
  margin-top: 30px;
  content: url(assets/images/bd56d880e3481d675a8294d64d636977.png);
  height: 70px;
  display:block;
  margin-left: 40px;
}
.sectorIcon3
{
  margin-top: 30px;
  content: url(assets/images/ee2e9542e49ad278d4f7b48d992c20ea.png);
  height: 70px;
  display:block;
  margin-left: 40px;
}
.sectorIcon4
{
  margin-top: 30px;
  content: url(assets/images/d82cb514981a8f2313e3a65923fdacfe.png);
  height: 70px;
  display:block;
  margin-left: 40px;
}
.sectorIcon5
{
  margin-top: 30px;
  content: url(assets/images/5bb388db42642380b5b9ad7f8f9c94d7.png);
  height: 70px;
  display:block;
  margin-left: 40px;
}
.sectorIcon6
{
  margin-top: 30px;
  content: url(assets/images/42d51aa024f56ea8dc86299c5af84e07.png);
  height: 70px;
  display:block;
  margin-left: 40px;
}
.sectorIcon7
{
  margin-top: 30px;
  content: url(assets/images/3d716e7aaa45fc704f3d2196ef1074a2.png);
  height: 70px;
  display:block;
  margin-left: 40px;
}
.sectorIcon8
{
  margin-top: 30px;
  content: url(assets/images/2738a862865a3d4f283dbca6dfb638a9.png);
  height: 70px;
  display:block;
  margin-left: 40px;
}
.sectorIcon9
{
  margin-top: 30px;
  content: url(assets/images/dce3fb7487b70541f447a0a510857760.png);
  height: 70px;
  display:block;
  margin-left: 40px;
}

.sectorTitle
{
  display: inline-block;
  position: relative;
  font-size: 38px;
  font-family: 'Lato', sans-serif;    
  font-weight: 900;
  margin-left: 120px;  
  top: -60px;
  color: #093B5C;
  text-align: left;  
  vertical-align: middle;  
}
.sectorName
{
  display: inline-block;
  position: relative;
  font-size: 14px;
  font-family: 'Lato', sans-serif;
  margin-top: -35px;
  margin-left: 40px;
  margin-right: 40px;
  color: #000000;
  text-align:left;
}
.sectorRef
{
  font-size: 14px;
  font-family: 'Lato', sans-serif;
  /*padding: 50px 0 50px 0;*/
  margin-left: 40px;
  margin-right: 40px;
  margin-bottom: 20px;
  font-weight: 900;
  color: #093B5C;
  text-align:left;
  text-decoration: none;
}
.segmentBtn
{
    display: block;
    align-items: right;
    margin-left: 40px;
    /*margin-right: 40px;*/
    padding: 5px 20px 5px 20px;
    width: 280px;
    height: 45px;
    margin-top: 10px;
    background: #093B5C;
    color: white;
    border: none;
    border-radius: 15px;
    font-size: 13px;
    font-weight: bold;
    transition-duration: 0.2s;
    text-align: left;
    font-family: Helvetica, Arial, sans-serif;
}
.segmentBtn:hover{transform: scale(1.1);background: #ce122a;}
.segmentBtnText
{
    align-items: right;    
    /*padding: 0 20px;*/
    color: #ffffff;
    height: 100%;
}
.quick
{  
  position: absolute;
  left: 50%;
  top: 50%; 
  opacity: 0;
  transition: opacity 0.5s; 
}
.quick.invisible{opacity: 0;}
.quick.visible{opacity: 1;}
.transporte
{    
  background: url(assets/images/5bb388db42642380b5b9ad7f8f9c94d7.png);       
  padding: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  width: 70px;
  height: 70px;  
  position: absolute;
  top: 0px;
  transition: all .2s ease-in-out;
}
.transporte:hover{transform: scale(1.1);}
.transporte.selected{transform: scale(1.1);}
.mina
{
  background: url(assets/images/56aea4166d5afcdfee1d8dfb37bf554e.png);       
  padding: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  width: 70px;
  height: 70px;  
  position: absolute;
  top: 0px;
  transition: all .2s ease-in-out;  
}
.mina:hover{transform: scale(1.1);}
.mina.selected{transform: scale(1.1);}
.industria
{
  background: url(assets/images/bd56d880e3481d675a8294d64d636977.png);       
  padding: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  width: 70px;
  height: 70px;  
  position: absolute;
  top: 0px;
  transition: all .2s ease-in-out;
}
.industria:hover{transform: scale(1.1);}
.industria.selected{transform: scale(1.1);}
.telecom
{
  background: url(assets/images/ee2e9542e49ad278d4f7b48d992c20ea.png);       
  padding: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  width: 70px;
  height: 70px;
  position: absolute;
  top: 0px;
  transition: all .2s ease-in-out;
}
.telecom:hover{transform: scale(1.1);}
.telecom.selected{transform: scale(1.1);}
.educacion
{
  background: url(assets/images/d82cb514981a8f2313e3a65923fdacfe.png);       
  padding: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  width: 70px;
  height: 70px;
  position: absolute;
  top: 0px;
  transition: all .2s ease-in-out;
}
.educacion:hover{transform: scale(1.1);}
.educacion.selected{transform: scale(1.1);}
.energia
{
  position: absolute;
  background-color: #ce122a;
  border-radius: 50%;
  border: none;
  width: 15px;
  height: 15px;  
  left:15px;
  top: 15px;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);	
  display:block;
	animation: pulse 2s infinite;
}
.energia:hover{transform: scale(1.1);animation: none;}
.energia.selected{transform: scale(1.1);animation: none;display: none;}
.enterprise
{
  background: url(assets/images/3d716e7aaa45fc704f3d2196ef1074a2.png);       
  padding: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  width: 70px;
  height: 70px;
  position: absolute;
  top: 0px;
  transition: all .2s ease-in-out;
}
.enterprise:hover{transform: scale(1.1);}
.enterprise.selected{transform: scale(1.1);}
.catv
{
  background: url(assets/images/2738a862865a3d4f283dbca6dfb638a9.png);       
  padding: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  width: 70px;
  height: 70px;
  position: absolute;
  top: 0px;
  transition: all .2s ease-in-out;
}
.catv:hover{transform: scale(1.1);}
.catv.selected{transform: scale(1.1);}
.hospitales
{
  background: url(assets/images/dce3fb7487b70541f447a0a510857760.png);       
  padding: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  width: 70px;
  height: 70px;
  position: absolute;
  top: 0px;
  transition: all .2s ease-in-out;
}
.hospitales:hover{transform: scale(1.1);}
.hospitales.selected{transform: scale(1.1);}
p.quick-label{
  font-size: 18px;
  font-family: Helvetica, Arial, sans-serif;
  margin-top: 10px;  
  color: #093B5C;  
}
.btn
{
    display: flex;
    position: absolute;
    bottom: 20px;
    align-items: center;
    padding: 0;
    width: 180px;
    height: 35px;
    margin-top: 10px;    
    background: #093B5C;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 15px;
    font-weight: bold;
    transition-duration: 0.2s;
    font-family: Helvetica, Arial, sans-serif;
    transform: scale(0, 0);
    transition: transform 0.3s;
}
.btn.visible{transform: scale(1, 1);}
.btn__text,
.btn__icon{
  display: inline-flex;
  align-items: center;    
  padding: 0 35px;
  color: #fff;
  height: 100%;
}
.centerbtn
{
  display: flex;
  justify-content: center;
  align-items: center;
}
.fader
{
  position: absolute;
  background: #ffffff;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  opacity: 1;
  transition: opacity 0.5s;
  pointer-events: none;
}
.fader.invisible{opacity: 0}
.loading-bar
{
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background: #ce122a;
    transform: scaleX(0.3);
    transform-origin: top left;
    transition: transform 0.5s;
}
.loading-bar.ended
{
    transform: scaleX(0);
    transform-origin:100% 0;
    transition: transform 1.5s ease-in-out;
}
.quickContainer
{
  position: relative;
  width: 80px;
  height: 80px;
  left: 0px;
  border: none;
}
.sectorContent
{
  position: relative;  
  color: white;
  border: none;
  border-radius: 15px;  
  left: -50px;
  top: 0px;
  width: 190px;
  height: 70px;  
  background: #093B5C;   
  display: none;
}
.sectorContent.visible{display: block;}
.sectorContentB
{
  position: relative;  
  color: white;
  border: none;
  border-radius: 15px;  
  left: -70px;
  top: 0px;
  width: 230px;
  height: 65px;  
  background: #093B5C;   
  display: none;
}
.sectorContentB.visible{display: block;}
.hSector
{
  font-size: 15px;  
  font-weight: 900;
  margin-left: 10px;
  font-family: 'Lato', sans-serif;  
  float: left;
  margin-top:7px; 
}
.pSector
{
  font-size: 12px; 
  font-weight: 400; 
  margin-left: 10px;
  font-family: 'Lato', sans-serif;
  float: left;
}

.sectorBtn
{ 
  color: white;
  border: none;
  border-radius: 20px;  
  padding: 0;
  width: 55px;
  height: 55px;
  background: #093B5C;   
}
.sectorBtn:hover{transform: scale(1.1);background: #ce122a;}
#sectorBtn1
{  
  background: url(assets/images/56aea4166d5afcdfee1d8dfb37bf554e.png);         
  background-repeat: no-repeat;
  background-size: 100% 100%;   
}
#sectorBtn2
{  
  background: url(assets/images/bd56d880e3481d675a8294d64d636977.png);         
  background-repeat: no-repeat;
  background-size: 100% 100%;   
}
#sectorBtn3
{  
  background: url(assets/images/ee2e9542e49ad278d4f7b48d992c20ea.png);         
  background-repeat: no-repeat;
  background-size: 100% 100%;   
}
#sectorBtn4
{  
  background: url(assets/images/d82cb514981a8f2313e3a65923fdacfe.png);         
  background-repeat: no-repeat;
  background-size: 100% 100%;   
}
#sectorBtn5
{  
  background: url(assets/images/5bb388db42642380b5b9ad7f8f9c94d7.png);         
  background-repeat: no-repeat;
  background-size: 100% 100%;   
}
#sectorBtn6
{  
  background: url(assets/images/42d51aa024f56ea8dc86299c5af84e07.png);         
  background-repeat: no-repeat;
  background-size: 100% 100%;   
}
#sectorBtn7
{  
  background: url(assets/images/3d716e7aaa45fc704f3d2196ef1074a2.png);         
  background-repeat: no-repeat;
  background-size: 100% 100%;   
}
#sectorBtn8
{  
  background: url(assets/images/2738a862865a3d4f283dbca6dfb638a9.png);         
  background-repeat: no-repeat;
  background-size: 100% 100%;   
}
#sectorBtn9
{  
  background: url(assets/images/dce3fb7487b70541f447a0a510857760.png);         
  background-repeat: no-repeat;
  background-size: 100% 100%;   
}
.sectorNav{display: block;margin-left: 40px;margin-right: 40px;margin-bottom: 40px;}
.arrowNav{position: relative;top: -25px;}
.left
{
  margin: 0;
  position: absolute;
  bottom: 17px;
  left: 30px;
}
.right
{
  margin: 0;
  position: absolute;
  bottom: 17px;
  right: 30px;
}
.left-arrow
{
    
    height: 45px;
    width: 45px;
    background:url(assets/images/b4477c534ec8be1efb6f235324eb1e20.png);
    border: none;
    padding: 0;
    transition-duration: 0.2s;
}
.left-arrow:hover{transform: scale(1.25);}
.left-arrow:visited{transform: scale(1);}
.left-arrow:active{transform: translateY(4px);}
.right-arrow
{
    
    height: 45px;
    width: 45px;
    background:url(assets/images/938ec0c166e5d85457affe3454f5ad8f.png);
    border: none;
    transition-duration: 0.2s;
}
.right-arrow:hover{transform: scale(1.25);}
.right-arrow:visited{transform: scale(1);}
.right-arrow:active{transform: translateY(4px);}
.startLegend
{
  position: absolute;
  width: 600px;
  height: 20%;
  left: calc(50% - 300px);
  top: 0px;
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
  display:none;
}
.startLegend.invisible{display: none;}
.startLegend.visible{display: block;}
.hLegend
{
  position: relative;
  font-size: 50px;
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  margin-top: 10px;  
  left: calc(15% + 85px);
  color: #093B5C;
}
.pLegend
{
  font-size: 20px;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  margin-top: 10px;
  text-align: center;
  color: #000000;
}
.iconLegend
{
  content: url(assets/images/73b66684097bb059fa6db59c03554e42.png);
  position: relative;
  top: 80px;
  left: 15%;
  width: 75px;
}
.sectorTab{
  
  align-items: center;
  padding: 0px;
  text-align: center;
  vertical-align: middle;
  width: 100%;
}
.gridSector{
  display: none;
  grid-template-columns: 170px 40px;  
  grid-template-rows: 30px 40px;
  color: white;
  border: none;
  border-radius: 15px;  
  position: relative;
  left: -95px;  
  width: 210px;
  height: 65px;  
  background: #093B5C;     
}
.gridSector.visible{display: grid;}
.gridSectorB{
  display: none;
  grid-template-columns: 180px 40px;  
  grid-template-rows: 30px 45px;
  color: white;
  border: none;
  border-radius: 15px;  
  position: relative;
  left: -95px;  
  width: 220px;
  height: 75px;  
  background: #093B5C;     
}
.gridSectorB.visible{display: grid;}
.grid-item-1{
  grid-row: span 2;
  cursor: pointer;
}
.grid-item-2{
  grid-column: span 1;
}
.grid-item-3{
  grid-column: span 1;
  
}
.sectorArrow
{
  background: url(assets/images/f5341395ec413fdee5730d3e7afdb3b4.png); 
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  width: 30px;
  height: 30px;  
  margin-left: 5px;
  margin-top: 5px;
}
.sectorArrow:hover{transform: scale(1.1);}
.sectorClose
{
  background: url(assets/images/d352fd152a7c9ee6fa29153d37cabca7.png);         
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  width: 20px;
  height: 20px;  
  margin-top: 5px;
  margin-left: 10px;
}
.sectorClose.visible{display: block;}
.sectorClose:hover{transform: scale(1.1);}
.caseLink{text-decoration: none;}
@keyframes fadeInUp 
{
    from{opacity: 0;}  
    50%{opacity: 1;}
}  
@keyframes heartBeat 
{
  0%{transform: scale(1);}
  14%{transform: scale(1.2);}
  28%{transform: scale(1);}
  42%{transform: scale(1.2);}
  70%{transform: scale(1);}
}
@keyframes shakeX
{
  from,
  to{transform: translate3d(0, 0, 0);}
  10%,30%,50%,70%,90%{transform: translate3d(-10px, 0, 0);}
  20%,40%,60%,80%{transform: translate3d(10px, 0, 0);}
}
@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(206, 18, 42, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(206, 18, 42, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(206, 18, 42, 0);
	}
}
@media only screen and (max-width: 1200px) 
{
  .icon{width: 400px;}
  .iconShield{width: 90px;}
  p.header{font-size: 30px;}
  .close-btn{width: 50px; height: 50px;}
  #closeImg{margin-left: 12px;}
  .sectorData
  {
    width: 70%;
    right: 50%;
    bottom: 0;    
    transform: translate(50%,-60px);
  }
  .sectorTitle{font-size: 35px;margin-left: 120px;top: -50px;}
  .sectorName{font-size: 13px;/*margin-top: -35px;*/}
  .sectorRef{font-size: 13px;}
  .sectorIcon1{margin-top: 20px;height: 60px;}
  .sectorIcon2{margin-top: 20px;height: 60px;}
  .sectorIcon3{margin-top: 20px;height: 60px;}
  .sectorIcon4{margin-top: 20px;height: 60px;}
  .sectorIcon5{margin-top: 20px;height: 60px;}
  .sectorIcon6{margin-top: 20px;height: 60px;}
  .sectorIcon7{margin-top: 20px;height: 60px;}
  .sectorIcon8{margin-top: 20px;height: 60px;}
  .sectorIcon9{margin-top: 20px;height: 60px;}  
  .segmentBtn
  {   
    width: calc(100% - 80px);
    height: 30px;
    margin-top: 8px;
    font-size: 12px;
  }
  .quick{ width: 60px; height: 60px;}
  .quickContainer{width: 60px; height: 60px;}
  .mina{ width: 60px; height: 60px;}
  .industria{ width: 60px; height: 60px;}
  .telecom{ width: 60px; height: 60px;}
  .educacion{ width: 60px; height: 60px;}
  .transporte{ width: 60px; height: 60px;}
  .energia{ width: 15px; height: 15px;}
  .enterprise{ width: 60px; height: 60px;}
  .catv{ width: 60px; height: 60px;}
  .hospitales{ width: 60px; height: 60px;}
  .sectorNav{margin-bottom: 20px;}
  /*.arrowNav{top: 70px;}*/
  .circleB{left: 23px;margin-top: 80px;}
  .left-arrow{height: 45px;width: 45px;}
  .right-arrow{height: 45px;width: 45px;}
  .startLegend{width: 500px;left: calc(50% - 250px);height: 20%;}
  .hLegend{font-size: 40px;margin-top: 30px;left: calc(15% + 70px);}
  .pLegend{font-size: 18px;margin-top: 15px;}
  .iconLegend{top: 90px;left: 15%;width: 70px;}
  .sectorContent{left: -32px;width: 150px;height: 55px;}  
  .hSector{font-size: 13px;margin-left: 10px;margin-top:7px;}
  .pSector{font-size: 10px;margin-left: 10px;}
  .sectorBtn{width: 50px;height: 50px;}
  .sectorArrow{width: 25px;height: 25px; margin-top: 5px;margin-left: 5px;}
  .sectorClose{width: 18px;height: 18px; margin-top: 5px;margin-left: 10px;}
  .gridSector{
    grid-template-columns: 140px 35px;  
    grid-template-rows: 25px 30px;
    left: -70px;  
    width: 175px;
    height: 55px;}
  .gridSectorB{
    grid-template-columns: 140px 35px;  
    grid-template-rows: 30px 35px;
    left: -70px;  
    width: 175px;
    height: 65px;}
}
  
@media only screen and (max-width: 700px)
{
  .icon-gray{width: 80px; right: 20px;}
  .icon{width: 300px;}
  .iconShield{width: 70px;}
  p.quick-label{font-size: 10px;}
  .quick{width: 70px;height: 28px;}
  p.header{font-size: 22px;}
  .close-btn{width: 40px; height: 40px;border-radius: 15px;}
  #closeImg{margin-left: 9px;}
  .sectorData{        
    width: 90%;
    right: 50%;
    bottom: 0;    
    transform: translate(50%,-50px);
  }
  .sectorTitle{font-size: 25px;margin-left: 100px;top: -40px;}
  .sectorName{font-size: 10px;margin-top: -20px;}
  .sectorRef{font-size: 10px;}
  .sectorIcon1{margin-top: 20px;height: 50px;}
  .sectorIcon2{margin-top: 20px;height: 50px;}
  .sectorIcon3{margin-top: 20px;height: 50px;}
  .sectorIcon4{margin-top: 20px;height: 50px;}
  .sectorIcon5{margin-top: 20px;height: 50px;}
  .sectorIcon6{margin-top: 20px;height: 50px;}
  .sectorIcon7{margin-top: 20px;height: 50px;}
  .sectorIcon8{margin-top: 20px;height: 50px;}
  .sectorIcon9{margin-top: 20px;height: 50px;}  
  .segmentBtn
  {   
    width: calc(100% - 80px);
    height: 30px;
    margin-top: 10px;
    font-size: 8px;
  }
  .quick{ width: 50px; height: 50px;}
  .quickContainer{width: 50px; height: 50px;}
  .mina{ width: 50px; height: 50px;}
  .industria{ width: 15px; height: 15px;}
  .telecom{ width: 50px; height: 50px;}
  .educacion{ width: 50px; height: 50px;}
  .transporte{ width: 50px; height: 50px;}
  .energia{ width: 15px; height: 15px;}
  .enterprise{ width: 50px; height: 50px;}
  .catv{ width: 50px; height: 50px;}
  .hospitales{ width: 50px; height: 50px;}
  .sectorNav{margin-bottom: 20px;}
  .circleB{left: 16px;margin-top: 70px;} 
  /*.arrowNav{top: -30%;}*/
  /*.left{top: 50%;left: 10px;}
  .right{top: 50%;right: 10px;}*/
  .left-arrow{height: 45px;width: 45px;}
  .right-arrow{height: 45px;width: 45px;}
  .startLegend{width: 320px;left: calc(50% - 160px);height: 15%;}
  .hLegend{font-size: 28px;margin-top: -5px;left: calc(10% + 60px);}
  .pLegend{font-size: 15px;margin-top: 15px;margin-left: 5px;margin-right: 5px;}
  .iconLegend{top: 40px;left: 10%;width: 50px;}
  .sectorContent{left: -30px;width: 137px;height: 50px;}  
  .hSector{font-size: 10px;margin-left: 10px;margin-top:7px;}
  .pSector{font-size: 9px;margin-left: 10px;}
  .sectorBtn{width: 50px;height: 50px;}
  .sectorArrow{width: 20px;height: 20px;margin-top: 5px;margin-left: 5px;}
  .sectorClose{width: 15px;height: 15px;margin-top: 5px;margin-left: 7px;}
  .gridSector{
    grid-template-columns: 130px 30px;  
    grid-template-rows: 20px 30px;
    left: -70px;  
    width: 160px;
    height: 50px;}
  .gridSectorB{
    grid-template-columns: 140px 30px;  
    grid-template-rows: 30px 30px;
    left: -70px;  
    width: 170px;
    height: 60px;}
}

/*# sourceMappingURL=main.css.map*/