* { margin:0 auto; padding: 0 auto; }

body { background: red ; }

@font-face {
    font-family: Rocko;
    src: url(../fonts/rocko/RockoFLF.ttf);
}
@font-face {
    font-family: San-Francisco-Light;
    src: url(../fonts/sanfrancisco/SF-UI-Text-Light.otf);
}
@font-face {
    font-family: San-Francisco-Regular;
    src: url(../fonts/sanfrancisco/SF-UI-Text-Regular.otf);
}

/* Section 1 */
#section-1-div {  width: 100%; height:500px; background: #dd177f; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #dd177f 0%, #dd175c 100%); /* FF3.6-15 */ background: -webkit-radial-gradient(center, ellipse cover, #dd177f 0%,#dd175c 100%); /* Chrome10-25,Safari5.1-6 */ background: radial-gradient(ellipse at center, #dd177f 0%,#dd175c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd177f', endColorstr='#dd175c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }
/* Menu */
.menu-landing { height: 90px; }
.menu-landing .columns > a > img { margin-top: 11px; margin-left: 3px; margin-bottom: 12px; }

/* Section 1 content */
.section-1-container .columns .columns > h2  { font-family: Rocko; font-size: 54px; line-height: 66px;  color: white; padding-top: 64px; padding-bottom: 35px; margin-bottom: 0px; margin-top: 0px; } 
.section-1-container .columns .columns > p { font-family:San-Francisco-Light; font-size: 16px; line-height: 20px; color: white; padding-bottom: 19px; margin-bottom: 0px; } 
#contact-buttton-section-1 { width: 146px; height: 55px; background:#0999fd; border-radius: 5px; }
#contact-buttton-section-1  > a { width: 146px; height: 55px; display: block; font-family: Rocko; font-size: 16px; line-height: 54px; color: white; text-align: center; }  
.section-1-container .columns .bottle-section > img {position: absolute; margin-top: -51px; margin-left: 89px; }


/* Section 2 */
#section-2-div  { width: 100%; padding: 90px 0px; background: #f7f8f8; }
#section-2-div .videos-container iframe { margin-bottom: 63px; border-radius: 5px; }

/* Section 3 */
#section-3-div  { width: 100%; height:450px; background: white; }
#section-3-left-side { width: 50%; height: 100%; float: left;  }
#section-3-right-side  { width: 50%; height: 100%; float: left;  }
#section-3-right-side > p:first-of-type { font-family: San-Francisco-Light; font-size: 31px; line-height: 41px; color:#fe6192; padding-top: 100px; padding-bottom: 40px;}
#section-3-right-side > p { font-family: San-Francisco-Light; font-size: 20px; line-height: 25px; color:#7f7f80; }

/* Section 4 */
#section-4-div  { width: 100%;padding: 85px 0px; background: #dd1782;  }
#section-4-div .row .columns > h2 { font-family: San-Francisco-Light; font-size: 37px; line-height: 66px; color:white; text-align:center; margin-bottom: 0px; margin-top: 0px; padding-bottom: 10px;}
#section-4-div .row .columns > p { font-family: San-Francisco-Light; font-size: 16px; line-height: 25px;color: white;text-align: center; padding-bottom: 32px; margin-bottom: 0px;}
/* Form Section */
#contact-form input[name="username"] { width: 130px; height: 45px; font-family: San-Francisco-Light; font-size: 16px; color:#757575; outline: none; border-radius: 5px;  margin-left: 5px; margin-right: 5px;  float: left; border:none; background: white;   -webkit-appearance:none; -moz-appearance:none; appearance:none; }
#contact-form input[name="telefono"] { width: 170px; height: 45px; font-family: San-Francisco-Light; font-size: 16px; color:#757575; outline: none; border-radius: 5px;  margin-left: 5px; margin-right: 5px;  float: left;  border:none; background: white;  -webkit-appearance:none; -moz-appearance:none; appearance:none; } 
#contact-form input[name="correo"] { width: 142px; height: 45px; font-family: San-Francisco-Light; font-size: 16px; color:#757575; outline: none; border-radius: 5px;  margin-left: 5px;  float: left; border:none; background: white;   -webkit-appearance:none; -moz-appearance:none; appearance:none; } 
#contact-form select[name="estados"] { width: 130px; height: 45px; font-family: San-Francisco-Light; font-size: 16px; color:#757575; outline: none; border-radius: 5px;  margin-left: 5px;  float: left; border:none; background: url(../images/select-bg-130x45.jpg) no-repeat; -webkit-appearance:none; -moz-appearance:none; appearance:none; padding-left: 5px;} 
#contact-form input[name="mensaje"] { width: 190px; height: 45px; font-family: San-Francisco-Light; font-size: 16px; color:#757575; outline: none; border-radius: 5px;  margin-left: 5px;  float: left; border:none; background: white;  -webkit-appearance:none; -moz-appearance:none; appearance:none; } 
#contact-form input[name="submit-section-4"] { width: 120px; height: 45px; font-family: San-Francisco-Light; font-size: 16px; font-weight: bold; background:#0999fd ; outline: none; border-radius: 5px;  margin-left: 5px;  float: left; border:none; color:white;   -webkit-appearance:none; -moz-appearance:none; appearance:none;  cursor: pointer;} 
#contact-form input[type="radio"] { text-align: center; margin-left: 128px; }
#contact-form span {  font-family: San-Francisco-Light; font-size: 16px;  color:white; line-height: 30px; padding-left: 8px; }
 #section-4-div  p.contact-last-text { font-family: San-Francisco-Light; font-size: 16px; color:#f3bbd9; padding-top: 21px; }
/* Angular */
#contact-form input.ng-invalid.ng-touched  { border: 1px solid #ff0012; color:#ff0012; }
#contact-form select.ng-invalid.ng-touched  { border: 1px solid #ff0012; }
#contact-form input[disabled="disabled"] { cursor: not-allowed !important;  background: #7bc5f8; }


/* Footer Section */
#footer-section  { width: 100%; padding: 68px 0px; background: white;  }
#footer-section p.footer-rights-class { font-family: San-Francisco-Regular; font-size: 12px; color:#939596; padding-top: 29px; border-top: 1px solid #dedfdf;   }

#footer-section  .logo-and-text-section  { padding-bottom: 21px; }
#footer-section  .logo-and-text-section > a  {display: block; }
#footer-section  .logo-and-text-section > a > img  { margin-bottom: 28px;}
#footer-section  .logo-and-text-section > p { font-family:San-Francisco-Regular; font-size:12px; color:#686868; margin-bottom: 0px; }
#footer-section  .logo-and-text-section > p > span { font-family:San-Francisco-Light; font-size:12px; color:#939596;  }

#footer-section .footer-list > ul { list-style: none;  margin-left: 0px; margin-bottom: 0px;}
#footer-section .footer-list > ul li.footer-title { color:red; text-align: left; font-family: San-Francisco-Regular; font-size: 13px; color:#686868; } 
#footer-section .footer-list > ul > li.footer-title  > ul  { list-style: none;  margin-left: 0px; }
#footer-section .footer-list > ul > li.footer-title > ul > li a { font-family: San-Francisco-Regular; font-size: 13px;  color:#bdbdbd !important; text-align: left; text-decoration:none; }
#footer-section .footer-list > ul > li.footer-title > ul > li a:hover { color:#9c9c9c !important; text-decoration:none; }

#footer-contact-button { width: 130px; height: 45px; background: #fe6194; border-radius: 5px; margin-bottom: 20px;  }
#footer-contact-button > a  { font-family: San-Francisco-Regular; font-size: 16px; line-height: 45px; color: white; text-decoration:none; display: block; text-align: center; border-radius: 5px; }

.footer-last-section > p { font-family: San-Francisco-Regular; font-size:16px; padding-left: 12px; color: #939596; }
.footer-last-section > p > a { text-decoration: none; color:#62c9fa; }
.footer-last-section img { margin-right: 31px; }