/*------------------- RESET ---------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, img{
  margin: 0; padding: 0;  border: 0;  outline: 0;  font-size: 100%;  vertical-align: baseline;  background: transparent; text-decoration: none;
}
body {  line-height: 1;}
ol, ul {  list-style: none;}
blockquote, q {  quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';  content: none;}
/* No olvides definir estilos para focus */
:focus {  outline: 0;}
/* En el código HTML es necesario añadir cellspacing="0" */
table {  border-collapse: collapse;  border-spacing: 0;}
/*------------------- END RESET ---------------*/
/*------------------- VARIABLES ---------------*/
:root{
  --MainBackground: white;
  --WhiteBackground: rgb(255, 255, 255);
  --LettersGray: #5C5C5C;
  --lightGray: #bbbbbb;
  --MainBlack: #333333;
  --BrownDark: #8C827D;
  --BrownLight: #D9CEC5;
  --MainRed: #DD0000;
}
*{box-sizing: border-box;}
html{
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
}
body {
  width: 100%;
  height: 100%;
  margin: 0px;/*rgb(102, 132, 149);*/
  background: var(--MainBackground);
  color: var(--LettersGray);
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 1px;
  line-height: 1.5em;

}
.body{
  width: 100%;
  height: 100%;
}

h1, h2, h3, h4, h5, h6{
  font-weight: 400;
  color: var(--LettersGray);
}

img{display: auto;}
.logoName{
  font-family: 'Time New Roman';
  text-align: center;
}



/*------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------- HEADER -------------------------------------------------------------------*/
header{
  position: fixed;
  z-index: 2;
  width: 100%;
}
.logo {
  width: 100%;
  color: black;
  display: inline-block;
  padding: 0px 0.5em;
  font-size: 1.8em;
  line-height: 1.2em;
  text-align: left;
}
.logo img {
  display: inline-block;
  width: 2.5em;
  vertical-align: top;
}
.logo p {
  display: inline-block;
  margin-top: 0.8em;
  vertical-align: top;
}

.desktopNav {
  text-align: center;
  box-sizing: border-box;
}
.desktopNav a, .desktopNav p {
  display: inline-block;
  font-family: 'courier new';
  font-weight: 500;
  font-size: 1.6em;
  margin-bottom: 2em;
  text-shadow: 0px 0px 2px var(--MainBlack);
}
.desktopNav a:hover {
  border-bottom: 1px solid white;
}
#menuBtn {
  position: fixed;
  z-index: 3;
  top: 1em;
  right: 1em;
  display: inline-block;
  color: white;
}
#menuBtn i {
  font-size: 1.2em;
}


/*------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------- ASIDE -------------------------------------------------------------------*/



/*------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------- MAIN -------------------------------------------------------------------*/
#main{
  min-height: 100%;
}


/* ............................ HOME ............................ */
#homePage {
}

.promotionTopBanner{
  background: #f2da55;
  display: block;
}
.promotionTopBanner-body{
  width: 80%;
}
.promotionTopBanner-section{
  display: inline-block;
}
.promotionTopBanner-section2{
  text-align: right;
}
.promotionTopBanner-section3{
  text-align: left;
}
.padding-top-16{
  padding-top: 1.4em;
}
.promotionTopBanner-section2 span{
  display: block;
}

.arrowDown{
  position: absolute;
  left: 0px;
  bottom: 1em;
  display: block;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 3em;
  transition: font-size 0.3s;
}
.arrowDown:hover {
  cursor: pointer;
  font-size: 3.5em;
}

.intro-homePage {
  display: block;
  width: 100vw;
  min-height: 100vh;
  background-image: url('../images/introImage.jpg?v=1');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
}
.introGlass-homePage {
  display: block;
  width: 100%;
  min-height: 65vh;
  background: rgba(116, 116, 116, 0.65);
  padding: 1em;
  text-align: center;
  box-sizing: border-box;
}
.intro-homePage .introGlass-homePage {
  min-height: 100vh;
}

.introText-homePage {
  display: inline-block;
  width: 400px;
  margin: 0em 0em;
  padding: 0.5em;
  max-width: 100%;
  text-align: center;
  box-sizing: border-box;
}
.introText-homePage p:nth-child(1) {
  margin-top: 2em;
  margin-bottom: 0.5em;
  font-size: 1.6em;
  line-height:1.5em;
  color: white;
}
.introText-homePage p:nth-child(2) {
  line-height: 1.8em;
  color: white;
}
.pricesBox-homePage {
  display: inline-block;
  background: var(--MainBlack);
  text-align: center;
  margin-top: 2.5em;
  padding: 0.5em;
}
.pricesBox-homePage a{
  display: inline-block;
  max-width: 49%;
  background: var(--MainBlack);
  color: white;
  padding: 0em 0.8em;
  vertical-align: top;
  text-align: center;
  font-size: 1.1em;
  font-weight: 400;
  border-radius: 0.0em;
  box-sizing: border-box;
  white-space: nowrap;
}
.pricesBox-homePage a sub{
  font-size: 0.9em;
}
.pricesBox-homePage a span {
  font-weight: bold;
  font-size: 1.4em;
}
.pricesBox-homePage a:nth-child(1){
  border-right: 1px solid white;
}
.pricesBox-homePage a:nth-child(2){
}

.introOptions-homePage{
  display: inline-block;
  background: white;
  width: 400px;
  max-width: 100%;
  margin: 3em 0em 0em;
  padding: 1em;
  padding: 0px;
  border-radius: 0.3em;
  box-sizing: border-box;
  vertical-align: top;
}

.promotion-homePage {
  vertical-align: top;
  font-size: 1.2em;
}

.promotion-homePage .hytPlayerWrapOuter {
  width: 100%;
}
.promotion-homePage .hytPlayerWrap {
  width: 100%;
  height: 100%;
}
.promotion-homePage .hytPlayerWrap iframe {
  width: 100%;
  height: 100%;
}

.introOptions-homePage .promotion-homePage *{
  color: var(--MainRed);
  margin: 0px;
}
.promotion-homePage p:nth-child(1){
  font-size: 1.3em;
  font-weight: bold;
  padding-top: 1em;
}
.promotion-homePage p:nth-child(1) span{
  font-size: 0.7em;
}
.promotion-homePage p:nth-child(2){
  font-size: 2.5em;
  font-weight: 700;
  line-height: 1.6em;
}
.promotion-homePage p:nth-child(3) span{
  font-weight: bold;
}
.promotion-homePage p:nth-child(4){
  font-size: 0.8em;
  padding-bottom: 1em;
  color: var(--MainBlack);
}

.introOptions-homePage a {
  display: block;
  background: #F2C791;
  color: #5C5C5C;
  width: 300px;
  max-width: 90%;
  margin: auto;
  margin-top: 1em;
  padding: 0.8em 0.5em;
  text-align: center;
}
.introOptions-homePage a:hover {
  background: #5C5C5C;
  color: white;
}
.introOptions-homePage p {
  display: block;
  color: var(--MainBlack);
  margin-bottom: 1em;
  text-align: center;
  white-space: nowrap;
}
.introOptions-homePage .phone, .contactMethods-homePage .phone {
  font-size: 1.5em;
  font-weight: bold;
  white-space: nowrap;
}

.services-homePage{
  display: block;
  background: white;
  width: 100%;
  max-width: 100%;
  margin: 0px;
  margin-top: 0em;
  padding: 3em 3em 0.5em;
  box-sizing: border-box;
  text-align: center;
  box-sizing: border-box;
}
.serviceTit-homePage {
  display: block;
  width: 450px;
  max-width: 100%;
  margin: auto;
}
.serviceTit-homePage h2 {
  display: block;
  text-align: center;
  font-size: 1.5em;
}
.serviceTit-homePage p {
  display: block;
  margin-top: 1em;
  text-align: center;
  text-align: justify;
}
.services-homePage .link {
  display: block;
  width: 140px;
  margin: auto;
  padding: 0.3em;
  color: var(--LettersGray);
  border-bottom: 1px solid var(--LettersGray);
}
.services-homePage p {
  line-height: 2em;
}
.services-homePage .link:hover {
  display: block;
  background: var(--LettersGray);
  color: white;
  border-radius: 0.3em;
}

.serviceBlock-homePage {
  cursor: pointer;
  display: inline-block;
  width: 350px;
  max-width: 90%;
  margin: 0px 1em;
  box-sizing: border-box;
  vertical-align: top;
}
.serviceBlock-homePage:hover img {
  padding: 0.5em;
}
#windowsPage .serviceBlock-homePage:hover img {
  padding: 0px;
}
.serviceBlock-homePage img {
  display: block;
  margin: auto;
  margin-top: 2em;
  width: 300px;
  max-height: 400px;
  max-width: 100%;
  border-radius: 0.3em;
  vertical-align: top;
}
.serviceBlock-homePage h3 {
  display: block;
  margin: auto;
  margin-top: 1em;
  text-align: left;
  font-size: 1.5em;
  font-weight: bold;
}
.serviceBlock-homePage p {
  display: block;
  margin: auto;
  padding: 0.5em;
  text-align: left;
}
.serviceBlock-homePage a {
  display: block;
  color: var(--BrownDark);
  text-align: right;
}
.zoomImage .serviceBlock-homePage img {
  transition: transform 0.3s;
}
.zoomImage .serviceBlock-homePage img:hover {
  position: relative;
  transform: scale(2);
}

.contact-homePage {
  display: block;
  width: 100%;
  background: var(--BrownLight);
  padding: 3em;
  box-sizing: border-box;

}
.contactMethods-homePage p{
  display: block;
  text-align: center;
  color: white;
  font-weight: bold;
  margin-bottom: 1em;
}
.contactMethods-homePage p:nth-child(1){
  font-size: 1.6em;
  font-weight: bold;
}

.getInTouchHead-homePage h2{
  color: white;
  margin-top: 3em;
  font-size: 1.5em;
  text-align: center;

}
.getInTouchHead-homePage p{
  color: white;
  margin-top: 1em;
  margin-bottom: 2em;
  text-align: center;
}


/* ............................ WINDOWS ............................ */

#windowsPage{
  display: block;
  background: white;
}
.intro-windowsPage{
  display: block;
  width: 100vw;
  background-image: url('../images/install11.JPG');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.serviceTit-windowsPage {
  display: inline-block;
  width: 550px;
  display: inline-block;
  margin: auto;
  padding: 0em 1em;
  max-width: 100%;
  color: white;
}
.serviceTit-windowsPage h2 {
  display: block;
  margin-top: 2em;
  text-align: left;
  font-size: 1.2em;
  line-height: 1.4em;
  color: white;
}
.serviceTit-windowsPage p {
  display: block;
  font-weight: lighter;
  margin-top: 1em;
  line-height: 2em;
  text-align: left;
}

.footer-windowsPage{
  display: block;
  width: 550px;
  margin: auto;
  max-width: 100%;
  padding: 3em;
  text-align: center;
}
.footer-windowsPage i {
  display: block;
  color: var(--BrownDark);
  margin: auto;
  margin-top: 1em;
  margin-bottom: 0.5em;
  text-align: center;
  font-size: 4em;
  font-weight: bold;
}
.footer-windowsPage h2{
  display: block;
  color: var(--BrownDark);
  margin: auto;
  margin-top: 1em;
  margin-bottom: 1em;
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
}
.footer-windowsPage p{
  margin-bottom: 2em;
  text-align: center;
}



/* ............................ DOORS ............................ */

.intro-doorsPage{
  background-image: url('../images/install24Edited.jpg');
  background-position: top;
  background-position: center;
}

.serviceBlock-installPage {
  display: block;
  margin: auto;
  width: 600px;
  max-width: 90%;
  text-align: justify;
}

.installBlock-installPage {
  display: block;
  background: white;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.installBlock-installPage h2 {
  font-size: 1.7em;
}
.installBlock-installPage img {
  display: block;
  width: 100%;
}

.installMiniBlock-installPage {
  display: block;
  width: 90%;
  margin: auto;
  max-width: 90%;
  box-sizing: border-box;
  text-align: center;
}
.installMiniBlock-installPage img {
  display: inline-block;
  width: 400px;
  max-height: 350px;
  max-width: 90%;
  margin-left: 1em;
  margin-bottom: 2em;
  box-sizing: border-box;
  vertical-align: top;
  box-shadow: 3px 3px 5px gray;
}


/* ............................ SLIDING DOOR ............................ */

.intro-slidingDoor{
  background-image: url('../images/slidingDoor3.jpg');
  background-position: top;
  background-position: center;
}


/* ............................ INSTALL ............................ */
 .intro-installPage {
  background-image: url('../images/install17.jpeg');
}

#installVideo {
  display: block;
  width: 800px;
  max-width: 100%;
  margin: auto;
  -webkit-box-shadow: 1px 1px 5px 2px #000000;
  box-shadow: 1px 1px 5px 2px #000000;
}


/* ............................ CONTACT ............................ */
#contactPage {}

#contactPage h2 {
  display: block;
  font-size: 2em;
  margin: auto;
  margin-bottom: 2em;
  padding-top: 3em;
  text-align: center;
}

#contactPage .getInTouchHead-homePage h2, #contactPage .getInTouchHead-homePage p {
  color: var(--LettersGray);
}

#contactPage .contactMethods-homePage p {
  color: var(--LettersGray);
}
#contactPage .input, #contactPage .textarea {
  background: var(--LightGray);
}



/*---------------------- ------ ---------------------------------*/
/*---------------------- FOOTER ---------------------------------*/
footer{
  background: var(--LettersGray);
  display: block;
  width: 100%;
  margin-top: 3em;
  padding: 3em;
  color: white;
  text-align: center;
  font-family: times sans-serif;
}
footer p:nth-child(1n + 2) {
  padding: 0.8em;
}
footer p:nth-child(2) {
  font-size: 1.5em;
}
footer a  {
  margin-top: 3em;
  margin-bottom: 2em;
  color: white;
}



/*---------------------- ------ ---------------------------------*/
/*----------------------- GENERAL STYLES -----------------------*/
#main .form {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: center;
}
#main .formTable{
  display: inline-table;
  max-width: 90%;
  text-align: left;

}

#main input, #main textarea, #main label, #main .label{
  display: block;
  width: 100%;
  max-width: 95%;
  font-size: 0.9em;
}
#main .radio {
  display: inline-block;
  width: 1em;
  height: 1em;
}
#main .numberInput {
  display: inline-block;
  width: 60px;
  background: rgb(245,245,245);
  color: var(--darkGray);
}

.input, .textarea, .label, .select, .button {
  padding: 0.8em 0.5em;
}
.input, .textarea{
  display: block;
  max-width: 95%;
  margin: auto;
  background: white;
  color: var(--normalGray);
  font-family: 'helvetica neue';
  font-weight: 300;
  border: 1px solid var(--lightGray);
  border-radius: 0.3em;
}
.radio {
  background-color: white;
  border-radius: 0.3em;
  margin-right: 0.5em;
  vertical-align: middle;
  border: 1px solid #ddd;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}
.radio:checked {
  background-color: gray;
}
.label {
  display: block;
  color: var(--darkGray);
  max-width: 95%;
  margin: auto;
  border: none;
  text-align: left;
}
.select {
  display: block;
  background: var(--lightGray);
  max-width: 95%;
  margin: auto;
  border: none;
  border-radius: 0.3em;
  text-align: left;
}
.textarea{
  height: 10em;
}
#main .button{
  display: block;
  cursor: pointer;
  background: var(--BrownDark);
  color: white;
  width: 250px;
  max-width: 90%;
  border: none;
  border-radius: 0.3em;
  text-decoration: none;
  margin: auto;
  white-space: nowrap;
}
.button:hover {
  color: white;
  background: var(--LettersGray);
}
.input[type="file"]{
  border: none;
}
.input[type="submit"]:hover, .input[type="button"]:hover {
  cursor: pointer;
  background: rgb(75, 75, 75);
}

#main .completeButton-general{
  cursor: pointer;
  display: inline-block;
  width: 130px;
  background: none;
  color: var(--darkGray);
  border-radius: 0.3em;
  border: 1px solid var(--darkGray);
  padding: 0.8em 1em;
  box-sizing: border-box;
}
#main .completeButton-general:hover{
  background: var(--darkGray);
  color: white;
}
#main .completeButton-general:active{
  background: var(--darkGray);
  color: white;
}