Team:Tec-Monterrey/T--Tec-Monterrey--style

/* -------------------------------- Primary style

*/

, *::after, *::before {

 box-sizing: border-box;

}

 font-size: 62.5%;

}

a {

 color: yellow;
 text-decoration: none;

}

.cd-image-replace {

 /* replace text with image */
 display: inline-block;
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 color: transparent;

}

/* -------------------------------- Navigation trigger - visible on small devices only

*/

.cd-nav-trigger {

 display: block;
 position: fixed;
 z-index: 102;
 bottom: 30px;
 right: 5%;
 height: 44px;
 width: 44px;
 border-radius: 0.25em;
 background: rgba(234, 242, 227, 0.9);
 /* reset button style */
 cursor: pointer;
 -webkit-appearance: none;
 -moz-appearance: none;
 -ms-appearance: none;
 -o-appearance: none;
 appearance: none;
 border: none;
 outline: none;

} .cd-nav-trigger span {

 /* central dot */
 position: absolute;
 height: 4px;
 width: 4px;
 background-color: #3a2c41;
 border-radius: 50%;
 left: 50%;
 top: 50%;
 bottom: auto;
 right: auto;
 -webkit-transform: translateX(-50%) translateY(-50%);
 -moz-transform: translateX(-50%) translateY(-50%);
 -ms-transform: translateX(-50%) translateY(-50%);
 -o-transform: translateX(-50%) translateY(-50%);
 transform: translateX(-50%) translateY(-50%);

} .cd-nav-trigger span::before, .cd-nav-trigger span::after {

 /* bottom and top dots */
 content: ;
 position: absolute;
 left: 0;
 height: 100%;
 width: 100%;
 background-color: #3a2c41;
 border-radius: inherit;

} .cd-nav-trigger span::before {

 top: -9px;

} .cd-nav-trigger span::after {

 bottom: -9px;

} @media only screen and (min-width: 800px) {

 .cd-nav-trigger {
   display: none;
 }

}

/* -------------------------------- Vertical navigation

*/

.cd-vertical-nav {

 position: fixed;
 z-index: 101;
 right: 5%;
 bottom: 30px;
 width: 90%;
 max-width: 400px;
 max-height: 90%;
 overflow-y: auto;
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -ms-transform: scale(0);
 -o-transform: scale(0);
 transform: scale(0);
 -webkit-transform-origin: right bottom;
 -moz-transform-origin: right bottom;
 -ms-transform-origin: right bottom;
 -o-transform-origin: right bottom;
 transform-origin: right bottom;
 -webkit-transition: -webkit-transform 0.2s;
 -moz-transition: -moz-transform 0.2s;
 transition: transform 0.2s;
 border-radius: 0.25em;
 background-color: rgba(234, 242, 227, 0.9);

} .cd-vertical-nav a {

 display: block;
 padding: 1em;
 color: #3a2c41;
 font-weight: bold;
 border-bottom: 1px solid rgba(58, 44, 65, 0.1);

} .cd-vertical-nav a.active {

 color: #c0a672;

} .cd-vertical-nav.open {

 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
 -webkit-overflow-scrolling: touch;

} .cd-vertical-nav.open + .cd-nav-trigger {

 background-color: transparent;

} .cd-vertical-nav.open + .cd-nav-trigger span {

 background-color: rgba(58, 44, 65, 0);

} .cd-vertical-nav.open + .cd-nav-trigger span::before, .cd-vertical-nav.open + .cd-nav-trigger span::after {

 /* transform dots in 'X' icon */
 height: 3px;
 width: 20px;
 border-radius: 0;
 left: -8px;

} .cd-vertical-nav.open + .cd-nav-trigger span::before {

 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 top: 1px;

} .cd-vertical-nav.open + .cd-nav-trigger span::after {

 -webkit-transform: rotate(135deg);
 -moz-transform: rotate(135deg);
 -ms-transform: rotate(135deg);
 -o-transform: rotate(135deg);
 transform: rotate(135deg);
 bottom: 0;

} @media only screen and (min-width: 800px) {

 .cd-vertical-nav {
   /* reset style */
   right: 0;
   top: 0;
   bottom: auto;
   height: 100vh;
   width: 90px;
   max-width: none;
   max-height: none;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
   background-color: transparent;
   /* vertically align its content*/
   display: table;
 }

/* navbar background */

 .cd-vertical-nav::before {
   /* this is the navigation background */
   content: ;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #397471;
   -webkit-transform: translateX(100%);
   -moz-transform: translateX(100%);
   -ms-transform: translateX(100%);
   -o-transform: translateX(100%);
   transform: translateX(100%);
   -webkit-transition: -webkit-transform 0.4s;
   -moz-transition: -moz-transform 0.4s;
   transition: transform 0.4s;
 }
 .no-touch .cd-vertical-nav:hover::before, .touch .cd-vertical-nav::before {
   -webkit-transform: translateX(0);
   -moz-transform: translateX(0);
   -ms-transform: translateX(0);
   -o-transform: translateX(0);
   transform: translateX(0);
 }
 .cd-vertical-nav ul {

/* vertically align

;

http://gielberkers.com/how-to-fix-shaking-css-transitions-in-firefox/

.no-js .cd-nav-trigger {

 display: none;

}

.no-js .cd-vertical-nav {

 position: static;
 height: auto;
 width: 100%;
 max-width: none;
 background-color: #2A8481;
 border-radius: 0;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);

} .no-js .cd-vertical-nav::before {

 display: none;

} .no-js .cd-vertical-nav ul::after {

 clear: both;
 content: "";
 display: table;

} .no-js .cd-vertical-nav li {

 display: inline-block;
 float: left;

} .no-js .cd-vertical-nav a {

 padding: 0 1em;
 margin: 1.5em 1em;
 color: #eaf2e3;

} .no-js .cd-vertical-nav a.active {

 color: #c0a672;

} .no-js .cd-vertical-nav a::after, .no-js .cd-vertical-nav a::before {

 display: none;

} .no-js .cd-vertical-nav .label {

 -webkit-transform: translateX(0);
 -moz-transform: translateX(0);
 -ms-transform: translateX(0);
 -o-transform: translateX(0);
 transform: translateX(0);