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

body {

    font-family: 'Josefin Sans', sans-serif;
    font-size: 16px;
    padding-top: 55px;
    min-width: 370px;

}

header {

    margin: 0;
    padding: 0;
    background-color: rgb(0, 111, 255);
    position: fixed;
    width: 100%;
    top: 0;

}

a {

  color: white;
  text-decoration: none;

}

p {

    padding-left: 20px;
    padding-right: 20px;
    font-size: 1.4em; 
    text-align: left;
    color: black;

}

ul {

    padding-left: 60px;
    padding-right: 20px;
    font-size: 1.5em; 
    text-align: justify;
    color: black;

}


h2 {

    margin-left: 20px;
    margin-top: 25px;
    margin-bottom: 25px;
    font-size: 2.2em;
    color:black;

}

h3 {

    font-size: 1em;
    color: #fff;

}

h4 {

    font-size: 1.5em;
    color: #000;
    font-weight: bold;
    
}

footer {

    text-align: center;
    margin-top: 15px;
    width: 100%;
    height: 350px;
    background-color: #006fff;
    display: table;

}

.iconot {

    color: #0b56cc;

}

section#inicio {

    width: 100%;
    height: 850px;
    background: url(../img/imagenfondoinicio002.jpg) no-repeat center center fixed rgba(0, 0, 0, 0.00);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    
}

section#powerby {

    margin: 0 auto;
    display: inline-block;
    color: white;
    margin-left: 6px;
    margin-right: 6px;
    margin-bottom: 15px;
    padding: 5px;
    width: 98%;
    height: 50px;
    background-color: #006fff;
    border-radius: 5px 5px;
    text-align: center;
    vertical-align: top;
    text-decoration: none;
}

section#tituloempresa {

    position:absolute;
    top: 125px;
    left: 25px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    width: 450px;
    height : 315px;
    display: inline-block;
    background-color: rgba(242, 242, 242, 0.60);
    vertical-align: central;
    text-align: center;
    border-radius: 10px 10px 10px;
    box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.50);
}

article#subempresaid {

    margin: 0 auto;
    padding: 0;
    border: 0;
    color: white;
    font-size: 2.0em;
    text-align: center;
    text-shadow: 5px 5px 5px #000;

}


section#powerby a {

    text-decoration: none;

}

.piedepagina {

    margin: 20px auto;
    display: inline-block;
    margin-left: 6px;
    margin-right: 6px;
    margin-bottom: 15px;
    padding: 5px;
    width: 350px;
    height: 350px;
    background-color: #006fff;
    border-radius: 5px 5px;
    text-align: left;
    vertical-align: top;
    font-size: 1.1em;
    color: #ccc;
        
}

section#empresa {

    vertical-align: bottom;
    width: 100%;
    height: 300px;
    background-color: #cdd0bc;
    border-radius: 5px 5px; 

}

section#contenedorshoping {

    position: relative;
    text-align: center;

}

img#btn-tienda {

    margin: 0 auto;
    display:inline-block;
    position: ;
    text-align: center;
    width: 300px;
    height: 147px;
    vertical-align: central;
    
}

img#btn-tienda:hover {

    box-shadow: 0px 5px 5px #000;
nedorshoping {

    position:center;
    text-align: center;
    width: 555px;
    height: 400px;
    background-color: transparent;

}

}

img#tiendaenlineamopet {

    width: 392px;
    height: 281px;

}

.contacto {

    margin: 0 auto;
    display: inline-block;
    margin-left: 6px;
    margin-right: 6px;
    margin-bottom: 15px;
    padding: 5px;
    width: 565px;
    height: 510px;
    background-color: #ccc;
    border-radius: 5px 5px;
    text-align: left;
    vertical-align: top;

}



section#mapa {


    margin: 0 auto;
    display: inline-block;
    margin-left: 6px;
    margin-right: 6px;
    margin-bottom: 15px;
    padding: 5px;
    width: 98%;
    height: 750px;
    background-color: transparent;
    border-radius: 5px 5px;
    text-align: center;
    vertical-align: top;

}

.separador {

    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 15px; 
    width: 100%;
    height: 50px;
    background-color: transparent;
    border-radius: 5px 5px;
    
}

.desproducto {

    margin: 0;
    padding: 0;
    width: 100%;
    height: 412px;
    background-color: transparent;
    color:black;
    display:inline-block;

}

.masproducto {

    margin: 0;
    padding: 0;
    width: 100%;
    height: 50px;
    background-color: transparent;
    color:black;
    font-size: 1.2em;
    text-decoration: none;

}

.hrefmasproducto {

    color: #000000; 
    font-size: 1.1em; 
    text-decoration: none;

}

.iframemapa {

    width: 800px;
    height: 600px;
    border: 2px;
    border-color: #000;
}


.panelproduct {

    border-radius: 5px 5px;
    box-shadow: 7px 7px 7px #8b8b8b;

}
.producto {

    margin: 0 auto;
    display: inline-block;
    margin-left: 6px;
    margin-right: 6px;
    margin-bottom: 15px;
    padding: 5px;
    width: 530px;
    height: 700px;
    background-color: transparent;
    border-radius: 5px 5px;
    text-align: left;
    vertical-align: top;
    border-color: #000;
    border: 5px;

}

.btnclass {

    width: 200px;
    height: 40px;
    background-color: #006fff;
    color: white;
    border-radius: 5px 5px;

}

.headvtacierre {

    margin: 0;
    width: 100%;
    height: 40px;
    background-color: transparent;
    text-align: right;

}

.btncierre {

    margin: 10px;
    width: 50px;
    height: 25px;
    background-color: #006fff;
    color: white;
    border-radius: 5px 5px;
    text-align: center;

}


.btnclass:hover {

    background-color: #72a139;

}

article#masemergente {

    margin: 5px auto;
    padding: 5px;
    width: 90%;
    height: 100%;
    background-color: white;

}

.principios {

    margin: 10px auto;
    margin-left: 6px;
    margin-right: 6px;
    margin-bottom: 0px;
    padding: 10px;
    width: 370px;
    height: 500px;
    background-color: #cdd0bc;
    border-radius: 5px 5px;
    display: inline-block;
    vertical-align: top;
    align-content: center;
    
}

section#contNosotros {

	background-color:#CCC;
	width: 100%;
	height: 100px;
    justify-content: space-between;
    /*min-width: 450px;*/
    display: flex;
    float: left;

}


section#vtafinancial {

    position: fixed;
    top: 20px;
    left: 15%;
    margin: 15px auto;
    padding: 0;
    width: 70%;
    height: 90%;
    background-color: #ccc;
    border-radius: 10px 10px 10px;
    box-shadow: 10px 10px 10px #8b8b8b;
    color:black;
    font-size: 1.2em;
    text-decoration: none;
    text-align: center;
    display: none;
    overflow: scroll;

}



section#vtaproducto {

    position: fixed;
    top: 20px;
    left: 15%;
    margin: 15px auto;
    padding: 0;
    width: 70%;
    height: 90%;
    background-color: #ccc;
    border-radius: 10px 10px 10px;
    box-shadow: 10px 10px 10px #8b8b8b;
    color:black;
    font-size: 1.2em;
    text-decoration: none;
    text-align: center;
    display: none;
    overflow: scroll;

}

section#vtaaviso {

    position: fixed;
    top: 20px;
    left: 15%;
    margin: 15px auto;
    padding: 0;
    width: 70%;
    height: 90%;
    background-color: #ccc;
    border-radius: 10px 10px 10px;
    box-shadow: 10px 10px 10px #8b8b8b;
    color:black;
    font-size: 1.2em;
    text-decoration: none;
    text-align: center;
    display: none;
    overflow: scroll;

}

section#vtasoftware {

    position: fixed;
    top: 20px;
    left: 15%;
    margin: 15px auto;
    padding: 0;
    width: 70%;
    height: 90%;
    background-color: #ccc;
    border-radius: 10px 10px 10px;
    box-shadow: 10px 10px 10px #8b8b8b;
    color:black;
    font-size: 1.2em;
    text-decoration: none;
    text-align: center;
    display: none;
    overflow: scroll;

}


section#vtainfra {

    position: fixed;
    top: 20px;
    left: 15%;
    margin: 15px auto;
    padding: 0;
    width: 70%;
    height: 90%;
    background-color: #ccc;
    border-radius: 10px 10px 10px;
    box-shadow: 10px 10px 10px #8b8b8b;
    color:black;
    font-size: 1.2em;
    text-decoration: none;
    text-align: center;
    display: none;
    overflow: scroll;

}


.scroll::-webkit-scrollbar-button:vertical:decrement{
	background-image: url(scrollbar/arrow-up.png), -webkit-linear-gradient(left,  #f9f9f9 50%,#e2e2e2 100%) ;
	background-repeat: no-repeat;
    background-position: 3px 4px, 0 0;
}
.scroll::-webkit-scrollbar-button:vertical:increment{
	background-image: url(scrollbar/arrow-down.png), -webkit-linear-gradient(left,  #f9f9f9 50%,#e2e2e2 100%) ;
	background-repeat: no-repeat;
    background-position: 3px 5px, 0 0;
}
.scroll::-webkit-scrollbar-button:horizontal:decrement{
	background-image: url(scrollbar/arrow-left.png), -webkit-linear-gradient(top,  #f9f9f9 50%,#e2e2e2 100%) ;
	background-repeat: no-repeat;
    background-position: 4px 3px, 0 0;
}
.scroll::-webkit-scrollbar-button:horizontal:increment{
	background-image: url(scrollbar/arrow-right.png), -webkit-linear-gradient(top,  #f9f9f9 50%,#e2e2e2 100%) ;
	background-repeat: no-repeat;
    background-position: 5px 3px, 0 0;
}
/*corner y resizer*/
.scroll::-webkit-resizer {
	background: #F2F2F2 url(scrollbar/resizer.png)no-repeat 2px 4px;
	border-top:1px solid #D9D9D9;
	border-left:1px solid #D9D9D9;
}
.scroll::-webkit-scrollbar-corner {
	background: #F2F2F2;
	border-top:1px solid #D9D9D9;
	border-left:1px solid #D9D9D9;
}

article#contProductos {

    position: relative;
	background-color: #ff6a00;
	width:100%;
	height:1200px;
    justify-content: space-between;
    min-width: 850px;
    float:left;

}

article#contContacto {

    position: relative;
	background-color: #ff6a00;
	width:100%;
	height:100px;
    justify-content: space-between;
    min-width: 850px;
    float:left;

}

.hrgreen {

    margin-bottom: 3px;
    height: 6px;
    background: #72a139;
    border: none;

}

.hrblue {

    margin-bottom: 15px;
    height: 6px;
    background: #0026ff;
    border: none;

}

.menu {

    display: inline-block;
    width: 90%;
    max-width: 1000px;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

}

.menu .logo {

    display: inline-block;
    margin-right: 1em;

}

.menu .logo img {

    vertical-align: top;
    width: 265px;
    height: 60px;

}

.menu .btn-menu {

    display: none;
    text-decoration: none;
    font-size: 1em;

}

.menu .logo:hover {

    background: #4357ad;
  
}

.menu .enlaces {

    display: inline-block;
    text-align:right

}

.menu .enlaces a {

    color: #ffffff;
    text-decoration: none;
    display: inline-block;
    padding: 1em;
    text-align: center;
    font-size: 1em;

}

.menu .enlaces i {

    margin-right: 5px;

}

.menu .enlaces a:hover {

    background: #f2f2f2;
    color: #4357ad;

} 

main {

    width: 98%;
    max-width:1200px;
    margin: 20px auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0px 2px 5px rgba(0,0,0,0,0.75);

}

h1 {
    
    position: relative;
    background-color: transparent;
    font-weight: normal;
    font-size: 4.0em;
    margin-bottom: .2em;
    width: 100%;
    color: black;

}


main article p {

    margin-bottom: 1em;

}

.headroom {

    transition: transform .3x ease;
    
}

.headroom--pinned {

    transform: translateY(0%);

}

.headroom--unpinned {

    transform: translateY(-100%);
    
}

@media screen and (max-width: 700px) {
    header .menu {

        flex-direction: column;

    }

    header .menu .logo {

        display: flex;
        flex-direction: row;
        justify-content:space-between;
        width: 100%;
        padding: 1em;

    }

    header .menu .logo .btn-menu {

        display: inline-block;

    }

    header .menu .enlaces {

        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content:space-around;

    }

}

@-webkit-keyframes movimiento-diagonal {
   from {
      left: 500px;
   }
   
   to {
      left: 100px;
   }
}

section#titeslogan {

    left: 550px;
    top: 80px;
    margin: 0;
    position:relative;
    width: 700px;
    background-color: transparent;
    color: #fff;
    padding: 2px;
    font-size: 7em;
    font-family: prometheanboldcond;
    text-shadow: 5px 5px 5px #000;

}

article#titempresaid {

    display: inline-block;
    margin: 0 auto;
    padding: 0;
    border: 0;
    color: white;
    font-size: 8.0em;
    text-shadow: 15px 15px 15px #000;

}

img#logopanelempresa {

    width: 400px;
    height: 290px;

}

@font-face {
   font-family: tecnico_bold;
   src: url('../fonts/tecnico_bold.ttf'),
}

@font-face {
    font-family: 'prometheanboldcond';
    src: url('../fonts/prometheanboldcond.ttf')
}