html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Fira Sans', sans-serif;
    font-weight: 400;

}

hr{
  margin: 5px;
}


a:link,
a:active,
a:visited{
  color:rgba(255,255,255,1);
}

a:hover{
  color:rgba(255,255,255,0.6);
}


img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

.btn {
  background-color: #00E676;
  margin-top: 20px;
  border-radius: 1rem;
  padding: 0.5rem;
  text-transform: lowercase;
}

.btn--block {
  display: block;
  width: 100%;
}

/*-¡*/


.loading * {
  display: none;
}

.dots-loader:not(:required) {
  opacity: 1;
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -4px;
  margin-top: -4px;
  text-indent: -9999px;
  display: inline-block;
  width: 8px;
  height: 8px;
  background: transparent;
  border-radius: 4%;
  box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
  animation: dots-loader 5s infinite ease-in-out;
  transform-origin: 50% 50%;
  transform: scale(1);
  transition: .3s all;
}

@keyframes dots-loader {
  0% {
    box-shadow: #00E676 -14px -14px 0 7px, #01a956 14px -14px 0 7px, #6d7 14px 14px 0 7px, #2d2d2d -14px 14px 0 7px;
  }
  8.33% {
    box-shadow: #00E676 14px -14px 0 7px, #01a956 14px -14px 0 7px, #6d7 14px 14px 0 7px, #2d2d2d -14px 14px 0 7px;
  }
  16.67% {
    box-shadow:#00E676 14px 14px 0 7px, #01a956 14px 14px 0 7px, #6d7 14px 14px 0 7px, #2d2d2d -14px 14px 0 7px;
  }
  25% {
    box-shadow: #00E676 -14px 14px 0 7px, #01a956 -14px 14px 0 7px, #6d7 -14px 14px 0 7px, #2d2d2d -14px 14px 0 7px;
  }
  33.33% {
    box-shadow: #00E676 -14px -14px 0 7px, #01a956 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #2d2d2d -14px -14px 0 7px;
  }
  41.67% {
    box-shadow: #00E676 14px -14px 0 7px, #01a956 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #2d2d2d 14px -14px 0 7px;
  }
  50% {
    box-shadow: #00E676 14px 14px 0 7px, #01a956 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #2d2d2d 14px -14px 0 7px;
  }
  58.33% {
    box-shadow: #00E676 -14px 14px 0 7px,#01a956 -14px 14px 0 7px, #6d7 -14px -14px 0 7px,#2d2d2d 14px -14px 0 7px;
  }
  66.67% {
    box-shadow: #00E676 -14px -14px 0 7px, #01a956 -14px -14px 0 7px, #6d7 -14px -14px 0 7px, #2d2d2d 14px -14px 0 7px;
  }
  75% {
    box-shadow: #00E676 14px -14px 0 7px, #01a956 14px -14px 0 7px, #6d7 14px -14px 0 7px, #2d2d2d 14px -14px 0 7px;
  }
  83.33% {
    box-shadow: #00E676 14px 14px 0 7px, #01a956 14px -14px 0 7px, #6d7 14px 14px 0 7px, #2d2d2d 14px 14px 0 7px;
  }
  91.67% {
    box-shadow: #00E676 -14px 14px 0 7px, #01a956 14px -14px 0 7px, #6d7 14px 14px 0 7px, #2d2d2d -14px 14px 0 7px;
  }
  100% {
    box-shadow: #00E676 -14px -14px 0 7px, #01a956 14px -14px 0 7px, #6d7 14px 14px 0 7px, #2d2d2d -14px 14px 0 7px;
  }
}

.loaded .dots-loader {
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transform: scale(0);
}












.nav {
    width: 100%;
    height: 65px;
    position: fixed;
    line-height: 65px;
    text-align: center;
}

.nav div.logo {
    float: left;
    width: auto;
    height: auto;
    color: #00E676;
}

.nav div.logo a {
    text-decoration: none;
    color: #00E676;
    font-size: 2.5rem;
    font-family: 'Montserrat';
    font-weight: 900;
    font-style: italic;



}

.nav div.logo a:hover {
    color: #77ffbd;
}

.nav div.main_list {
    height: 65px;
    float: right;

}

.nav div.main_list ul {
    width: 100%;
    height: 65px;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Fira Sans', sans-serif;
    font-weight: 300;

}

.nav div.main_list ul li {
    width: auto;
    height: 65px;
    padding: 0;
    padding-right: 3rem;
}

.nav div.main_list ul li a {
    font-family: 'Fira Sans', sans-serif;
    text-decoration: none;
    color: #00E676;
    line-height: 65px;
    font-size: 1.4rem;
    font-weight: 300;
}

.nav div.main_list ul li a:hover {
    color: #77ffbd;
}


adding .wow {
  visibility: hidden;
  }



.navTrigger {
    display: none;
}

.nav {
    padding-top: 20px;
    padding-bottom: 20px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    z-index: 1001;
}

.logointro{
  margin-top: 250px;
}
/* Media qurey section */

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .container {
        margin: 0;
        padding-left: 100px;
    }
}

@media screen and (max-width:768px) {
    .navTrigger {
        display: block;
    }
    .nav div.main_list {
        width: 100%;
        height: 0;
        overflow: hidden;
    }
    .nav div.show_list {
        height: auto;
        display: none;
    }
    .nav div.main_list ul {
        flex-direction: column;
        width: 100%;
        height: 100vh;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: #2d2d2d;
        /*same background color of navbar*/
        background-position: center top;
    }
    .nav div.main_list ul li {
        width: 100%;
        text-align: right;
    }
    .nav div.main_list ul li a {
        text-align: center;
        width: 100%;
        font-size: 2rem;
        padding: 20px;
    }
    .nav div.media_button {
        display: block;
    }
}


/* Animation */


.navTrigger {
    cursor: pointer;
    width: 30px;
    height: 25px;
    margin: auto;
    position: absolute;
    right: 30px;
    top: 0;
    bottom: 0;
}

.navTrigger i {
    background-color: #fff;
    border-radius: 2px;
    content: '';
    display: block;
    width: 100%;
    height: 4px;
}

.navTrigger i:nth-child(1) {
    -webkit-animation: outT 0.8s backwards;
    animation: outT 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.navTrigger i:nth-child(2) {
    margin: 5px 0;
    -webkit-animation: outM 0.8s backwards;
    animation: outM 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.navTrigger i:nth-child(3) {
    -webkit-animation: outBtm 0.8s backwards;
    animation: outBtm 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.navTrigger.active i:nth-child(1) {
    -webkit-animation: inT 0.8s forwards;
    animation: inT 0.8s forwards;
}

.navTrigger.active i:nth-child(2) {
    -webkit-animation: inM 0.8s forwards;
    animation: inM 0.8s forwards;
}

.navTrigger.active i:nth-child(3) {
    -webkit-animation: inBtm 0.8s forwards;
    animation: inBtm 0.8s forwards;
}

@-webkit-keyframes inM {
    50% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(45deg);
    }
}

@keyframes inM {
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes outM {
    50% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(45deg);
    }
}

@keyframes outM {
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes inT {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(9px) rotate(135deg);
    }
}

@keyframes inT {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(9px) rotate(0deg);
    }
    100% {
        transform: translateY(9px) rotate(135deg);
    }
}

@-webkit-keyframes outT {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(9px) rotate(135deg);
    }
}

@keyframes outT {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(9px) rotate(0deg);
    }
    100% {
        transform: translateY(9px) rotate(135deg);
    }
}

@-webkit-keyframes inBtm {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(-9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(-9px) rotate(135deg);
    }
}

@keyframes inBtm {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-9px) rotate(0deg);
    }
    100% {
        transform: translateY(-9px) rotate(135deg);
    }
}

@-webkit-keyframes outBtm {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(-9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(-9px) rotate(135deg);
    }
}

@keyframes outBtm {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-9px) rotate(0deg);
    }
    100% {
        transform: translateY(-9px) rotate(135deg);
    }
}

.affix {
    padding: 0;
    background-color: #2d2d2d;
    position: fixed;
}


.myH2 {
	text-align:center;
	font-size: 4rem;
}
.myP {
	text-align: justify;
	padding-left:15%;
	padding-right:15%;
	font-size: 20px;
}
@media all and (max-width:700px){
	.myP {
		padding:2%;
	}
}
/*


/*1 Home
*********************************************************************/

#home {
    padding:150px 0;
background-image: linear-gradient(112.5deg, rgb(214, 214, 214) 0%, rgb(214, 214, 214) 10%,rgb(195, 195, 195) 10%, rgb(195, 195, 195) 53%,rgb(176, 176, 176) 53%, rgb(176, 176, 176) 55%,rgb(157, 157, 157) 55%, rgb(157, 157, 157) 60%,rgb(137, 137, 137) 60%, rgb(137, 137, 137) 88%,rgb(118, 118, 118) 88%, rgb(118, 118, 118) 91%,rgb(99, 99, 99) 91%, rgb(99, 99, 99) 100%),linear-gradient(157.5deg, rgb(214, 214, 214) 0%, rgb(214, 214, 214) 10%,rgb(195, 195, 195) 10%, rgb(195, 195, 195) 53%,rgb(176, 176, 176) 53%, rgb(176, 176, 176) 55%,rgb(157, 157, 157) 55%, rgb(157, 157, 157) 60%,rgb(137, 137, 137) 60%, rgb(137, 137, 137) 88%,rgb(118, 118, 118) 88%, rgb(118, 118, 118) 91%,rgb(99, 99, 99) 91%, rgb(99, 99, 99) 100%),linear-gradient(135deg, rgb(214, 214, 214) 0%, rgb(214, 214, 214) 10%,rgb(195, 195, 195) 10%, rgb(195, 195, 195) 53%,rgb(176, 176, 176) 53%, rgb(176, 176, 176) 55%,rgb(157, 157, 157) 55%, rgb(157, 157, 157) 60%,rgb(137, 137, 137) 60%, rgb(137, 137, 137) 88%,rgb(118, 118, 118) 88%, rgb(118, 118, 118) 91%,rgb(99, 99, 99) 91%, rgb(99, 99, 99) 100%),linear-gradient(90deg, rgb(195, 195, 195),rgb(228, 228, 228)); background-blend-mode:overlay,overlay,overlay,normal;
}

.estudiohome h1{
font-size: 5em;
line-height:1em;
color: #2d2d2d;
font-family: 'Fira Sans', sans-serif;
font-weight: 700;
}

.estudiohome h2{
font-size: 2em;
color: #00E676;
line-height: 1em;
font-family: 'Fira Sans', sans-serif;
font-weight: 300;
letter-spacing: -1px;
margin-bottom: 15px;
}


@media screen and (max-width: 680px) {

#home {
    padding: 150px 0;
}

.estudiohome h1 {
font-size: 2.9em;
padding: 15px 0;
}

.estudiohome{
position: relative;
top: 25%;
padding: 10px;
}


.diseñohome h2{
font-size: 1.4em;
margin-left: 0px;
padding: 10px 0;
color: #00E676;
font-weight:500;

}

.diseñohome{
margin: 0;
position: absolute;
left: 8%;

}



.logohome{
top: 17%;
position: relative;
margin-left: 250px;
z-index: 0;
width: 70%;

}

}





/* buttons */
#home  .button {
display: inline-block;
padding: 1em 2em;
min-width: 8em;
text-align: center;
font-weight: 900;
text-decoration: none;
border-radius: 0.5em;
margin-top: 20px;
position: relative;

box-shadow: 0 1px 1px rgba(0,0,0,0.25);

/* button theme - secondary is default */
background: #f0f0f0;
color: #2B2B2B;

-webkit-transition:
  all 0.2s ease-out 0.05s;
transition:
  all 0.2s ease-out 0.05s;
}
#home  .button ~ .button {
margin-left: 0.5em;
}
#home  .button:hover {
background: #2d2d2d;
}
/* primary button overrides */
#home  .button.primary {
background:#00E676;
color: #fff;
}
#home  .button.primary:hover {
background: #2d2d2d;
}

@media screen and (max-width: 680px){


  #home  .button {

    margin-top: 120px;
   
  }
   

}




/*2 Accordion
*********************************************************************/

.accordion h2{
     font-family: 'Fira Sans', sans-serif;
     font-weight: 300;
     color: #2d2d2d;
     background-color: #00E676;
     padding: 5px;
     text-align: right;

}
.accordion {
  width: 100%;
  height: 350px;
  overflow: hidden;
  margin: 0px auto;
}

.accordion ul {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin: 0;
  padding: 0;
}

.accordion ul li {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
  width: 16.666%;
  height: 350px;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 500ms ease-in-out;
}

.accordion ul li div {
  display: block;
  overflow: hidden;
  width: 100%;

}

.accordion ul li div a {
  display: block;
  height: 350px;
  width: 100%;
  position: relative;
  z-index: 3;
  padding: 15px 20px;
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  transition: all 300ms ease-in-out;
}

.accordion ul li div a * {
  opacity: 0;
  margin: 0;
  width: 100%;
  text-overflow: ellipsis;
  position: relative;
  z-index: 5;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  margin-top: 70px;
}
.accordion ul li div a h2 {
font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  text-overflow: clip;
  font-size: 26px;
  margin-bottom: 2px;
  top: 160px;
}

.accordion ul li div a p {
  top: 160px;
  font-size: 18px;
  padding-left: 1em;
}

.accordion ul li:nth-child(1) {
  background-image: url('../images/jorgemockup.jpg');
  background-position: 51% 50%;
}

.accordion ul li:nth-child(2) {
  background-image: url('../images/ryhmockup2.png');
  background-position: 51% 50%;
}

.accordion ul li:nth-child(3) {
  background-image: url('../images/etmockup.jpg');
  background-position: 50% 50%;
}


.accordion ul li { background-size: cover; }
.accordion ul:hover li { width: 10%; }
.accordion ul:hover li:hover { width: 15%; }

/*.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); }*/

.accordion ul:hover li:hover a * {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
 @media screen and (max-width: 680px) {

  body { margin: 0; }
  .accordion { height: auto; }

  .accordion ul li,
  .accordion ul li:hover,
  .accordion ul:hover li,
  .accordion ul:hover li:hover {
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
    -webkit-transition: none;
    transition: none;
  }
  .accordion ul li div a * {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}


/*2 Accordion2
*********************************************************************/


.accordion2 h2{
     font-family: 'Fira Sans', sans-serif;
     font-weight: 300;
     color: #2d2d2d;
     background-color: #00E676;
     padding: 5px;
     text-align: right;

}
.accordion2 {
  width: 100%;
  height: 350px;
  overflow: hidden;
  margin: 0px auto;
}

.accordion2 ul {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin: 0;
  padding: 0;
}

.accordion2 ul li {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
  width: 16.666%;
  height: 350px;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 500ms ease-in-out;
}

.accordion2 ul li div {
  display: block;
  overflow: hidden;
  width: 100%;

}

.accordion2 ul li div a {
  display: block;
  height: 350px;
  width: 100%;
  position: relative;
  z-index: 3;
  padding: 15px 20px;
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
 font-family: 'Fira Sans', sans-serif;
 font-weight: 300;
  transition: all 300ms ease-in-out;
}

.accordion2 ul li div a * {
  opacity: 0;
  margin: 0;
  width: 100%;
  text-overflow: ellipsis;
  position: relative;
  z-index: 5;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  margin-top: 70px;
}
.accordion2 ul li div a h2 {
 font-family: 'Fira Sans', sans-serif;
 font-weight: 300;
  text-overflow: clip;
  font-size: 26px;
  margin-bottom: 2px;
  top: 160px;
}

.accordion2 ul li div a p {
  top: 160px;
  font-size: 18px;
  padding-left: 1em;
}

.accordion2 ul li:nth-child(1) {
  background-image: url('../images/sdwork.jpg');
  background-position: 51% 50%;
}

.accordion2 ul li:nth-child(2) {
  background-image: url('../images/sgwork.jpg');
  background-position: 51% 50%;
}

.accordion2 ul li:nth-child(3) {
  background-image: url('../images/campuswork.png');
  background-position: 50% 50%;
}


.accordion2 ul li { background-size: cover; }
.accordion2 ul:hover li { width: 10%; }
.accordion2 ul:hover li:hover { width: 15%; }

/*.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); }*/

.accordion2 ul:hover li:hover a * {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
 @media screen and (max-width: 680px) {

  body { margin: 0; }
  .accordion2 { height: auto; }

  .accordion2 ul li,
  .accordion2 ul li:hover,
  .accordion2 ul:hover li,
  .accordion2 ul:hover li:hover {
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
    -webkit-transition: none;
    transition: none;
  }
  .accordion2 ul li div a * {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}


/*2 Accordion 3
*********************************************************************/


.accordion3 h2{
     font-family: 'Fira Sans', sans-serif;
     font-weight: 300;
     color: #2d2d2d;
     background-color: #00E676;
     padding: 5px;
     text-align: right;

}
.accordion3 {
  width: 100%;
  height: 350px;
  overflow: hidden;
  margin: 0px auto;
}

.accordion3 ul {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin: 0;
  padding: 0;
}

.accordion3 ul li {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
  width: 16.666%;
  height: 350px;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 500ms ease-in-out;
}

.accordion3 ul li div {
  display: block;
  overflow: hidden;
  width: 100%;

}

.accordion3 ul li div a {
  display: block;
  height: 350px;
  width: 100%;
  position: relative;
  z-index: 3;
  padding: 15px 20px;
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
 font-family: 'Fira Sans', sans-serif;
 font-weight: 300;
  transition: all 300ms ease-in-out;
}

.accordion3 ul li div a * {
  opacity: 0;
  margin: 0;
  width: 100%;
  text-overflow: ellipsis;
  position: relative;
  z-index: 5;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  margin-top: 70px;
}
.accordion3 ul li div a h2 {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  text-overflow: clip;
  font-size: 26px;
  margin-bottom: 2px;
  top: 160px;
}

.accordion3 ul li div a p {
  top: 160px;
  font-size: 18px;
  padding-left: 1em;
}

.accordion3 ul li:nth-child(1) {
  background-image: url('../images/cuatro.jpg');
  background-position: 51% 50%;
}

.accordion3 ul li:nth-child(2) {
  background-image: url('../images/seis.jpg');
  background-position: 51% 50%;
}

.accordion3 ul li:nth-child(3) {
  background-image: url('../images/incamockup.jpg');
  background-position: 50% 50%;
}


.accordion3 ul li { background-size: cover; }
.accordion3 ul:hover li { width: 10%; }
.accordion3 ul:hover li:hover { width: 15%; }

/*.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); }*/

.accordion3 ul:hover li:hover a * {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
 @media screen and (max-width: 680px) {

  body { margin: 0; }
  .accordion3 { height: auto; }

  .accordion3 ul li,
  .accordion3 ul li:hover,
  .accordion3 ul:hover li,
  .accordion3 ul:hover li:hover {
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
    -webkit-transition: none;
    transition: none;
  }
  .accordion3 ul li div a * {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}


/*2 Accordion 3
*********************************************************************/


.accordion4 h2{
     font-family: 'Fira Sans', sans-serif;
     font-weight: 300;
     color: #2d2d2d;
     background-color: #00E676;
     padding: 5px;
     text-align: right;

}
.accordion4 {
  width: 100%;
  height: 350px;
  overflow: hidden;
  margin: 0px auto;
}

.accordion4 ul {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin: 0;
  padding: 0;
}

.accordion4 ul li {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
  width: 16.666%;
  height: 350px;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 500ms ease-in-out;
}

.accordion4 ul li div {
  display: block;
  overflow: hidden;
  width: 100%;

}

.accordion4 ul li div a {
  display: block;
  height: 350px;
  width: 100%;
  position: relative;
  z-index: 3;
  padding: 15px 20px;
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  transition: all 300ms ease-in-out;
}

.accordion4 ul li div a * {
  opacity: 0;
  margin: 0;
  width: 100%;
  text-overflow: ellipsis;
  position: relative;
  z-index: 5;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  margin-top: 70px;
}
.accordion4 ul li div a h2 {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  text-overflow: clip;
  font-size: 26px;
  margin-bottom: 2px;
  top: 160px;
}

.accordion4 ul li div a p {
  top: 160px;
  font-size: 18px;
  padding-left: 1em;
}

.accordion4 ul li:nth-child(1) {
  background-image: url('../images/sanmockup2.png');
  background-position: 51% 50%;
}

.accordion4 ul li:nth-child(2) {
  background-image: url('../images/digimockup.png');
  background-position: 51% 50%;
}

.accordion4 ul li:nth-child(3) {
  background-image: url('../images/ochomock.png');
  background-position: 50% 50%;
}


.accordion4 ul li { background-size: cover; }
.accordion4 ul:hover li { width: 10%; }
.accordion4 ul:hover li:hover { width: 15%; }

/*.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); }*/

.accordion4 ul:hover li:hover a * {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
 @media screen and (max-width: 680px) {

  body { margin: 0; }
  .accordion4 { height: auto; }

  .accordion4 ul li,
  .accordion4 ul li:hover,
  .accordion4 ul:hover li,
  .accordion4 ul:hover li:hover {
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
    -webkit-transition: none;
    transition: none;
  }
  .accordion4 ul li div a * {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}



/*3 Tu identidad Visual
*********************************************************************/


/* buttons */
#nueva .button-group {
  margin-top:0em;
}
#nueva .button {
  display: inline-block;
  padding: 1em 1em;
  min-width: 8em;
  text-align: center;
  font-weight: 900;
  text-decoration: none;
  border-radius: 0.5em;
  margin-top: 30px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.25);
  font-size: 0.9em;

  /* button theme - secondary is default */
  background: #f0f0f0;
  color: #2B2B2B;

  -webkit-transition:
		all 0.2s ease-out 0.05s;
	transition:
		all 0.2s ease-out 0.05s;
}
#nueva .button ~ .button {
  margin-left: 0.5em;
}
#nueva .button:hover {
  background: #2d2d2d;
}
/* primary button overrides */
#nueva .button.primary {
  background:#00E676;
  color: #fff;
  margin-bottom: 20px;
}
#nueva .button.primary:hover {
  background: #2d2d2d;
}




#nueva{
  width: 100%;
  /*background-image: url(../images/fondo2.svg);*/
  background-position: center top;
  background-size:cover;
  margin-bottom: -1px;
  padding:3rem 1rem;
}

#nueva h1{
  margin-left: 0px;
  margin-bottom: 20px;
  font-size: 3.25em;
  letter-spacing: -2px;
  color: #2d2d2d;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 700;

}

#nueva p{
  font-family: 'Fira Sans', sans-serif;
  font-weight:300;
  color: #636363;
  font-size: 1em;
  line-height: 1.5em;
  letter-spacing: -1px;
  padding-left: 0;
}


@media screen and (max-width: 680px) {


#nueva h1{
  margin-top: 0;
  margin-left: 0px;
  padding: 20px;
}


#nueva h1{
  font-size: 2.2em;
  margin-right: 20px;
  padding: 10px;
  margin-top: 0px;

}
}

#nueva h4{
  font-family: 'Fira Sans', sans-serif;
  font-weight: 400;
  margin: 0;
  color: #00E676;
  font-size: 18px;

}



.imagentext{
position: relative;
  z-index: 0;
  margin-top: 30px;
}

.textescritos{
  margin-top: 102px;
}




/*4 Testimonial
*********************************************************************/


.testimonial-section {
  background: #f1f1f1;
  padding: 40px 0;
  text-align: center;
  padding-bottom: 0px;
}

.inner-width{
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

.testimonial-section h1 {
  color: #2d2d2d;
  letter-spacing: 10px;
  text-transform: uppercase;
  font-size: 20px;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 700;
  font-style: italic;
}

.testimonial-pics {
  padding: 20px 0;
}

@media screen and (max-width: 680px) {
  .testimonial-pics {
    padding: 20px 0;

  }
 }

.testimonial-pics img {
  width: auto;
  height: 115px;;

  margin: 0 20px;
  filter: grayscale(100%);
  transition: .3s;
  cursor: pointer;
}

.testimonial-pics img:hover, .testimonial-pics img.active {
  filter: none;
}


.testimonial-contents {
  max-width: 600px;
  margin: auto;
}

.testimonial {
  display: none;
}

.testimonial.active {
  display: block;
}

.testimonial p {
  color: #5c5c5c;
  margin-bottom: 20px;
}

.testimonial .description {
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 15px;
}


/*5 Design
*********************************************************************/


#designweb{
  margin-top: 0px;
  margin-bottom: 70px;
  width: 100%;
  background-image: url(../images/.svg);
  background-size: cover;
}

#designweb picture{
  position: relative;
  left: 20%;
}


@media screen and (max-width: 680px) {

#designweb {
  margin-top: 30px;
  margin-bottom: -40px;
 }

 #designweb picture{
  position: relative;
  left: 0%;
}

}

 .embed-responsive-item{
   margin: 0px;
 }


.contentdw {
  display: block;

  max-width: 40rem;

  padding: 1.5rem;

}
@media (min-width: 641px) {
  .contentdw {
    padding: 0 2.5rem 2.5rem 2.5rem;
  }
}


.contentdw p {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 400;
  color: #00E676;
  font-size: 1.2em;
  line-height: 1.5em;
  letter-spacing: -1px;
  padding-left: 0;
  position: relative;
  left: 35%;
  text-align: right;
  top: 150px;
  padding-left: 50px;
}

.contentdw h1 {
  font-size: 3em;
  line-height: 1em;
  font-size: 3.25em;
  letter-spacing: -2px;
  color: #2d2d2d;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 700;
  font-style: italic;
  position: relative;
  left: 70%;
  top: 120px;

}


@media screen and (max-width: 680px) {
  .contentdw h1 {
    font-size: 2em;
    right: 0%;
    left: 0%;
    top: 30px;
    text-align: end;
  
  }

  .contentdw p {
    
    position: relative;
    left: 0%;
    text-align: right;
    padding-left: 50px;
    top: 50px;
  }


}

.contentdw h2 {
  font-size: 1em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.155em;
  margin-top: 3em;
}

/* buttons */
.contentdw .button-group {
  margin-top:1em;
}
.contentdw .button {
  display: inline-block;
  padding: 1em 2em;
  min-width: 8em;
  text-align: center;
  font-weight: 900;
  text-decoration: none;
  border-radius: 0.5em;
  margin-top: 30px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.25);
  position: relative;
  top: 150px;
  left: 30%;

  /* button theme - secondary is default */
  background: #f0f0f0;
  color: #2B2B2B;

  -webkit-transition:
		all 0.2s ease-out 0.05s;
	transition:
		all 0.2s ease-out 0.05s;
}

@media screen and (max-width: 680px){

  .contentdw .button{
    left: 0%;
    top: 50px;

  }


}


.contentdw .button ~ .button {
  margin-left: 0.5em;
}
.contentdw .button:hover {
  background: #2d2d2d;
}
/* primary button overrides */
.contentdw .button.primary {
  background:#00E676;
  color: #fff;
}
.contentdw .button.primary:hover {
  background: #2d2d2d;
}





/*5 Audiovisuales
*********************************************************************/


#audiovisuales{
  margin-top: 85px;
  margin-bottom: 70px;
}

@media screen and (max-width: 680px) {

#audiovisuales {
  margin-top: 30px;
  margin-bottom: -40px;
 }
}

 .embed-responsive-item{
   margin: 0px;
 }

.content {
  display: block;

  max-width: 40rem;

  padding: 1.5rem;

}
@media (min-width: 641px) {
  .content {


    padding: 0 2.5rem 2.5rem 2.5rem;
  }
}


.content p {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 400;
  color: #00E676;
  font-size: 1.2em;
  line-height: 1.5em;
  letter-spacing: -1px;
  padding-left: 0;
}
.content h1 {
  font-size: 3em;
  line-height: 1em;
  font-size: 3.25em;
  letter-spacing: -2px;
  color: #2d2d2d;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 700;
  font-style: italic;
  position: relative;
  right: 86%;
}


@media screen and (max-width: 680px) {
  .content h1 {
    font-size: 2em;
    right: 0%;
  }


}
.content h2 {
  font-size: 1em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.155em;

  margin-top: 3em;
}

/* buttons */
.content .button-group {
  margin-top:1em;
}
.content .button {
  display: inline-block;
  padding: 1em 2em;
  min-width: 8em;
  text-align: center;
  font-weight: 900;
  text-decoration: none;
  border-radius: 0.5em;
  margin-top: 30px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.25);

  /* button theme - secondary is default */
  background: #f0f0f0;
  color: #2B2B2B;

  -webkit-transition:
		all 0.2s ease-out 0.05s;
	transition:
		all 0.2s ease-out 0.05s;
}
.content .button ~ .button {
  margin-left: 0.5em;
}
.content .button:hover {
  background: #2d2d2d;
}
/* primary button overrides */
.content .button.primary {
  background:#00E676;
  color: #fff;
}
.content .button.primary:hover {
  background: #2d2d2d;
}






/*6 Team
*********************************************************************/

.team{

  font-family: 'Montserrat' ;
  font-weight:200;
}

@media screen and (max-width: 680px) {

.team {
  margin-top: 100px;
  font-family: 'Montserrat' ;
  font-weight:200;

 }
}

.team-member {
  margin: 15px 0;
  padding: 0;
}

.team-member figure {
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.team-member figure img {
  min-width: 100%;
}

.team-member figcaption p {
  font-size: 16px;
}

.team-member figcaption ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.team-member figcaption ul {
  visibility: visible;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

.team-member figcaption ul li {
  display: inline-block;
  padding: 10px;
}

.team-member h4 {
  margin: 10px 0 0;
  padding: 0;
  color: #2d2d2d;
}

.team-member figcaption {
  padding: 50px;
  color: transparent;
  background-color: transparent;
  position: absolute;
  z-index: 996;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.team-member figure:hover figcaption {
  visibility: visible;
  color: #fff;
  background: #00E676;
  opacity: 0.8;
  /* Primary color, can be changed via colors.css */

  height: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.team-member figure:hover figcaption ul li a:hover {
  color: rgba(49, 49, 49, .97);
}

.team-member figure img {
  -webkit-transform: scale(1) rotate(0) translateY(0);
  -moz-transform: scale(1) rotate(0) translateY(0);
  -o-transform: scale(1) rotate(0) translateY(0);
  -ms-transform: scale(1) rotate(0) translateY(0);
  transform: scale(1) rotate(0) translateY(0);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  
}

.team-member figure:hover img {
  -webkit-transform: scale(1.1) rotate(1deg) translateY(12px);
  -moz-transform: scale(1.1) rotate(1deg) translateY(12px);
  -o-transform: scale(1.1) rotate(1deg) translateY(12px);
  -ms-transform: scale(1.1) rotate(1deg) translateY(12px);
  transform: scale(1.1) rotate(1deg) translateY(12px);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  border-radius: 20px 0;
}


@media screen and (max-width: 680px) {

  #team h1 {
    margin-top: 0;
   }
  }
  
  #team .container{
  
    padding: 0;
  }
  
  #team h1 {
      font-size: 3em;
      line-height: 1em;
      font-size: 3.25em;
      letter-spacing: -2px;
      color: #2d2d2d;
      font-family: 'Montserrat' ;
      font-weight: 900;
      font-style: italic;
    }
  
   #team h2{
      font-size: 1.3em;
      line-height: 1em;
      color: #2d2d2d;
      font-family: 'Montserrat';
      font-weight: 900;
      font-style: italic;
      text-transform: uppercase;
      text-align: left;
      margin-top: 20px;
    
    }
  
  
    @media screen and (max-width: 680px) {
  #team h1 {
        font-size: 2em;
      }
  
  
    }
  
  


/*7 Service
*********************************************************************/

#service {
    width: 100%;
    background-image: url(../images/fondoservice.svg);
    background-position: top;
    background-size:cover;
    margin: 0;
    margin-top: 50px;
    padding: 1rem;

}


#service .container-fluid {
margin: 15px;
}




.textoservice h1 {
  font-size: 3.25em;
  margin-left: 0px;
  margin-bottom: 20px;
  margin-top: 100px;
  letter-spacing: -2px;
  color: #2d2d2d;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 700;

}

#service h1 {
  font-size: 3.25em;
  margin-left: 0px;
  margin-bottom: 20px;
  margin-top: 100px;
  letter-spacing: -2px;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 700;

}

.servicetxt h2{
  font-size: 1.1em;
  line-height: 1em;
  color: #2d2d2d;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  text-align: left;

}



#service figure{
  margin-bottom: 30px;
}

.cuadrado1{
  background-color: #00E676;
  text-align: left;
  height: 20px;
  margin-bottom: 10px;
  margin-top: 20px;
  }
  

.cuadrado1:hover {
    background-color: #2d2d2d;
    height: 30px;
    margin-bottom: 20px;
    transition: all 0.2s ease-out;
   }
.cuadrado2{
  background-color: #26de84;
  height: 20px;
  margin-bottom: 10px;
  margin-top: 20px;
  }
  

  .cuadrado2:hover {
    background-color: #2d2d2d;
    height: 30px;
    margin-bottom: 20px;
    transition: all 0.2s ease-out;
   }
  

    .cuadrado3{
      background-color: #50cf91;
      text-align: left;
      height: 20px;
      margin-bottom: 10px;
      margin-top: 20px;
  }
        
        .cuadrado3:hover {
          background-color: #2d2d2d;
          height: 30px;
          margin-bottom: 20px;
          transition: all 0.2s ease-out;
         }

        
    .cuadrado4{
      background-color: #6abd94;
      text-align: left;
      height: 20px;
      margin-bottom: 10px;
      margin-top: 20px;
  }
        
        .cuadrado4:hover {
          background-color: #2d2d2d;
          height: 30px;
          margin-bottom: 20px;
          transition: all 0.2s ease-out;
         }



#service h3{
  font-family: 'Fira Sans', sans-serif;
  font-weight:300;
  font-size: 1.75rem;
  margin: 0;
  color: #00E676;

}

#service p{
  font-family: 'Fira Sans', sans-serif;
  font-weight:300;
  font-size: 0.9em;
  line-height: 1.5em;
  padding-left: 0;
  color: #2d2d2d;
  text-align: left;
}


 #service h3{
   font-family: 'Fira Sans', sans-serif;
   font-weight:300;
   font-size: 1.5rem;
  margin-left: 10px;
  padding: 10px;
   text-align: center;
   color: #00E676;

 }

 @media screen and (max-width: 680px) {

  #service{
    margin-top: 10px;
  }
   #service h3{
     text-align: left;

      }

      #service h1 {
        font-size: 2em;
        margin-top: 110px;
    }

#service p{
  font-family: 'Fira Sans', sans-serif;
  font-weight:300;
  font-size: 1em;
  line-height: 1.5em;
  padding-left: 0;
  color: #2d2d2d;
  text-align: left;
}


#service h3{
 
  font-size: 1.2rem;


}

}


/* buttons */
#service .button-group {
  margin-top:1em;
}
#service  .button {
  display: inline-block;
  padding: 1em 1em;
  min-width: 8em;
  text-align: center;
  font-weight: 900;
  text-decoration: none;
  border-radius: 0.5em;
  margin-top: 60px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.25);

  /* button theme - secondary is default */
  background: #f0f0f0;
  color: #2B2B2B;

  -webkit-transition:
		all 0.2s ease-out 0.05s;
	transition:
		all 0.2s ease-out 0.05s;
}
#service .button ~ .button {
  margin-left: 0.5em;
}
#service  .button:hover {
  background: #2d2d2d;
}
/* primary button overrides */
#service  .button.primary {
  background:#00E676;
  color: #fff;
}
#service  .button.primary:hover {
  background: #2d2d2d;
}





  
/*8 workflor
*********************************************************************/


#workflor{
  margin-left: 0;
    width: 100%;
  background-image: url(../images/fondoflujo.svg);
  background-position: center top;
background-size:cover;
margin-top: -5;
margin-bottom: 0;
}

#workflor h1 {
  font-size: 3.25em;
  margin-left: 0px;
  margin-bottom: 20px;
  letter-spacing: -2px;
  margin-top: 100px;
  color: #f1f1f1;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 700;
  font-style: italic;



}



@media screen and (max-width: 680px) {

#workflor h1 {
  font-size: 2em;
  margin-top: 6.2em;
 }
}




/*9 Contact
*********************************************************************/

/* buttons */
#contacto .button-group {
  margin-top:6em;
}
#contacto .button {
  display: inline-block;
  padding: 1em 2em;
  min-width: 8em;
  text-align: center;
  font-weight: 900;
  text-decoration: none;
  border-radius: 0.5em;
  box-shadow: 0 1px 1px rgba(0,0,0,0.25);
  border: none;

  /* button theme - secondary is default */
  background: #f0f0f0;
  color: #2B2B2B;

  -webkit-transition:
		all 0.2s ease-out 0.05s;
	transition:
		all 0.2s ease-out 0.05s;
}
#contacto .button ~ .button {
  margin-left: 0.5em;
}
#contacto  .button:hover {
  background: #2d2d2d;
}
/* primary button overrides */
#contacto .button.primary {
  background:#00E676;
  color: #fff;
}
#contacto .button.primary:hover {
  background: #2d2d2d;
}

#contacto .button.primary:disabled {
    opacity: 0.7;
    background: #ccc;
    color:#555;
    cursor: default;
}



#contacto .fa{
  color: #00E676;
  margin-bottom: 10px;
}

#contacto .fa:hover{
  color: #2d2d2d;
}

.contact-form {
   background:none;
   border: 1px solid black;
   z-index:110;
   position:relative;
   margin-top:-25px;
   padding:20px;
}
.contact-form h3 {

   padding-bottom:20px;
}
.message-btn {
   border:1px solid #747C89;
   background-color:none;
   padding:15px 30px;
   font-size:17px;
}
.message-btn:hover {
   background-color:none;
}
.contact-info {
   text-align:center;
   font-size:22px;
}
.info-mail {
   border:1px solid rgba(0, 0, 0, 0.9);
   width:60%;
   margin:0 auto;
   margin-bottom: 15px;
   padding:15px;
   color:black;
}

.control-group{
 padding-bottom: 10px;
}
.controls{
 padding-bottom: 10px;
}


.form-control {
   display: block;
   width: 100%;
   height: 35px;
   padding: 6px 12px;
   font-size: 14px;
   line-height: 1.5;
   color: black;
   background-color: #dddddd;
   background-image: none;

   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-control:focus {
   color: #222;
   background-color: #ccc;
   box-shadow: none;
}

textarea {
   resize: none;

}

.credits{
 color: #FFF;
}

.span12{
background-color: transparent;
border: 1px solid black;
padding: 10px;
}



#contacto{
  width: 100%;
  background-image: url(../images/fondocontact.svg);
  background-position: top;
  background-size:cover;
  margin: 0;
  margin-top: -10px;
  padding-bottom: 10px;

}




#contacto h3{
font-family: 'Fira Sans', sans-serif;
font-weight:300;
margin: 0;
color: #2d2d2d;

}

#contacto h1 {
font-size: 3.25em;
margin-left: 0px;
margin-bottom: 20px;
letter-spacing: -2px;
margin-top: 300px;
color: #2d2d2d;
font-family: 'Fira Sans', sans-serif;
font-weight: 700;
position: relative;
right: 150px;

}

.redesc li{
display: block;

}

@media screen and (max-width: 680px) {

#contacto h1 {
font-size: 2em;
margin-top: 250px;
right: 0px;

}

.redesc{
 display: -webkit-inline-box;
 margin-bottom: 50px;
 margin-left: 5px;
}


.redesc li{
margin: 5px;

}
}

#contacto h3{
font-family: 'Fira Sans', sans-serif;
font-weight:300;
margin: 0;
color: #2d2d2d;
font-size: 1.5rem;
line-height: 1.5rem;
margin-bottom: 15px;

}






/*10 Footer
*********************************************************************/

#footer {
   font-family: 'Fira Sans', sans-serif;
   background: #2d2d2d;
   text-align: center;
   height: 160px;
   margin-top: -5px;
}
#footer > p {
   color: #fff;
   margin:0;

}

#footer a{
   color:#00E676;
}


.logofooter{
  position: relative;
  left: 0%;
  margin-top: -1px;
}

@media(max-width:768px){
  .logofooter{
    max-width:148px;
    position: relative;
    left:25%;
    margin-top: -1px;
  }
  
  
}
.credits{
 margin-top: 30px;
 position: relative;
 right: 5%;
 
}

.textfooter{
 padding-top: 40px;
}

.footer a:hover, .footer a:focus{
   text-decoration: underline;
}
.scrollup {
   text-align:center;
   cursor:pointer;
   vertical-align:middle;
   width:39px;
   height:39px;
   border-radius:5px;
   font-size:20px;
   position:fixed;
   bottom:30px;
   right:20px;
 border:1px solid black;
   display:none;
   background: #00E676;
}
.scrollup > a {
   position:relative;
   top:7px;
   color:black;
}


/* JORGE GOYENECHE */


#headjorge {
  width: 100%;
  background-image: url(../images/jorge/jorgehead.png);
  background-position: center top;
  background-size:cover;
  height: 300px;
}

.titjorge h1{
  font-size: 4.5em;
  line-height:1em;
  color: #6E74B5;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 700;
  position: relative;
  bottom: 50px;
  }


    

  #infowork {
    position: relative;
    padding-bottom: 100px;
  }

 #infowork p{
    font-family: 'Fira Sans', sans-serif;
    position: relative;
    top: 100px;
  }

  #imageswork{
    padding-bottom: 80px;
  }

  #imageswork a{
  color: rgb(25, 125, 192);
  font-weight: 700;
  }

#imageswork .button-group {
  margin-top:6em;
  }
  #imageswork   .button {
  display: inline-block;
  padding: 1em 2em;
  min-width: 8em;
  text-align: center;
  font-weight: 900;
  text-decoration: none;
  border-radius: 0.5em;
  position: relative;
  
  box-shadow: 0 1px 1px rgba(0,0,0,0.25);
  
  /* button theme - secondary is default */
  background: #f0f0f0;
  color: #2B2B2B;
  
  -webkit-transition:
    all 0.2s ease-out 0.05s;
  transition:
    all 0.2s ease-out 0.05s;
  }
  #imageswork   .button ~ .button {
  margin-left: 0.5em;
  }
  #imageswork   .button:hover {
  background: #2d2d2d;
  }
  /* primary button overrides */
  #imageswork   .button.primary {
  background:#00E676;
  color: #fff;
  }
  #imageswork   .button.primary:hover {
  background: #2d2d2d;
  }
  
    /* secondary button overrides */
  #imageswork   .button.secondary {
  background:#fff;
  border:2px solid #212529;
  color: #212529;
  margin:20px 0;
  font-weight:500;
  }
  #imageswork   .button.secondary:hover {
  background: #00E676;
  border:2px solid #00E676;
  color: #fff;
  font-weight: 700;
  }
  
  @media screen and (max-width: 680px){
  
  
    #imageswork  .button {
  
      margin-top: 80px;
     
    }
     
  
  }


/* R&H */

html#ryh .nav div.logo a {
  text-decoration: none;
  color: #FFF;
  font-size: 2.5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-style: italic;
}

html#ryh .nav div.main_list ul li a {
  font-family: 'Fira Sans', sans-serif;
  text-decoration: none;
  color: #FFF;
  line-height: 65px;
  font-size: 1.4rem;
  font-weight: 200;
}

#headryh {
  width: 100%;
  background-image: url(../images/ryh/ryhhead.png);
  background-position: center top;
  background-size:cover;
  height: 300px;
}

.titryh h1{
  font-size: 4.5em;
  line-height:1em;
  color:#ff8300;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 700;
  position: relative;
  bottom: 50px;
  }

  #infowork {
    position: relative;
    padding-bottom: 100px;
  }

 #infowork p{
    font-family: 'Fira Sans', sans-serif;
    position: relative;
    top: 100px;
  }

  #imageswork{
    padding-bottom: 80px;
  }

  #imageswork a{
  color: rgb(25, 125, 192);
  font-weight: 700;
  }

#imageswork .button-group {
  margin-top:6em;
  }
  #imageswork   .button {
  display: inline-block;
  padding: 1em 2em;
  min-width: 8em;
  text-align: center;
  font-weight: 900;
  text-decoration: none;
  border-radius: 0.5em;
  position: relative;
  box-shadow: 0 1px 1px rgba(0,0,0,0.25);
  }


  
/* ENGLISHTIME */

html#englishtime .nav div.logo a {
  text-decoration: none;
  color: #FFF;
  font-size: 2.5rem;
  font-family: 'Montserrat';
  font-weight: 900;
}

html#englishtime .nav div.main_list ul li a {
  font-family: 'Fira Sans', sans-serif;
  text-decoration: none;
  color: #FFF;
  line-height: 65px;
  font-size: 1.4rem;
  font-weight: 300;
}

#headenglish {
  width: 100%;
  background-image: url(../images/english/englishhead.png);
  background-position: center top;
  background-size:cover;
  height: 300px;
}

.titenglish h1{
  font-size: 4.5em;
  line-height:1em;
  color:#dc3545;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 700;
  position: relative;
  bottom: 50px;
  }

  #infowork {
    position: relative;
    padding-bottom: 100px;
  }

 #infowork p{
    font-family: 'Fira Sans', sans-serif;
    position: relative;
    top: 100px;
  }

  #imageswork{
    padding-bottom: 80px;
  }

  #imageswork a{
  color: rgb(25, 125, 192);
  font-weight: 700;
  }


  /* SANSERBEN */

html#sanserben .nav div.logo a {
  text-decoration: none;
  color: #FFF;
  font-size: 2.5rem;
  font-family: 'Montserrat';
  font-weight: 900;
  font-style: italic;
}

html#sanserben .nav div.main_list ul li a {
  font-family: 'Fira Sans', sans-serif;
  text-decoration: none;
  color: #FFF;
  line-height: 65px;
  font-size: 1.4rem;
  font-weight: 200;
}

#headsan {
  width: 100%;
  background-image: url(../images/sanserben/sanhead.png);
  background-position: center top;
  background-size:cover;
  height: 300px;
}

.titsan h1{
  font-size: 4.5em;
  line-height:1em;
  color:#242424;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 700;
  position: relative;
  bottom: 50px;
  }

  #infowork {
    position: relative;
    padding-bottom: 100px;
  }

 #infowork p{
    font-family: 'Fira Sans', sans-serif;
    position: relative;
    top: 100px;
  }

  #imageswork{
    padding-bottom: 80px;
  }

  #imageswork a{
  color: rgb(25, 125, 192);
  font-weight: 700;
  }

  

  
  /* DIGIDOCUMENT */

html#digidocument .nav div.logo a {
  text-decoration: none;
  color: #FFF;
  font-size: 2.5rem;
  font-family: 'Montserrat';
  font-weight: 900;
  font-style: italic;
}

html#digidocument .nav div.main_list ul li a {
  font-family: 'Fira Sans', sans-serif;
  text-decoration: none;
  color: #FFF;
  line-height: 65px;
  font-size: 1.4rem;
  font-weight: 300;
}

#headigi {
  width: 100%;
  background-image: url(../images/digidocument/headdigi.png);
  background-position: center top;
  background-size:cover;
  height: 300px;
}

.titdigi h1{
  font-size: 4.5em;
  line-height:1em;
  color:#05DCFF;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 700;
  position: relative;
  bottom: 50px;
  }

  #infowork {
    position: relative;
    padding-bottom: 100px;
  }

 #infowork p{
    font-family: 'Fira Sans', sans-serif;
    position: relative;
    top: 100px;
  }

  #imageswork{
    padding-bottom: 80px;
  }

  #imageswork a{
  color: rgb(25, 125, 192);
  font-weight: 700;
  }




  /* OCHO */

  html#ocho .nav div.logo a {
    text-decoration: none;
    color: #FFF;
    font-size: 2.5rem;
    font-family: 'Montserrat';
    font-weight: 900;
    font-style: italic;
  }
  
  html#ocho .nav div.main_list ul li a {
    font-family: 'Fira Sans', sans-serif;
    text-decoration: none;
    color: #FFF;
    line-height: 65px;
    font-size: 1.4rem;
    font-weight: 300;
  }
  
  #headocho {
    width: 100%;
    background-image: url(../images/ocho/headocho.png);
    background-position: center top;
    background-size:cover;
    height: 300px;
  }
  
  .titocho h1{
    font-size: 4.5em;
    line-height:1em;
    color:#F6454B;
    font-family: 'Fira Sans', sans-serif;
    font-weight: 700;
    position: relative;
    bottom: 50px;
    }
  
    #infowork {
      position: relative;
      padding-bottom: 100px;
    }
  
   #infowork p{
      font-family: 'Fira Sans', sans-serif;
      position: relative;
      top: 100px;
    }
  
    #imageswork{
      padding-bottom: 80px;
    }
  
    #imageswork a{
    color: rgb(25, 125, 192);
    font-weight: 700;
    }



      /* SD */

  html#sd .nav div.logo a {
    text-decoration: none;
    color: #FFF;
    font-size: 2.5rem;
    font-family: 'Montserrat';
    font-weight: 900;
    font-style: italic;
  }
  
  html#sd .nav div.main_list ul li a {
    font-family: 'Fira Sans', sans-serif;
    text-decoration: none;
    color: #FFF;
    line-height: 65px;
    font-size: 1.4rem;
    font-weight: 300;
  }
  
  #headsd {
    width: 100%;
    background-image: url(../images/sd/headsd.png);
    background-position: center top;
    background-size:cover;
    height: 300px;
  }
  
  .titsd h1{
    font-size: 4.5em;
    line-height:1em;
    color:#FF9400;
    font-family: 'Fira Sans', sans-serif;
    font-weight: 700;
    position: relative;
    bottom: 50px;
    }
  
    #infowork {
      position: relative;
      padding-bottom: 100px;
    }
  
   #infowork p{
      font-family: 'Fira Sans', sans-serif;
      position: relative;
      top: 100px;
    }
  
    #imageswork{
      padding-bottom: 80px;
    }
  
    #imageswork a{
    color: rgb(25, 125, 192);
    font-weight: 700;
    }
  



    
      /* SOUTH GREEN */

  html#southgreen .nav div.logo a {
    text-decoration: none;
    color: #FFF;
    font-size: 2.5rem;
    font-family: 'Montserrat';
    font-weight: 900;
    font-style: italic;
  }
  
  html#southgreen .nav div.main_list ul li a {
    font-family: 'Fira Sans', sans-serif;
    text-decoration: none;
    color: #FFF;
    line-height: 65px;
    font-size: 1.4rem;
    font-weight: 300;
  }
  
  #headsg {
    width: 100%;
    background-image: url(../images/southgreen/headsg.png);
    background-position: center top;
    background-size:cover;
    height: 300px;
  }
  
  .titsg h1{
    font-size: 4.5em;
    line-height:1em;
    color:#00ff6a;
    font-family: 'Fira Sans', sans-serif;
    font-weight: 700;
    position: relative;
    bottom: 50px;
    }
  
    #infowork {
      position: relative;
      padding-bottom: 100px;
    }
  
   #infowork p{
      font-family: 'Fira Sans', sans-serif;
      position: relative;
      top: 100px;
    }
  
    #imageswork{
      padding-bottom: 80px;
    }
  
    #imageswork a{
    color: rgb(25, 125, 192);
    font-weight: 700;
    }
  
  

    
      /* SOUTH GREEN */

  html#southgreen .nav div.logo a {
    text-decoration: none;
    color: #FFF;
    font-size: 2.5rem;
    font-family: 'Montserrat';
    font-weight: 900;
    font-style: italic;
  }
  
  html#southgreen .nav div.main_list ul li a {
    font-family: 'Fira Sans', sans-serif;
    text-decoration: none;
    color: #FFF;
    line-height: 65px;
    font-size: 1.4rem;
    font-weight: 200;
  }
  
  #headsg {
    width: 100%;
    background-image: url(../images/southgreen/headsg.png);
    background-position: center top;
    background-size:cover;
    height: 300px;
  }
  
  .titsg h1{
    font-size: 4.5em;
    line-height:1em;
    color:#00ff6a;
    font-family: 'Fira Sans', sans-serif;
    font-weight: 700;
    position: relative;
    bottom: 50px;
    }
  
    #infowork {
      position: relative;
      padding-bottom: 100px;
    }
  
   #infowork p{
      font-family: 'Fira Sans', sans-serif;
      position: relative;
      top: 100px;
    }
  
    #imageswork{
      padding-bottom: 80px;
    }
  
    #imageswork a{
    color: rgb(25, 125, 192);
    font-weight: 700;
    }
  
  


      /* Campus */

      html#campus .nav div.logo a {
        text-decoration: none;
        color: #FFF;
        font-size: 2.5rem;
        font-family: 'Montserrat';
        font-weight: 900;
        font-style: italic;
      }
      
      html#campus .nav div.main_list ul li a {
        font-family: 'Fira Sans', sans-serif;
        text-decoration: none;
        color: #FFF;
        line-height: 65px;
        font-size: 1.4rem;
        font-weight: 300;
      }
      
      #headcampus {
        width: 100%;
        background-image: url(../images/campus/campus-hero.png);
        background-position: center top;
        background-size:cover;
        height: 300px;
      }
      
      .titcampus h1{
        font-size: 4.5em;
        line-height:1em;
        color:#4D8CED;
        font-family: 'Fira Sans', sans-serif;
        font-weight: 700;
        position: relative;
        bottom: 50px;
        }
      
        #infowork {
          position: relative;
          padding-bottom: 100px;
        }
      
       #infowork p{
          font-family: 'Fira Sans', sans-serif;
          position: relative;
          top: 100px;
        }
      
        #imageswork{
          padding-bottom: 80px;
        }
      
        #imageswork a{
        color: rgb(25, 125, 192);
        font-weight: 700;
        }
      


        

      /* MUTABLE */

      html#mutable .nav div.logo a {
        text-decoration: none;
        color: #FFF;
        font-size: 2.5rem;
        font-family: 'Montserrat';
        font-weight: 900;
        font-style: italic;
      }
      
      html#mutable .nav div.main_list ul li a {
        font-family: 'Fira Sans', sans-serif;
        text-decoration: none;
        color: #FFF;
        line-height: 65px;
        font-size: 1.4rem;
        font-weight: 200;
      }
      
      #headmutable {
        width: 100%;
        background-image: url(../images/mutable/mutablehead.png);
        background-position: center top;
        background-size:cover;
        height: 300px;
      }
      
      .titmutable h1{
        font-size: 4.5em;
        line-height:1em;
        color:#6ab842;
        font-family: 'Fira Sans', sans-serif;
        font-weight: 700;
        position: relative;
        bottom: 50px;
        }
      
        #infowork {
          position: relative;
          padding-bottom: 100px;
        }
      
       #infowork p{
          font-family: 'Fira Sans', sans-serif;
          position: relative;
          top: 100px;
        }
      
        #imageswork{
          padding-bottom: 80px;
        }
      
        #imageswork a{
        color: rgb(25, 125, 192);
        font-weight: 700;
        }
      

          

      /* SABIA */

      html#sabia .nav div.logo a {
        text-decoration: none;
        color: #FFF;
        font-size: 2.5rem;
        font-family: 'Montserrat';
        font-weight: 900;
        font-style: italic;
      }
      
      html#sabia .nav div.main_list ul li a {
        font-family: 'Fira Sans', sans-serif;
        text-decoration: none;
        color: #FFF;
        line-height: 65px;
        font-size: 1.4rem;
        font-weight: 200;
      }
      
      #headsabia {
        width: 100%;
        background-image: url(../images/sabia/sabiahead.png);
        background-position: center top;
        background-size:cover;
        height: 300px;
      }
      
      .titsabia h1{
        font-size: 4.5em;
        line-height:1em;
        color:#4d4d4d;
        font-family: 'Fira Sans', sans-serif;
        font-weight: 900;
        position: relative;
        bottom: 50px;
        }
      
        #infowork {
          position: relative;
          padding-bottom: 100px;
        }
      
       #infowork p{
          font-family: 'Fira Sans', sans-serif;
          position: relative;
          top: 100px;
        }
      
        #imageswork{
          padding-bottom: 80px;
        }
      
        #imageswork a{
        color: rgb(25, 125, 192);
        font-weight: 700;
        }
      


           

      /* INCA SUMAC */

      html#inca .nav div.logo a {
        text-decoration: none;
        color: #FFF;
        font-size: 2.5rem;
        font-family: 'Montserrat';
        font-weight: 900;
        font-style: italic;
      }
      
      html#inca .nav div.main_list ul li a {
        font-family: 'Fira Sans', sans-serif;
        text-decoration: none;
        color: #FFF;
        line-height: 65px;
        font-size: 1.4rem;
        font-weight: 200;
      }
      
      #headinca {
        width: 100%;
        background-image: url(../images/inca/incahead.png);
        background-position: center top;
        background-size:cover;
        height: 300px;
      }
      
      .titinca h1{
        font-size: 4.5em;
        line-height:1em;
        color:#cfcd2e;
        font-family: 'Fira Sans', sans-serif;
        font-weight: 700;
        position: relative;
        bottom: 50px;
        }
      
        #infowork {
          position: relative;
          padding-bottom: 100px;
        }
      
       #infowork p{
          font-family: 'Fira Sans', sans-serif;
          position: relative;
          top: 100px;
        }
      
        #imageswork{
          padding-bottom: 80px;
        }
      
        #imageswork a{
        color: rgb(25, 125, 192);
        font-weight: 700;
        }
      

/* RESPONSIVE TIT */

        @media(max-width:768px){
          .titjorge h1{
            font-size: 3.3em;
            }

          .titryh h1{
              font-size: 3.3em;
              }

          .titenglish h1{
              font-size: 3.3em;
                }

           .titsan h1{
              font-size: 3.3em;
                  }
          
           .titdigi h1{
              font-size: 3.3em;
                    }

             .titocho h1{
              font-size: 3.3em;
                      }
                  
                      
             .titsd h1{
              font-size: 3.3em;
                      }
              
              .titsg h1{
                 font-size: 3.3em;
                                }

            .titarqa h1{
              font-size: 3.3em;
              }    
              
              .titmutable h1{
                font-size: 3.3em;
                } 

                .titsabia h1{
                  font-size: 3.3em;
                  } 

                  .titinca h1{
                    font-size: 3.3em;
                    } 

            #infowork p{
              font-family: 'Fira Sans', sans-serif;
              position: relative;
              top: 10px;
            }
        }