@charset "utf-8";
/* 
font-family: 'Monserrat', sans-serif;
font-family: 'Source Sans Pro', sans-serif;
font-family: 'Nunito Sans'; 

font-family: centaur;
*/ 
 
*{  
	padding: 0;
	margin: 0;
	scroll-behavior: smooth;  
	-ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
font-family: 'Monserrat', sans-serif;
}
body::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}
html {
	padding: 0;
	margin: 0; 
	overflow-x: hidden; 
} 
body {
	padding: 0;
	margin: 0;
	overflow-y: scroll;
	overflow-x: hidden;
	background-color: #fff;
	/* no display scroll bars*/
	-ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
	display:grid;
} 

/*##########################################################
0.x header
##########################################################*/  
header{
	width: 100vw;
	height: 100px; 
	border-bottom: 1px solid #ccc;
	position: relative;
	top: 0;
	left: 0;
	transition: 1s ease;
	z-index: 5; 
	display: inline-flex;
}
#logo{
	width: 80px;
	height: 80px;
	margin: auto 10%;
	transition: 0.3s ease;
}
#desktopMenu{
	width: auto;
	height: 100px; 
	right: 10%;
	position: absolute;
	display: inline-flex;
}
#mobileMenu{
	display: none;
}
#sideNav{ 
	display: none; 
	}
.dropdown {
  position: relative;
  display: inline-block;
  margin: auto 33px;
  font-family: segoe;
}
.dropdown span,a{
	font-size: 21px;
	color: white; 
	text-decoration: none;
	transition: 1s ease;
}
.dropdown a:hover{
	color: gold; 
	text-decoration: none;
}
.dropdown-content {
  opacity: 0;
	z-index: -99;
  position: absolute;
	background-color: rgba(0,0,0,0.90);
  min-width: 322px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px; 
  transition : 0.6s ease;
	transform: rotate3d(0, 3, 0, 60deg);
}
.dropdown:hover .dropdown-content {
  opacity: 1;
	z-index: 1; 
	transform: rotate3d(0, 0, 0, 60deg);
}
  

/**************************************************
	1.5 FormUlario
**************************************************/
.formUlario{ 
	margin: 13px 10%;
	width: 40%;
	height: auto;
	font-family: segoe;
}

.contenedor-formulario {
  width: 99%;
	height: 100%;
  color: #0E6AC0;
z-index: 9999;
}
  .contenedor-formulario .formulario {
    
	  width: 98%;
	 height: 100%; 
    margin: 0; 
}
  .contenedor-formulario .formulario h1,h2,h3{
    color: black;
}
    .contenedor-formulario .formulario .input-group {
		
      position: relative;
      margin-bottom: 32px; 
}
      .contenedor-formulario .formulario .input-group input[type="text"],
      .contenedor-formulario .formulario .input-group input[type="email"],
      .contenedor-formulario .formulario .input-group input[type="password"] {
       padding: 8px;
        font-size: 21px;
        color: #000;
        width: 100%;
        outline: none; 
        background-color: rgba(0,0,0,0.10);
		 border: none;
        border: 1px solid #ddd;
		  border-radius: 3px;
		  font-weight: 500;
		  
}
        .contenedor-formulario .formulario .input-group input[type="text"]:focus, .contenedor-formulario .formulario .input-group input[type="text"]:active,
        .contenedor-formulario .formulario .input-group input[type="email"]:focus,
        .contenedor-formulario .formulario .input-group input[type="email"]:active,
        .contenedor-formulario .formulario .input-group input[type="password"]:focus,
        .contenedor-formulario .formulario .input-group input[type="password"]:active {
          outline: none;
          border: 1px solid green; }
        .contenedor-formulario .formulario .input-group input[type="text"].error,
        .contenedor-formulario .formulario .input-group input[type="email"].error,
        .contenedor-formulario .formulario .input-group input[type="password"].error {
          border: 1px solid #D32F2F; }
          .contenedor-formulario .formulario .input-group input[type="text"].error + label,
          .contenedor-formulario .formulario .input-group input[type="email"].error + label,
          .contenedor-formulario .formulario .input-group input[type="password"].error + label {
            color: #D32F2F; }
      .contenedor-formulario .formulario .input-group label {	
        background-color: transparent;
			color: black; 
		  
	}
        .contenedor-formulario .formulario .input-group label.label {
      background-color: transparent;
			color: black;
			-webkit-transition: all 0.3s ease;
			
          -o-transition: all 0.3s ease;
          transition: all 0.3s ease;
          margin-left: 5px;
          font-size: 21px;
          line-height: 16px;
          position: absolute;
          top: 13px;
          left: 1%; }
          .contenedor-formulario .formulario .input-group label.label.active {
           background-color: #5cb85c;
			  border-radius: 3px;
			top: -19px;
            font-size: 12px;
			  padding: 3px;
            line-height: 12px;
            color: white; }
      .contenedor-formulario .formulario .input-group.checkbox label, .contenedor-formulario .formulario .input-group.radio label {
		  
        display: inline-block;
        cursor: pointer;
        color: #0B075E;
        position: relative;
        font-size: 1em;
        border-radius: 3px;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease; }
        .contenedor-formulario .formulario .input-group.checkbox label:hover, .contenedor-formulario .formulario .input-group.radio label:hover {
          background: #bbdefb; }
        .contenedor-formulario .formulario .input-group.checkbox label:before, .contenedor-formulario .formulario .input-group.radio label:before {
          content: "";
          display: inline-block;
          width: 17px;
          height: 17px;
          position: absolute;
          left: 15px;
          border-radius: 50%;
          background: none;
          border: 2px solid #168C36; }
      .contenedor-formulario .formulario .input-group.error label {
        color: #D32F2F; }
        .contenedor-formulario .formulario .input-group.error label:hover {
          background: rgba(211, 47, 47, 0.2); }
        .contenedor-formulario .formulario .input-group.error label:before {
          border: 2px solid #D32F2F; }
      .contenedor-formulario .formulario .input-group.radio input[type="radio"] {
        display: none; }
        .contenedor-formulario .formulario .input-group.radio input[type="radio"]:checked + label:before {
          display: none; }
        .contenedor-formulario .formulario .input-group.radio input[type="radio"]:checked + label {
          padding: 5px 15px;
          background: #303F9F;
          border-radius: 2px;
          color: #f2f2f2; }
      .contenedor-formulario .formulario .input-group.checkbox label:before {
        border-radius: 3px; }
      .contenedor-formulario .formulario .input-group.checkbox input[type="checkbox"] {
        display: none; }
        .contenedor-formulario .formulario .input-group.checkbox input[type="checkbox"]:checked + label:before {
          display: none; }
        .contenedor-formulario .formulario .input-group.checkbox input[type="checkbox"]:checked + label {
          background: #FFFFFF;
          color: #f2f2f2;
          padding: 5px 15px; }
       button.btnForm{
		 outline: 0px solid #5cb85c;
		  border: 0px solid #5cb85c;;
	   transition: 1s ease;
	   width: auto;
	   height: auto;
	   background-color: #5cb85c;
	   color: white;
	   text-decoration: none;
	   padding: 13px;
font-family: 'Source Sans Pro', sans-serif;
	   border-radius: 5px;
    }
   button.btnForm:hover{
		 outline: 0px solid #5cb85c;
		  border: 0px solid #5cb85c;;
	   transition: 1s ease;
	   width: auto;
	   height: auto;
	   background-color: #3E8F3E;
	   color: white;
	   text-decoration: none;
	   padding: 13px; 
	   border-radius: 5px;
    }
    button.btnOxxo{
		 outline: 0px solid #5cb85c;
		  border: 1px solid #5cb85c;;
	   transition: 1s ease;
	   width: auto;
	   height: auto;
	   background-color: #fff;
	   color: #5cb85c;
	   text-decoration: none;
	   padding: 13px;
font-family: 'Nunito Sans'; 
	   border-radius: 5px;
    }
   button.btnOxxo:hover{
		 outline: 0px solid #5cb85c;
		  border: 0px solid #5cb85c;;
	   transition: 1s ease;
	   width: auto;
	   height: auto;
	   background-color: #3E8F3E;
	   color: white;
	   text-decoration: none;
	   padding: 13px; 
	   border-radius: 5px;
    }




/**************************************************
	1.5 data
**************************************************/
.data{
	width: 100%;
	height: 100vh;
	text-align: center;
}
.data img{
	margin: 5% auto;
	width: 300px;
	height: 300px; 
 }
.data p{
	font-family: segoe;
	font-size: 2em;
	width: 60%;
	margin: auto 20%;
}
 
/*#########################################################
0.x footer
##########################################################*/ 
.footer{
	width: 100%;
	height: auto;
	border-top: 1px solid #ddd;
}
.footerInside{
	width: 80%;
	margin: auto 10%;
	height: auto;
	display: grid;
}
.footerItem{
	width: 100%;
	text-align: center; 
}
.socialBtns{
	display: inline-flex;
}
.socialBtns a{
	text-decoration: none;
	margin: 13px;
}
.socialBtns img{
	width: 55px;
	height: 55px;
}
.textBtns{
	display: inline-flex;
}
.textBtns a{
	text-decoration: none;
	font-size: 21px;
	color: #111;
	margin: 13px;
	font-family: segoe;
	font-weight: 500;
}
.txBtns{
	display: inline-flex;
}
.txBtns a{
	text-decoration: none;
	font-size: 17px;
	color: #666;
	margin: 13px;
	font-family: segoe;
	font-weight: 500;
}
.design{
	text-align: right;
}
.design a{
	text-decoration: none;
	font-size: 17px;
	color: #999;
	margin: 13px;
	font-family: segoe;
	font-weight: 500;
}




/* Tablet V 0.0.1  */
@media (max-width: 1080px) {	
/*##########################################################
0.x header
##########################################################*/ 
#mobileMenu{
	display: none;
}

/*#########################################################
0.x SECTION 1
##########################################################*/  
.containerItem h2{ 
	font-size: 1.5em; 
}
.containerItem h3{ 
	font-size: 1.5em; 
}	
	
	

/*##########################################################
0.x end Mobile version
##########################################################*/ 	
}
/*##########################################################
0.x end Mobile version
##########################################################*/ 






/* Mobile V 0.0.1  */
@media (max-width: 767px){
	
/*##########################################################
0.x header
##########################################################*/ 
header{
	width: 100vw;
	height: 100px; 
	position: relative;
	top: 0;
	left: 0;
	transition: 1s ease;
	z-index: 5; 
	display: inline-flex;
}
#desktopMenu{
	display: none;
}	
#mobileMenu{
	display: block;
	position: relative;
	margin: auto 7% auto auto;  
	text-decoration: none;
}	
#mobileMenu img{
	width: 50px;
	height: 50px;
	}
@keyframes sd {
  0% {
	transform: rotate3d(0, 45, 0, 90deg);
	right: -50%; 
  } 
5%{	
	   width: 1100%; 
	  height: 1100%;
	 right: -50%;  
	 transform: rotate3d(0, 45, 0, 90deg);
	}
  100%{
	   width: 100%; 
	  height: 100%;
	transform: rotate3d(0, 0, 0, 0deg);
	right: 0%;
	  
  }
}
#sideNav{
	width: 100%;
	height: 100%;
	background-color: #000;
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	animation: sd 1.5s ease;
	}
.sideNavInside{
	width: 90%;
	height: 90%;
	margin: 5%; 
}
.close{
	width: 100%;
	height: 50px; 
	}
.close img{
	width: 50px;
	height: 50px;
	float: right;
	display: block;
	position: relative;
	}	
.sideNavItem{
    width: auto;
	height: auto; 
	margin: 13px;
	}	
.sideNavItem a{
	text-decoration: none; 
	font-size: 1.5em;
	font-family: segoe;
	color: #fff;
	}
.sideNavItem p{
	color: #AAAAAA;
	text-decoration: none; 
	font-size: 1.5em;
	font-family: segoe;
	}		 
	
/*#########################################################
0.x SECTION 3
##########################################################*/ 

/**************************************************
	1.5 FormUlario
**************************************************/
.formUlario{ 
	margin: 13px 10%;
	width: 80%;
	height: auto;
font-family: segoe;
}

.contenedor-formulario {
  width: 99%;
	height: 100%;
  color: #0E6AC0;
z-index: 9999;
}
  .contenedor-formulario .formulario {
    
	  width: 98%;
	 height: 100%; 
    margin: 0; 
}
  .contenedor-formulario .formulario h1,h2,h3{
    color: black;
}
    .contenedor-formulario .formulario .input-group {
		
      position: relative;
      margin-bottom: 32px; 
}
      .contenedor-formulario .formulario .input-group input[type="text"],
      .contenedor-formulario .formulario .input-group input[type="email"],
      .contenedor-formulario .formulario .input-group input[type="password"] {
       padding: 8px;
        font-size: 21px;
        color: #003778;
        width: 100%;
        outline: none; 
        background-color: rgba(0,0,0,0.10);
		 border: none;
        border: 1px solid #ddd;
		  border-radius: 3px;
		  font-weight: 800;
		  
}
        .contenedor-formulario .formulario .input-group input[type="text"]:focus, .contenedor-formulario .formulario .input-group input[type="text"]:active,
        .contenedor-formulario .formulario .input-group input[type="email"]:focus,
        .contenedor-formulario .formulario .input-group input[type="email"]:active,
        .contenedor-formulario .formulario .input-group input[type="password"]:focus,
        .contenedor-formulario .formulario .input-group input[type="password"]:active {
          outline: none;
          border: 1px solid green; }
        .contenedor-formulario .formulario .input-group input[type="text"].error,
        .contenedor-formulario .formulario .input-group input[type="email"].error,
        .contenedor-formulario .formulario .input-group input[type="password"].error {
          border: 1px solid #D32F2F; }
          .contenedor-formulario .formulario .input-group input[type="text"].error + label,
          .contenedor-formulario .formulario .input-group input[type="email"].error + label,
          .contenedor-formulario .formulario .input-group input[type="password"].error + label {
            color: #D32F2F; }
      .contenedor-formulario .formulario .input-group label {	
        background-color: transparent;
			color: black; 
		  
	}
        .contenedor-formulario .formulario .input-group label.label {
      background-color: transparent;
			color: black;
			-webkit-transition: all 0.3s ease;
			
          -o-transition: all 0.3s ease;
          transition: all 0.3s ease;
          margin-left: 5px;
          font-size: 21px;
          line-height: 16px;
          position: absolute;
          top: 21px;
          left: 1%; }
          .contenedor-formulario .formulario .input-group label.label.active {
           background-color: #5cb85c;
			  border-radius: 3px;
			top: -19px;
            font-size: 12px;
			  padding: 3px;
            line-height: 12px;
            color: white; }
      .contenedor-formulario .formulario .input-group.checkbox label, .contenedor-formulario .formulario .input-group.radio label {
		  
        display: inline-block;
        cursor: pointer;
        color: #0B075E;
        position: relative;
        font-size: 1em;
        border-radius: 3px;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease; }
        .contenedor-formulario .formulario .input-group.checkbox label:hover, .contenedor-formulario .formulario .input-group.radio label:hover {
          background: #bbdefb; }
        .contenedor-formulario .formulario .input-group.checkbox label:before, .contenedor-formulario .formulario .input-group.radio label:before {
          content: "";
          display: inline-block;
          width: 17px;
          height: 17px;
          position: absolute;
          left: 15px;
          border-radius: 50%;
          background: none;
          border: 2px solid #168C36; }
      .contenedor-formulario .formulario .input-group.error label {
        color: #D32F2F; }
        .contenedor-formulario .formulario .input-group.error label:hover {
          background: rgba(211, 47, 47, 0.2); }
        .contenedor-formulario .formulario .input-group.error label:before {
          border: 2px solid #D32F2F; }
      .contenedor-formulario .formulario .input-group.radio input[type="radio"] {
        display: none; }
        .contenedor-formulario .formulario .input-group.radio input[type="radio"]:checked + label:before {
          display: none; }
        .contenedor-formulario .formulario .input-group.radio input[type="radio"]:checked + label {
          padding: 5px 15px;
          background: #303F9F;
          border-radius: 2px;
          color: #f2f2f2; }
      .contenedor-formulario .formulario .input-group.checkbox label:before {
        border-radius: 3px; }
      .contenedor-formulario .formulario .input-group.checkbox input[type="checkbox"] {
        display: none; }
        .contenedor-formulario .formulario .input-group.checkbox input[type="checkbox"]:checked + label:before {
          display: none; }
        .contenedor-formulario .formulario .input-group.checkbox input[type="checkbox"]:checked + label {
          background: #FFFFFF;
          color: #f2f2f2;
          padding: 5px 15px; }
       button.btnForm{
		 outline: 0px solid #5cb85c;
		  border: 0px solid #5cb85c;;
	   transition: 1s ease;
	   width: auto;
	   height: auto;
	   background-color: #5cb85c;
	   color: white;
	   text-decoration: none;
	   padding: 13px;
font-family: segoe;
	   border-radius: 5px;
    }
   button.btnForm:hover{
		 outline: 0px solid #5cb85c;
		  border: 0px solid #5cb85c;;
	   transition: 1s ease;
	   width: auto;
	   height: auto;
	   background-color: #3E8F3E;
	   color: white;
	   text-decoration: none;
	   padding: 13px;
	   font-family: 'Rubik';
	   border-radius: 5px;
    }

	
	
/**************************************************
	1.5 data
**************************************************/
.data{
	width: 100%;
	height: 100vh;
	text-align: center;
}
.data img{
	margin: 2% auto;
	width: 200px;
	height: 200px; 
 }
.data p{
	font-family: segoe;
	font-size: 1.2em;
	width: 80%;
	margin: auto 10%;
}
	
	
	

/* credit card input number items */ 
#card{
	transition: 1s ease;
	opacity: 0;
	height: auto;
}
input.btn-add{
	border-radius:13px; 	
	width: 199px;
	height: 55px;	
	background-image: linear-gradient(goldenrod,gold);
	color: #000;
	border:solid gold  1px;
	font-size: 21px;	
	transition: 3s ease;
}
input.btn-add:hover{ 	
	width: 199px;
	height: 55px;	
	background-image: linear-gradient(gold,goldenrod);
	color: #000;
	border:solid goldenrod  1px;
	font-size: 21px;
	}
input[type=text] {
	text-align: center;
	border:goldenrod solid 1px;  
	padding: 6px 12px;
	margin: 8px 0;
	box-sizing: border-box;
	width: 199px;
	height: 55px;	
	border-radius:13px; 
	font-size: 21px;
}
input[type=text]:focus{
	border:goldenrod solid 1px; 
	outline: 1px solid gold;
}	
	 
/*#########################################################
0.x footer
##########################################################*/ 
.footer{
	margin-top: 55px;
	width: 100%;
	height: auto;
	border-top: 1px solid #ddd;
}
.footerInside{
	width: 80%;
	margin: auto 10%;
	height: auto;
	display: grid;
}
.footerItem{
	width: 100%;
	text-align: left; 
}
.socialBtns{
	display: inline-flex;
}
.socialBtns a{
	text-decoration: none;
	margin: 13px;
}
.socialBtns img{
	width: 55px;
	height: 55px;
}
.textBtns{
	display: inline-grid;
}
.textBtns a{
	text-decoration: none;
	font-size: 21px;
	color: #111;
	margin: 13px;
	font-family: segoe; 
}
.txBtns{
	display: inline-grid;
}
.txBtns a{
	text-decoration: none;
	font-size: 17px;
	color: #666;
	margin: 13px;
	font-family: segoe;
	font-weight: 500;
}
.design{
	text-align: center;
}
.design a{
	text-decoration: none;
	font-size: 17px;
	color: #999;
	margin: 13px;
	font-family: segoe;
	font-weight: 500;
}	
	
/*##########################################################
0.x end Mobile version
##########################################################*/ 	
}
/*##########################################################
0.x end Mobile version
##########################################################*/