* {box-sizing: border-box;}
* {font-family: 'Exo 2', sans-serif; font-style: italic;-webkit-transition: all .2s linear; transition: all .2s linear;
  -webkit-box-sizing: border-box; box-sizing: border-box;margin: 0; padding: 0;}
html {font-size: 62.5%; scroll-behavior: smooth;}
body {overflow-x: hidden;}

/*Header Section*/
header {width: 100%;display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;position: fixed; top: 0; left: 0; padding: 2rem 3rem; z-index: 10;}
header nav ul {list-style: none;display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-align: center; 
  -ms-flex-align: center; align-items: center;-ms-flex-pack: distribute; justify-content: space-around;}
header nav ul li {margin: 1rem 1.5rem;}
header nav ul li a {font-size: 2rem;text-decoration: none; color: #fff; padding: 0.5rem;}
header nav ul li a:hover {background: #99cc66;}
.active {color: #99cc66;}.active:hover {color: #FFF;}
header .fa-bars {font-size: 4rem; color: #99cc66;cursor: pointer; margin: 0 2rem; z-index: 20; display: none;}
header .logo {margin: 0 2.5rem; text-align: right;}
header .logo a {text-decoration: none;}
header .logo a h1 {font-size: 3rem; color: #fff;}
header .logo a h1 span {color: #99cc66;}

/*Home Section*/
#home {height: 100vh; width: 100vw;display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-align: center; 
  -ms-flex-align: center; align-items: center;-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  -webkit-box-orient: vertical; -webkit-box-direction: normal;-ms-flex-flow: column; flex-flow: column;
  background: url(back.jpg), -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.20)), to(rgba(0, 0, 0, 0.30)));
  background: url(back.jpg), linear-gradient(rgba(0, 0, 0,  0.20), rgba(0, 0, 0,  0.30));background-size: cover; background-position: center;
  background-blend-mode: multiply; background-attachment: fixed;padding-top: 5rem; position: relative; text-align: center;}
#home h1 {font-size: 7rem; margin: 0 .5rem; color: #fff;}
#home h3 {font-size: 5rem; color: #99cc66; margin: 1rem 0;}
#home button {margin: 2rem 0;  height: 4rem; width: 18.2rem;outline: none; font-size: 1.5rem; font-weight: bold;
  background: transparent; border: 0.2rem solid #99cc66;cursor: pointer; color: #99cc66;}
#home button:hover {background: #99cc66; color: #fff;}
#home .icons {position: absolute;bottom: 3.5rem; left: 5rem; z-index: 2;}
#home .icons a {text-decoration: none;font-size: 3rem; margin: 0 1rem; color: #fff;}
#home .icons a:hover {color: #333;}
#home .shape-image {position: absolute;bottom: -1rem; left: 0; z-index: 1;}
#home .shape-image img {height: 15rem; width: 100vw;}
/*homes index1-5 Section*/
#homes {height: 65vh; width: 100vw;display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-align: center; 
  -ms-flex-align: center; align-items: center;-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  -webkit-box-orient: vertical; -webkit-box-direction: normal;-ms-flex-flow: column; flex-flow: column;
  background: url(back.jpg), -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.20)), to(rgba(0, 0, 0, 0.30)));
  background: url(back.jpg), linear-gradient(rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.30));background-size: cover; background-position: center;
  background-blend-mode: multiply; background-attachment: fixed;padding-top: 1.5rem; position: relative; text-align: center;}
  #homes h1 {font-size: 7rem; margin: 0 .5rem; color: #fff;}
  #homes h3 {font-size: 5rem; color: #99cc66; margin: 1rem 0;}
  #homes button {margin: 1rem 0;  height: 4rem; width: 18.2rem;outline: none; font-size: 1.5rem; font-weight: bold;
    background: transparent; border: 0.2rem solid #99cc66;cursor: pointer; color: #99cc66;}
  #homes button:hover {background: #99cc66; color: #fff;}
  #homes .icons {position: absolute;bottom: 3.5rem; left: 5rem; z-index: 2;}
  #homes .icons a {text-decoration: none;font-size: 3rem; margin: 0 1rem; color: #fff;}
  #homes .icons a:hover {color: #333;}
  #homes .shape-image {position: absolute;bottom: -1rem; left: 0; z-index: 1;}
  #homes .shape-image img {height: 15rem; width: 100vw;}

/*Feature Section*/
#feature {height: auto; width: 100vw;display: -ms-grid; display: grid; place-items: center; background: #99cc66;}
#feature h1 {color: #fff; font-size: 4rem; margin: 2rem 0;text-align: center;}
#feature .card-container {width: 90vw;display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-pack: distribute; -ms-flex-wrap: wrap; flex-wrap: wrap;justify-content: space-around; margin: 0rem 0rem 2rem 0rem;}
#feature .card-container .card {width: 30rem;height: 40rem; margin: 2rem; background: #fff;}
#feature .card-container .card img {width: 100%;height: 50%; -o-object-fit: cover; object-fit: cover;}
#feature .card-container .card .content {height: 50%; width: 100%; text-align: center;}
#feature .card-container .card .content h1 {color: #99cc66; font-size: 2.5rem; margin: 1rem 0;}
#feature .card-container .card .content p {font-size: 1.2rem; padding: .5rem;}
#feature .card-container .card .content button {height: 4rem; width: 14rem;background: transparent; border: 0.2rem solid #99cc66;
  outline: none; font-size: 1.5rem; cursor: pointer; color: #99cc66; font-weight: bold; margin: 1rem 0;}
#feature .card-container .card .content button:hover {background: #99cc66; color: #fff;}
#feature .card-container .card:hover {-webkit-transform: translateY(-3rem); transform: translateY(-3rem);
  -webkit-box-shadow: 0 0 1rem #333; box-shadow: 0 0 1rem #333;}
/* feature index1-5 */
#features {height: auto; width: 100vw;display: -ms-grid; display: grid; place-items: center; background: #99cc66;} 
#features h1 {color: #fff; font-size: 4rem;text-align: center;margin-top:-90px;z-index:2;}
#features .cards-container {width: 90vw;display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-pack: distribute; -ms-flex-wrap: wrap; flex-wrap: wrap;justify-content: space-around; margin: 0rem 0rem 2rem 0rem;}
.link {text-align: center;padding: 14px 25px;background: #FFF;outline: none; margin: 2rem 0rem 0rem 0rem;font-size: 1.5rem; cursor: pointer; color: #99cc66; font-weight: bold;}
.link:hover {background: #333; color: #fff;}

/*About Section*/
#about {height: auto; width: 100vw;display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-pack: distribute; justify-content: space-around;}
#about .image {margin: 5rem 15rem;}
#about .image img {width: 30rem;}
#about .content {width: 90vw;}
#about .content h1 {font-size: 4rem; margin: 3rem 0; color: #9c6;}
.text1 {font-size: 4rem; margin-top: 10rem; color: #99cc66;}
#about .content p {font-size: 2rem; padding-right: 6rem;}
#about .content .buttons {padding-right: 2rem;}
#about .content .buttons button {height: 4rem; width: 14rem;background: transparent; border: 0.2rem solid #99cc66;
  outline: none; font-size: 1.5rem; cursor: pointer;color: #99cc66; font-weight: bold; margin: 2rem 2rem 2rem 0;}
#about .content .buttons button:hover {background: #99cc66; color: #fff;}
/* 1 Column Layout */
.one-column {width:90%;margin: 0 auto;text-align: left;margin-top: 50px;}
.ti1 {font-size: 3.5rem;font-weight:700;color: #9c6;}.let{font-size: 2rem;font-weight:300;text-align: center;}
/* 2 Column Layout */
.row1 {width: 100%;background-color: #9c6;padding: 1%;}
.two-column {display: flex;max-width: 80%;margin: 40px auto;}
.column {flex: 1;margin:0px;padding: 5px 0 5px 0;}
.column .info {padding: 8px;border: 1px solid #FFF;}
.ti2 {font-size: 2rem;color: #FFF;}
/* 5 Column Layout */
.row2 {width: 100%;background-color: #001e36;padding: 1%;}
.grid {display: grid;grid-template-columns: 40% 15% 15% 15% 15%;grid-template-rows: repeat(5, auto);max-width: 80%;margin: 20px auto;}
.column .inf {padding: 8px;border: 1px solid #31a8ff;}
.ti3 {color: #31a8ff;}.ti4 {font-size: 2rem;color: #FFF;}.total {color: #b00;}
.ti5 {font-size: 2.1rem;color: #000;}.sp{height: auto;}

/* Certificacion Section */
#ctf {background-image:url(../img/back1.jpg);background-size:cover;background-position:top center; position:relative;z-index:1;height: 90vh;}
#ctf::after {content:''; position: absolute; left:0; top:0; height: 100%; width: 100%; background-color: #000; opacity: 0.4; z-index: -1;}
.ctf-row {content:""; display: table; clear:both;flex-direction:column-reverse;text-align:center;margin: 0 auto;padding:7% 10%;}
.ctf-row::after {content:""; display:table; clear:both; flex-direction:column-reverse;}
.ctf {padding: 4%;}
h3.ctf-1 {font-size:2.2rem;font-weight:300;color:#fff;text-transform: uppercase;letter-spacing: 0.2rem;text-align: center;}
.ctf-1 span {color: rgb(255, 255, 255);}
.column01 {float: left;padding: 20px;width: 48%;}
.ctfimg {max-width: 100%;height: auto;display: block;margin-bottom: 20px;}

/* Gallery Section */
#gallery {display: -ms-grid; display: grid; place-items: center; height: auto; width: 100vw; background: #f7f7f7;}
#gallery h1 {text-align: center;font-size: 4rem; color: #99cc66; margin: 2rem 0;}
#gallery .image-container {width: 98vw;display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-pack: center; -ms-flex-pack: center;justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#gallery .image-container .image {height: 25rem;width: 30rem; margin: 2rem; overflow: hidden; position: relative;}
#gallery .image-container .image img {height: 100%;width: 100%; -o-object-fit: cover; object-fit: cover;}
#gallery .image-container .image .info {height: 100%; width: 100%;display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;-webkit-box-pack: center; -ms-flex-pack: center; 
  justify-content: center;position: absolute; bottom: -100%; left: 0;background: rgba(0, 0, 0, 0.7);}
#gallery .image-container .image .info button {height: 4rem; width: 14rem; background: transparent;
  border: 0.2rem solid #99cc66; outline: none;font-size: 1.5rem; cursor: pointer; color: #99cc66; font-weight: bold;}
#gallery .image-container .image .info button:hover {background: #99cc66; color: #fff;}
#gallery .image-container .image:hover .info {bottom: 0%;}


/* Contact Section */
#contact {height: 100vh; width: 100vw;display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; 
  -ms-flex-align: center; align-items: center;-ms-flex-pack: distribute; justify-content: space-around; overflow: hidden;
  background: url(back-img.jpg), -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.7)));
  background: url(back-img.jpg), linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));background-repeat: no-repeat; 
  background-size: cover; background-position: center;background-attachment: fixed; background-blend-mode: multiply;}
#contact form { display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-orient: vertical; 
  -webkit-box-direction: normal;-ms-flex-flow: column; flex-flow: column;}
#contact form h1 {color: #99cc66; font-size: 4rem;}
#contact form input {height: 4rem;background: transparent; margin: 2rem 0;padding: 0 1rem; border: 0.2rem solid #99cc66;
  outline: none; color: #fff; font-weight: bold; width: 40vw;}
#contact form input::-webkit-input-placeholder {color: #ccc;}
#contact form input:-ms-input-placeholder {color: #ccc;}
#contact form input::-ms-input-placeholder {color: #ccc;}
#contact form input::placeholder {color: #ccc;}
#contact form input:focus {background: #99cc66;}
#contact form input[type="submit"] {height: 4rem; width: 100%; background: transparent;border: 0.2rem solid #99cc66; 
  outline: none; font-size: 1.5rem;cursor: pointer; color: #99cc66; font-weight: bold;background: #99cc66; color: #fff;}
#contact form input[type="submit"]:hover {background-image: url('whatsapp.svg') no-repeat left top;background-size: 35px 35px;
  background-color: #99cc66; color: #fff;}
#contact form textarea {resize: none; background: transparent;outline: none; padding: 1rem; 
  color: #fff;border: 0.2rem solid #99cc66; font-weight: bold; width: 40vw;}
#contact form textarea::-webkit-input-placeholder {color: #ccc;}
#contact form textarea:-ms-input-placeholder {color: #ccc;}
#contact form textarea::-ms-input-placeholder {color: #ccc;}
#contact form textarea::placeholder {color: #ccc;}
#contact form textarea:focus {background: #99cc66;}
#contact .image img {height: 80vh; width: 30vw; margin-top: 16rem;}
/* contact Section */
#cont {background-image:url(../img/back.jpg);background-size:cover;background-position:top center; position:relative;z-index:1;height:70vh;
  display: -webkit-box; display: -ms-flexbox; display: flex;-ms-flex-pack: distribute; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#cont::after {content:''; position: absolute; left:0; top:0; height: 100%; width: 100%; background-color: #FFF; opacity: 0.8; z-index: -1;}
.cont {padding: 3%;}
.column04 {float: left;padding: 20px;width: 50%;height: 60vh;border-radius: 10px;}
.map{width: 100%; height: 60vh; border-radius: 10px;margin-top:-20px;}
.contc-info-item {display: flex;margin-bottom: 40px;}
.contc-info-icon {height: 70px;width: 70px;background-color: #fff;text-align: center;border-radius: 50%;}
.contc-info-icon i {font-size: 30px;line-height: 70px;}
.contc-info-c {margin-left: 30px;}.tp{color: #333;font-size: 2.5em;text-align: center;margin: 10px 0px 40px 0px;}
.contc-info-c h4 {color: #333;font-size: 2.5em;}
.contc-info-c p {color: #FFF;font-size: 1.5em;}

/* Footer Section */
#footer {height: auto; width: 100vw;display: -ms-grid; display: grid;place-items: center; background: #333;}
#footer .msg { text-align: center;color: #fff; margin: 2rem 0;}
#footer .msg span {color: #99cc66;}
#footer .footer-container {height: auto;width: 90vw;display: -webkit-box;display: -ms-flexbox;
  display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;
  -ms-flex-pack: distribute;justify-content: space-around;-ms-flex-wrap: wrap;flex-wrap: wrap;}
#footer .footer-container .brand {margin: 3rem 0;-webkit-box-flex: 1;-ms-flex: 1 0 25rem;flex: 1 0 25rem;}
#footer .footer-container .brand .logo {margin: 1rem 0;}
#footer .footer-container .brand .logo a {text-decoration: none;}
#footer .footer-container .brand .logo a h1 {font-size: 3rem;color: #fff;}
#footer .footer-container .brand .logo a h1 span {color: #99cc66;}
#footer .footer-container .brand .icons {display: -webkit-box;display: -ms-flexbox;display: flex;
  -webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-flow: column;flex-flow: column;}
#footer .footer-container .brand .icons a {text-decoration: none;color: #99cc66;
  font-size: 3rem;margin: .5rem 0;position: relative;}
#footer .footer-container .brand .icons a::after {content: attr(data-text);position: absolute;top: .8rem;
  left: 3.5rem;font-family: 'Exo 2',sans-serif;font-style: italic;font-size: 1.5rem;color: #fff;}
#footer .footer-container .contact-info {-webkit-box-flex: 1;-ms-flex: 1 0 25rem;flex: 1 0 25rem;}
#footer .footer-container .contact-info .info {height: 16rem;width: 5rem;background: #99cc66;display: -webkit-box;
  display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-flow: column;
  flex-flow: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;text-align: center;}
#footer .footer-container .contact-info .info a {font-size: 2rem;text-decoration: none;margin: 2rem 0;color: #fff;position: relative;}
#footer .footer-container .contact-info .info a::after {content: attr(data-text);position: absolute;top: .5rem;left: 5.5rem;
  width: 25rem;text-align: left;font-family: 'Exo 2',sans-serif;font-style: italic;font-size: 1.5rem;color: #fff;}
#footer .footer-container .letter {-webkit-box-flex: 1; -ms-flex: 1 0 25rem; flex: 1 0 25rem; margin-top: 1rem;}
#footer .footer-container .letter h1 {font-size: 3rem; color: #99cc66;}
#footer .footer-container .letter p {color: #fff; margin: 1rem 0; font-size: 1.5rem;}
#footer .footer-container .letter input {height: 4rem;background: transparent;margin: 1rem 0; padding: 0 1rem; 
  border: 0.2rem solid #99cc66; outline: none;color: #fff; font-weight: bold; width: 100%;}
#footer .footer-container .letter input::-webkit-input-placeholder {color: #ccc;}
#footer .footer-container .letter input:-ms-input-placeholder {color: #ccc;}
#footer .footer-container .letter input::-ms-input-placeholder {color: #ccc;}
#footer .footer-container .letter input::placeholder {color: #ccc;}
#footer .footer-container .letter input:focus {background: #99cc66;}
#footer .footer-container .letter input[type="submit"] {height: 4rem; width: 14rem; background: transparent; 
  border: 0.2rem solid #99cc66;outline: none; font-size: 1.5rem; cursor: pointer; color: #99cc66;
  font-weight: bold; background: #99cc66; color: #fff;}
#footer .footer-container .letter input[type="submit"]:hover {background: #99cc66; color: #fff;}
#footer .footer-container .letter input[type="submit"]:hover {background: transparent;}
.fa-times {-webkit-transform: rotateZ(180deg);transform: rotateZ(180deg);}
.active { background: #333; padding: 0.5rem;-webkit-box-shadow: 0 .1rem .3rem #000; box-shadow: 0 .1rem .3rem #000;}

/* media 991px */
@media (max-width: 991px) {html {font-size: 50%;}}

/* media 768px */
@media (max-width: 768px) {html {font-size: 40%;}
  /* about */
  #about {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; 
  flex-flow: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
  #about .image img {width: 70vw;}
  #about .content {text-align: center;}
  #about .content p {padding: 2rem;}
  #about .content .buttons {padding: 0;}
  /* feature */
  #feature .card-container .card {width: 50rem;height: 45rem; margin: 2rem; background: #fff;}
  #feature .card-container .card .content h1 {color: #99cc66; font-size: 2.7rem; margin: 1rem 0;}
  #feature .card-container .card .content p {font-size: 1.9rem; padding: .3rem;}
  #feature .card-container .card .content button {height: 4rem; width: 14rem;background: transparent; border: 0.2rem solid #99cc66;
    outline: none; font-size: 1.7rem; cursor: pointer; color: #99cc66; font-weight: bold; margin: 1rem 0;}
 /* feature index1-5 */
  #features h1 {color: #fff; font-size: 2.5rem;margin-top:-10px;}
  .link {text-align: center;padding: 10px 20px;}
  /* Certificacion */
  .ctf {padding: 4%;}
  #ctf {height: 104vh;}
  h3.ctf-1 {padding-top: 10%;font-size:3.2rem;font-weight:300;color:#fff;text-transform: uppercase;letter-spacing: 0.2rem;text-align: center;}
  .column01 {float: left;width: 98%;}
  /* index1 1 Column Layout */
  .one-column {width:95%;margin: 0 auto;text-align: center;margin-top: 50px;}
  .ti1 {font-size: 4rem;color: #9c6;}.let{font-size: 2.5rem;}
  .one-column img {width: 95%;}
  /* 2 Column Layout */
  .row1 {width: 100%;background-color: #9c6;padding: 1%;}
  .two-column {display: flex;max-width: 95%;margin: 40px auto;}
  .ti2 {font-size: 2.1rem;color: #FFF;}
  /* 5 Column Layout */
  .row2 {width: 100%;background-color: #001e36;padding: 1%;}
  .grid {display: grid;grid-template-columns: 44.5% 11% 15% 15% 14.5%;grid-template-rows: repeat(5, auto);max-width: 98%;}
  .column .inf {padding: 5px 2px 5px 2px;border: 1px solid #31a8ff;text-transform: lowercase;}.sp{display: flex;align-items: center;height: 45px;}
  .ti3 {color: #31a8ff;}.small{font-size: 2rem;}.sp1{display: flex;align-items: center;height: 28px;}.ti4 {font-size: 2.2rem;color: #FFF;}.total {color: #b00;}
  .ti5 {font-size: 2.2rem;color: #000;}
  /* gallery */
  #gallery .image-container .image {float:left;display: flex; width: 38%;}
  /* contact */
  #contact {display: block;display: -ms-grid; display: grid;place-items: center;height: auto;padding-top: 10rem;}
  #contact .image img {width: 80vw;height:48vh; margin-top: 4rem;}
  #contact form input {width: 80vw;}
  #contact form textarea {width: 80vw;}
  #contact form input[type="submit"]:hover {background-size: 25px 25px;}
/* contact4 Section */
#cont {height:auto;}
.cont {padding: 3%;}
.column04 {float: left;padding: 20px;width: 100%;height: auto;border-radius: 10px;}
.map{width: 100%; height: 48vh; border-radius: 10px;margin-top:-10px;}
.contc-info-item {display: flex;margin-bottom: 40px;}
.contc-info-icon {height: 70px;width: 70px;background-color: #fff;text-align: center;border-radius: 50%;}
.contc-info-icon i {font-size: 30px;line-height: 70px;}
.contc-info-c {margin-left: 30px;}.tp{color: #333;font-size: 3em;text-align: center;margin: 10px 0px 40px 0px;}
.contc-info-c h4 {color: #333;font-size: 3em;}
.contc-info-c p {color: #FFF;font-size: 2em;}}
@media only screen and (max-device-width : 1223px) and (orientation : landscape){/* feature Section */#feature .card-container .card {width: 40rem;height: 45rem;}
#feature .card-container .card .content h1 {font-size:3rem;}#feature .card-container .card .content p {font-size:2rem;}
/* Certificacion Section */#ctf {height: 100vh;}.column01 {float: left;padding:1%;width: 50%;}
/*About Section*/#about .image img {width: 40vw;}#about .content {width: 80vw;}
#about .content h1 {font-size: 4rem;}.text1 {font-size: 4rem;}#about .content p {font-size: 2.5rem;}
/* Contact Img Section */#contact .image img {width: 50vw;height:100vh; margin-top: 4rem;} }
/* media 620px */
@media (max-width: 620px) {header .fa-bars {display: block;}
  header nav {position: fixed; top: 0; left: -200%; height: 100vh;width: 60vw; background: #333; 
    -webkit-box-shadow: 25rem 0 0 rgba(0, 0, 0, 0.5);box-shadow: 25rem 0 0 rgba(0, 0, 0, 0.5);}
  header nav ul {height: 100%; -webkit-box-orient: vertical;-webkit-box-direction: normal; 
    -ms-flex-flow: column;flex-flow: column; -webkit-box-pack: center;-ms-flex-pack: center; justify-content: center;}
  header nav ul li {margin: 2rem 0;}  header nav ul li a {margin: 0; font-size: 4rem; color: #fff;}
  .active {color: #9c6;} header nav ul li a:hover {color: #fff;}
  .nav-toggle {left: 0;}
  /* home */
  #home h1 {font-size: 4.5rem;}
  #home h3 {font-size: 4rem;}
  #home .icons {left: 50%;-webkit-transform: translateX(-50%); transform: translateX(-50%);}
  /* home index1-4 */
  #homes h1 {font-size: 4.5rem;}
  #homes h3 {font-size: 4rem;}
  #homes .icons {left: 50%;-webkit-transform: translateX(-50%); transform: translateX(-50%);}}