*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


body {
font-family: 'Raleway', sans-serif;
font-size:20px;
line-height:26px;
color:#7F7F7F;
}

main {
	width: 100%;
	background-color: #4B92DE;
	display: flex;
	justify-content: center;
}

section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;  
	
}


article {
	display: flex;
	flex-direction: column;
	justify-content: center; 
	margin: 75px;
}

aside {
	background-color: #1274DE;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap; 
	padding: 30px 5px;
}

aside img {
	padding: 15px;

}

address {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	margin: 50px 7px;
}

address ul {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	list-style-type: none;
	font-style: normal;	
	padding: 40px 15px 75px 15px;
}

address li {
	padding: 20px;
}

form {
	margin: 0;
	display: flex;
	flex-direction: column;
}


h1 {
	font-weight: 900;
	font-size: 40px;
	line-height: 50px;	
}

h2 {
	font-weight: 700;
	font-size: 40px;
	line-height: 50px;	
}

h3 {
	font-family: 'Orbitron', sans-serif;
	font-size: 30px;
	line-height: 40px;
	font-weight: 400;
}

h4 {
	font-family: 'Orbitron', sans-serif;
	font-size: 30px;
	font-weight: 400;
	color: #F6B63E;
}

h5 {
	font-weight: 400;
	font-size: 25px;
	line-height: 35px;
	color: #F6B63E;	
}

hr {
border-top: 1px solid #1274DE;
margin:20px 0;
width: 95%;
}


button, #boton {
	padding: 15px 25px;
	border: 2px solid #F6B63E;
	margin-top: 50px;
	font-family: 'Orbitron', sans-serif;
	font-size: 25px;
	color: #F6B63E;
	cursor: pointer;	
}

button:hover, #boton:hover {
	background-color: #F6B63E;
	color: #fff;
}

button a, #boton a {
	text-decoration: none;
	
}


button a:hover, #boton a:hover {
		color: #fff;
}

button:active, #boton:active {
		color: #fff;
}

#boton {	
            width: 150px;
            margin-left: 15px;
            background-color: transparent;
        }


label {
    padding: 25px 0 10px 0;
    text-align: left;
    display: flex;
        }

input {
    width: 300px;
 	
        }

footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: 'Orbitron', sans-serif;
	font-size: 18px;
	font-weight: 400;
	padding: 15px 30px;
}



.contact-button {
	border: 2px solid #fff;
	background-color: transparent;
	color: #fff;
}

.contact-button a {
	text-decoration: none;
	color: #fff;
}

.contact-button:hover {
	border: 2px solid #F6B63E;	
	background-color: transparent;
	color: #F6B63E;	
}




.navbar {   
    padding-bottom: 10px;
   font-family: 'Orbitron', sans-serif;
   background-color: #fff;
}
.main-nav {
    list-style-type: none;
    display: none;
    border-top: 1px solid #1274DE;
}
.nav-links {
    text-decoration: none;  
    color: #7F7F7F;
}

.nav-links:hover {
      
    color: #F6B63E;
}

.main-nav li{
    text-align: center;
    margin: 15px auto;
}



.navbar-toggle {
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer; 
    font-size: 24px;
}

.active {
	display: block;
}

.current {
	color: #F6B63E;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}


.logo {
    
    margin-top: 10px;
    margin-left: 20px;
}


 	.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
   padding: 50px;
  color: #fff;
 margin-top: 80px;
}


.separator-hero{
	width: 60%;
	height: 5px;
	margin: 25px 0;
	background-color: #F6B63E;
	align-self: center;
}


.intro {
	text-align: center;
	font-family: 'Orbitron', sans-serif;
	font-size: 16px;
	letter-spacing: 1px;
	line-height: 24px;
}

.devices {
	width: 100%;
	display: flex;
	justify-content: center;
	margin: 0 auto;
	padding-top: 7px;
}

.devices img {
	width: 100%;
}


.video img{
	border: 1px solid #D3D3D3;
}

.infograph {
	flex: 1;	
}


.solutions {
	margin: 0;
}

.white {
	background-color: #fff;
	padding: 75px;
}

.computer {
	background-color: #F6B63E;
	margin: 0;
}

.lupa {
	padding-left: 5px; 
}

.infograph img {
	max-width: 90%;
	padding: 5%;
	align-self: center;
	margin-left: 15px;
}

.info {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	order: 1;
}

.separator-info{
	width: 25%;
	height: 5px;
	margin: 15px 0 40px;

}

.yellow {
	background-color: #F6B63E;
	color: #F6B63E;
}
 
.blue {
	background-color: #1274DE;
	color: #1274DE;
} 

.green {
	background-color: #4C963A;
	color: #4C963A;
} 


.call, .hero-secondary {
	background-color: #1274DE;
	padding: 75px;
	color: #fff;
	text-align: center;
	margin-top: 80px;
}


.products{
	margin: 15px 30px;
	text-align: left;
	font-style: italic;
}

.contact {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	background-color: #4C963A;
	text-align: center;
	padding: 75px;
	color: #fff;
	font-size: 16px;

}

.datos {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 50px 15px 15px 15px;
}

.dato, .message {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	flex-wrap: wrap;
}

.message {
	padding: 0px 15px;
}


 .error {
    color: #F6B63E;
    text-align: left;
    display: none;
    font-size:14px;
    padding-left: 5px;
            }



 .overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(245, 183, 61, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #1274DE;
  border: 1px solid #fff;
  width: 30%;
  min-width: 200px;
  position: relative;
  font-size: 14px;
  color: #fff;
}

.popup h2 {
  margin-top: 0;
  color: #fff;
  
  font-size: 24px;
  font-weight: bold;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 24px;
  
  text-decoration: none;
  color: #F6B63E;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 50%;
  
}



@media screen and (min-width: 650px) {

address ul {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	list-style-type: none;
	font-style: normal;
	display: flex;
	padding: 40px 15px 75px 15px;
}

address li {
	padding: 5px;
}


}


@media screen and (min-width: 768px) {
	h1 {
	font-size: 50px;
	line-height: 60px;	
}


article {
	display: flex;
	flex-direction: row;
	justify-content: space-between; 
	
}

address {
	margin: 50px;
}

h5 {
	font-size: 30px;
	line-height: 40px;	
}

form {
	margin: 0 50px;
	display: flex;
	flex-direction: column;
}

 
 	.hero {
	
background: url(../img/fondo-hero-tbl-02.jpg) no-repeat top center; 
background-size: contain;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;	
  max-width: 1200px;
  display: flex;
	flex-direction: column;
    padding: 50px;
  color: #fff;
  text-align: left;
 
}

.intro {
	text-align: left;
	width: 50%;
	margin-bottom: 15px;
	
}


.separator-hero{
	width: 50%;
	align-self: flex-start;
}

.devices {
	display: none;
}

.business {
	padding-left: 50px; 
	
}

.infograph .lupa {
	padding-left: 5px; 
	order: 1;
}



.info {
	text-align: left;
	align-items: flex-start;
	order: 1;
}

.infograph {
	flex: 1;
	order: 1;
	align-self: center;
}

.lupa {
	padding-left: 75px; 
}



}


@media screen and (min-width: 992px)  {

		h1 {
	font-size: 65px;
	line-height: 75px;	
}
	h2 {
	font-size: 50px;
	line-height: 60px;	
}

address {

	margin: 80px;
}

form {
	margin: 0 80px;
}

 
 	.hero {
	
background: url(../img/fondo-hero-md-01.jpg) no-repeat top center; 
background-size: contain;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;	
  max-width: 1200px;
  display: flex;
	flex-direction: column;
    padding: 50px;
  color: #fff;
 
}



    .navbar {
        display: flex;
        justify-content: space-between;
        padding-bottom: 0;   
        align-items: center;
        font-size: 16px;
    }

	  .main-nav {
	        display: flex;
	        margin-right: 50px;
	        margin-top: 15px;
	        justify-content: flex-end;
	        border-top: none;
	    }

	    .nav-links, .current {
        margin-left: 40px !important;
    }

     .navbar-toggle {
       display: none;
    }

@media screen and (min-width: 1400px) {

	h1 {
	font-size: 75px;
	line-height: 100px;	
}

	h2 {
	font-size: 60px;
	line-height: 100px;	
}

h3 {	
	font-size: 40px;	
}


		.hero {
	
	background: url(../img/fondo-hero-big-01.jpg) no-repeat top center; 
	background-size: contain;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;	
  max-width: 1400px;
  display: flex;
	flex-direction: column;
    padding: 50px;
  color: #fff;
}

.intro {
	width: 40%;
	}


}