/***********************************************************************/
/****** トップ画面 ******/
/***********************************************************************/
.top {
  position : relative;
  height   : 100vh;
  overflow : hidden;
}

.slide {
  position    : absolute;
  top         : 0;
  left        : 0;
  width       : 100%;
  height      : 100%;
  will-change : transform;
  overflow    : hidden;
  cursor      : pointer;
}
.slide__bg {
  position         : absolute;
  top              : 0;
  left             : 0;
  transform-origin : center left;
  width            : 100%;
  height           : 100%;
  background-color : #161616;
  z-index          : 1;
  transition       : 950ms;
  will-change      : transform;
}
.slide__img {
  position : relative;
  height   : 100%;
}
.slide__img-wrapper {
  position    : absolute;
  top         : -10%;
  left        : -10%;
  width       : 125%;
  height      : 120%;
  transform   : translate3d(0, 0, 0);
  transition  : 950ms;
  will-change : transform;
}

/*
.slide__close:after, .slide__close:before {
  width            : 80px;    棒の長さ 
  height           : 14px;     棒の幅（太さ） 
*/

/* closeボタン ＜ 作成 */

.slide__close {
  position   : absolute;
  top        : 5%;
  left       : 5%;
  width      : 100px; 
  height     : 100px; 
  z-index    : 0;
  opacity    : 0;
  cursor     : pointer;
  transition : opacity 200ms, z-index 0ms 200ms;
}

.slide__close:after, .slide__close:before {
  content          : "";
  position         : absolute;
  top              : 43px;
  left             : 0px;
  width            : 80px;     
  height           : 14px;     
  border-radius    : 14px;
  background-color : #fff;
  transition       : 500ms 500ms;
}

@media screen and (max-width: 960px) {
  .slide__close:after, .slide__close:before {
    width  : 75px;
    height : 15px;
  }
}
.slide__close:before {
  transform-origin : 7px center;
  transform        : rotate(-30deg) scale(0, 0);
  transition       : 500ms 650ms;
}
.slide__close:after {
  transform-origin : 7px center;
  transform        : rotate(30deg) scale(0, 0);
}

@media screen and (max-width: 960px) {
  .slide__close:before {
    left : -21px;
  }
}
.slide__bg-dark {
  position         : absolute;
  top              : 0;
  left             : 0;
  width            : 100%;
  height           : 100%;
  background-color : rgba(0, 0, 0, 0.5);
  opacity          : 0;
  transition       : 350ms;
  z-index          : 2;
}
.slide__text {
  position       : absolute;
  top            : 40%;       /*50%;*/
  left           : 1%;       /*1%;*/
  width          : 100%;    /*23%;*/
/*  text-transform : uppercase;*/
  word-wrap      : break-word;
  color          : white;
  font-size      : 55px;
  font-weight    : 800;
  transform      : translate3d(0, -50%, 0) rotate(0.01deg);
  will-change    : transform, opacity;
  transition     : 750ms;
  opacity        : 0;
  z-index        : 6; /*1;*/
}

@media screen and (max-width: 960px) {
  .slide__text {
    font-size : 30px;
  }
}
.slide__text--1 {
  left : 8%;
}

.slide {
  left : 100%;
}

.slide--1 {
  z-index : 0;
}
.slide--1 .slide__img-wrapper {
  background      : url("image/img_acthed.jpg") center center no-repeat;
  background-size : cover;
}

.slide--2 {
  z-index : 1;
}
.slide--2 .slide__img-wrapper {
  background      : url("image/img_CS0.jpg") center center no-repeat;
  background-size : cover;
}

.slide--3 {
  z-index : 2;
}
.slide--3 .slide__img-wrapper {
  background      : url("image/img_land1.jpg") center center no-repeat;
  background-size : cover;
}

.slide--4 {
  z-index : 3;
}
.slide--4 .slide__img-wrapper {
  background      : url("image/img_land3.jpg") center center no-repeat;
  background-size : cover;
}

.slide--5 {
  z-index : 4;
}
.slide--5 .slide__img-wrapper {
  background      : url("image/img_land4.jpg") center center no-repeat;
  background-size : cover;
}

.slide--6 {
  z-index : 5;
}
.slide--6 .slide__img-wrapper {
  background      : url("image/img_land5.jpg") center center no-repeat;
  background-size : cover;
}

.active .slide--1 .slide__bg {
  transform  : scale(0, 1);
  transition : 950ms;
}
.active .slide--1 .slide__img-wrapper {
  transform  : translate3d(-150px, 0, 0);
  transition : 2000ms;
}
.active .slide--1 {
  transform  : translate3d(-100%, 0, 0);
  transition : transform 950ms 0ms;
}
.active .slide--1 .slide__bg {
  transform  : scale(0, 1);
  transition : 1900ms 0ms;
}
.active .slide--1 .slide__img-wrapper {
  transform  : translate3d(-150px, 0, 0);
  transition : 2000ms 0ms;
}
.active .slide--2 {
  transform  : translate3d(-83.33%, 0, 0);
  transition : transform 950ms 1235ms;
}
.active .slide--2 .slide__bg {
  transform  : scale(0, 1);
  transition : 1900ms 1235ms;
}
.active .slide--2 .slide__img-wrapper {
  transform  : translate3d(-150px, 0, 0);
  transition : 2000ms 1235ms;
}
.active .slide--3 {
  transform  : translate3d(-66.66%, 0, 0);
  transition : transform 950ms 2470ms;
}
.active .slide--3 .slide__bg {
  transform  : scale(0, 1);
  transition : 1900ms 2470ms;
}
.active .slide--3 .slide__img-wrapper {
  transform  : translate3d(-150px, 0, 0);
  transition : 2000ms 2470ms;
}
.active .slide--4 {
  transform  : translate3d(-50%, 0, 0);
  transition : transform 950ms 3705ms;
}
.active .slide--4 .slide__bg {
  transform  : scale(0, 1);
  transition : 1900ms 3705ms;
}
.active .slide--4 .slide__img-wrapper {
  transform  : translate3d(-150px, 0, 0);
  transition : 2000ms 3705ms;
}
.active .slide--5 {
  transform  : translate3d(-33.33%, 0, 0);
  transition : transform 950ms 4940ms;
}
.active .slide--5 .slide__bg {
  transform  : scale(0, 1);
  transition : 1900ms 4940ms;
}
.active .slide--5 .slide__img-wrapper {
  transform  : translate3d(-150px, 0, 0);
  transition : 2000ms 4940ms;
}
.active .slide--6 {
  transform  : translate3d(-16.66%, 0, 0);
  transition : transform 950ms 6175ms;
}
.active .slide--6 .slide__bg {
  transform  : scale(0, 1);
  transition : 1900ms 6175ms;
}
.active .slide--6 .slide__img-wrapper {
  transform  : translate3d(-150px, 0, 0);
  transition : 2000ms 6175ms;
}

.show-close {
  z-index : 5;
  opacity : 1;
}

.show-close:before {
  transform : rotate(-30deg) scale(1, 1);
}

.show-close:after {
  transform : rotate(30deg) scale(1, 1);
}

/***********************************************************************/
/****** データ救出 ******************************************/
/***********************************************************************/
.rescue1 {
  text-align  : center;
  align-items : center;  
  margin      : 20vh 0 20vh 0;  
  height      : 100vh; 
}

.rescue1 .text1 {
  font-weight : 900;
}

.rescue1 .text2 h3 {
  margin : 10vh 0 0 0;  
  color  : #7e610b;
}

.rescue1 .text2 div {
  font-size : 1.2rem;
}

/****** rescue2 *********************************************/
.rescue2 {
  display : flex;
  margin  : 20vh 0 0 0;
/*  height  : auto;*/ 
}

.rescue2 .rescue2-1 { width : 30%; }
.rescue2 .rescue2-2 { width : 40%; }
.rescue2 .rescue2-3 { width : 30%; }

.rescue2 .rescue2-1 .image {
  position      : relative;
  width         : 100%;
  height        : 50%;  
  overflow      : hidden;
  border-radius : 0 8px 8px 0;    
/*  margin : 10vh 0 0 0;*/  
}
.rescue2 .rescue2-1 .image .caption {
  position   : absolute;
  color      : white;
  left       : 20px;
  bottom     : 10px;
}

.rescue2 .rescue2-1 .image img {
  position  : absolute;
  top       : 0;
  left      : 0;      	   
  width     : 100%;
  height    : 100%;
  animation : anim2 21s infinite;
  opacity   : 0;
}
@keyframes anim2 {
    0% {  opacity: 1; transform: scale(1.0);  }
   30% {  opacity: 1;                         }
   40% {  opacity: 0; transform: scale(1.2); }
   90% {  opacity: 0                          }
  100% {  opacity: 1; transform: scale(1.0);  }
}  
.rescue2 .rescue2-1 .image img:nth-of-type(1)  { animation-delay: 0s;  }
.rescue2 .rescue2-1 .image img:nth-of-type(2)  { animation-delay: 3s;  }
.rescue2 .rescue2-1 .image img:nth-of-type(3)  { animation-delay: 6s;  }
.rescue2 .rescue2-1 .image img:nth-of-type(4)  { animation-delay: 9s;  }
.rescue2 .rescue2-1 .image img:nth-of-type(5)  { animation-delay: 12s; }
.rescue2 .rescue2-1 .image img:nth-of-type(6)  { animation-delay: 15s; }
.rescue2 .rescue2-1 .image img:nth-of-type(7)  { animation-delay: 18s; }

/*** rescue2-2 **********************************/
.rescue2 .rescue2-2 {
  margin : 0 20px 0 20px;
}

/** rescue2-3 ***************************/
.rescue2 .rescue2-3 {
  position : relative;
}
.rescue2 .rescue2-3 img {
  width         : 100%;   
  border-radius : 8px 0 0 8px; 
}
.rescue2 .rescue2-3 .caption {
  position : absolute;
  top      : 20px;
  left     : 20px;
  color    : white;
}
.rescue2 .rescue2-3 .caption2 {
  position : absolute;
  bottom   : 15px;
  left     : 20px;
  color    : white;
}

/** rescue3 *********************************************************************/
.rescue3 {
  display : flex;
  margin  : 0 0 5px 0;
}

.rescue3 .hdd { 
  width            : 35%; 
  background-color : rgb(202, 214, 210);
  margin           : 3px;
  padding          : 30px 0 30px 20px;
}

.rescue3 .ssd { 
  width            : 35%; 
  background-color : rgb(202, 214, 210);
  margin           : 3px;
  padding          : 30px 0 30px 20px;
}

.rescue3 .flash { 
  width            : 30%; 
  background-color : rgb(202, 214, 210);
  margin           : 3px;
  padding          : 30px 0 30px 20px;
}

/** RESCUE4 ***********************************************************/
.rescue4 {
  display          : flex;
  width            : 100%;
  height           : 80vh;
  background-color : rgb(202, 214, 210);
  margin-top       : -3px;
  margin-bottom    : 5px;
}
  
.rescue4 .slide-container {
  display        : flex;
  width          : 35vw; 
/*  height         : 340px;
  align-items    : center;*/
  overflow       : hidden;
  flex-direction : column;
}
.rescue4 .slide-wrapper {
  display        : flex;
  flex-direction : column;
  animation      : slide-flow 40s infinite linear 1s both;
}
.rescue4 .slide3 {
  width      : 100%;
  object-fit : cover;
  border     : 1px solid #ddd;
}
@keyframes slide-flow {
   0% { transform : translateY(0); }
 100% { transform : translateY(-100%); }
}

.slide-paused:hover .slide-wrapper {
  animation-play-state : paused;
}
.slide-paused:hover .slide-wrapper img:hover {
  opacity : .8;
  cursor  : grabbing;
}

.rescue4 .slide-wrapper .text {
  position   : relative;
  margin-top : -20px;
  color      : black;
  left       : 20px;
  bottom     : 20px;
}

/***　RESCUE 4-2 *************************/
.rescue4 .rescue4-2 {
/*  display       : grid;*/
  width         : 100%;
  height        : 100%;
/*  text-align  : center;*/
/*  justify-items : center;
  align-content : center;*/
/*  margin        : 0 auto;*/
/*  position: relative;*/
}

.rescue4 .rescue4-2 .text1 {
  text-align : center;
  margin        : 8vh 0 0 0;
}

.rescue4 .rescue4-2 h4 {
  margin : 0 0 5vh 0;
}

/***　RESCUE5 *************************/
.rescue5 {
  margin           : 3px 0 10vh 0;
  background-color : rgb(202, 214, 210);
}

.rescue5 h2 {
  text-align : center;
  padding    : 5vh 0 0 0;
  color      :#3f4bb8;
} 
.rescue5 h4 {
  text-align : center;
  padding    : 1vh 0 3vh 0;
}

.rescue5 table {
  font-size : 1.05rem;
  margin    : 0 auto;
  padding   : 0 0 5vh 0;
}

/***　RESCUE6 *************************/
.badsct {
  position: relative;
  margin  : 0px auto 0;
  padding : 0 0 75px;
}

.badsct label {
  position        : absolute;
  display         : table;
  left            : 50%;
  bottom          : 0;
  margin          : 0 auto;
  width           : 250px;
  padding         : 10px 0;
  color           : #fff;
  text-align      : center;
  border-radius   : 5px;
  background-color: #333;
  transform       : translateX(-50%);
  cursor          : pointer;
  z-index         : 1;
}

.badsct label::before{
  content: 'HDD不良セクタについて';
}

.badsct input[type="checkbox"]:checked ~ label::before {
  content: '元に戻す';
}

.badsct input[type="checkbox"]{
  display: none;
}

.badsct-content {
  position: relative;
  height  : 0px;
  overflow: hidden;
}

.badsct input[type="checkbox"]:checked ~ .badsct-content {
  height: auto;
}


/*********************************************************************************/
/** PC製作 ***********************************************************************/
/*********************************************************************************/
/*** BUILD 1 ****************************************************/
.build1 {
  height     : auto;
  text-align : left;
  margin     : 40vh 0 0 2vw;
}

.build1 h5 { 
  font-family : serif;
  color       :#140655;
  font-weight : bold;
}

.build1 h1 {
  margin : 5vh 0 10vh 5vw;
}

/*** BUILD 2 *********************************************/
.build2 {
/*  width      : 99.9%;*/
  height     : auto;
  margin-top : 10vh;
}

.build2 .caption  {
  position    : relative;
  margin-left : 2em;
  padding     : 0.2em 0.6em;
/*  cursor    : pointer;*/
  color       : white;
  font-size   : 1.2rem;
  max-width   : 26em;
}

.build2 .caption h1 {
  margin-bottom : 0.5em;
  line-height   : 1;
}

#CrossFade {
  background  : #fff;
  display     : flex;
  align-items : flex-end;
  height      : 100vh;
  overflow    : hidden;
  position    : relative;
}
#CrossFade img {
  position                    : absolute;
  width                       : 100%;
  height                      : 100%;
  height                      : auto;
  background                  : #000;
  -webkit-backface-visibility : hidden;
          backface-visibility : hidden;
  opacity                     : 0;
  transform                   : scale(1.2) rotate(40deg);
  -webkit-animation           : CrossFade 36s infinite;
          animation           : CrossFade 36s infinite;
}
#CrossFade img:nth-child(5) {
  -webkit-animation-delay : 6s;
          animation-delay : 6s;
}
#CrossFade img:nth-child(4) {
  -webkit-animation-delay : 12s;
          animation-delay : 12s;
}
#CrossFade img:nth-child(3) {
  -webkit-animation-delay : 18s;
          animation-delay : 18s;
}
#CrossFade img:nth-child(2) {
  -webkit-animation-delay : 24s;
          animation-delay : 24s;
}
#CrossFade img:nth-child(1) {
  -webkit-animation-delay : 30s;
          animation-delay : 30s;
}
@-webkit-keyframes CrossFade {
  25% {
    opacity   : 1;
    transform : scale(1) rotate(0);
  }
  40% {
    opacity : 0;
  }
}
@keyframes CrossFade {
  25% {
    opacity   : 1;
    transform : scale(1) rotate(0);
  }
  40% {
    opacity : 0;
  }
}

/****** BUILD 3 ****************************/
.build3 {
  width  : 99.9%;
/*  height : auto;*/
/*  margin : 0 3wh 0 3wh;*/
}

.build3 img {
  width      : 20%;
/*  height     : auto;*/
/*  max-width  : 20%;*/
/*  max-height : 185px;*/
  @media (min-width: 1930px) {
    height : 10vw;
  }
  
  height : 13vw;
/*  max-height : 20.5vw;*/
}

/***********************************************************************/
/****** ソフト開発 *******/
/***********************************************************************/
.program1 {
  width       : 98%;
  height      : auto;
/*  text-align  : center;*/
/*  align-items : center;*/
  margin      : 10vh 0 10vh 0;
}

.program1 .text1 {
  font-family : serif;
  color       :#140655;
  font-weight : bold;
  margin      : 30vh 0 20vh 3vw;
}

.program1 .text2 h1 {
  text-align  : center;
  font-weight : bold;
  color       :#7c6213
}

.program1 .text2 h3 {
  text-align  : center;
  font-weight : bold;
/*  color       :#7c6213*/
}

.program1 .text3 {
/*  width     : 98vw;*/
/*  font-size : 1.2rem;*/
  margin    : 10vh 0 0 3vw; 
}

.program1 .text3 h4 {
  color :#1a258a;
}
  
.program1 .text4 {
/*  width       : 98vw;*/
  text-align  : center;
  font-size   : 3rem;
  font-weight : bold;
  color       :#5f4a11;
  margin      : 30vh 0 2vh 0; 
}

.program1 .text5 {
    text-align  : center;
    font-size   : 1.5rem;
    font-weight : bold;
    color       :#1a258a;
    margin      : 0vh 0 30vh 0; 
  }
  
/**　PROGRAM 2*****************************************/
.program2 {
  width       : 100%;
/*  height      : auto;
  margin      : 0 0 10vh 0;*/
  background-color : #462c2c;
}

.program2 .redbs, 
.program2 .re3bs, 
.program2 .secpt, 
.program2 .delsd {  
/*  width  : 100%;*/ 
  background-color : #c2c4ff;
  border-radius    : 8px;
  margin           : 5% 5% 0 5%;
}

.program2 .text { 
/*  width  : 97vw;*/ 
padding : 7vh 2.5vw 3vh 3vw;
margin  : 10vh 0 5vh 3vw;
}

.program2 .tit1  { 
  display     : inline-block;
  font-weight : bold;
  font-size   : 2.5rem;
  margin      : 10vh 0 0 0;
}

.program2 .tit2  { 
  display     : inline-block;
  font-weight : bold;
  font-size   : 2rem;
  color       : blue;
}

.program2 .text2  { 
  font-weight : bold;
  font-size   : 1.2rem;
  text-align  : center;
  color       : blue;
}

.program2 .text3  { 
  font-weight : bold;
  font-size   : 1.1rem;
  text-align  : center;
  color       : blue;
}

.program2 .image { 
  width  : 60vw;       
  margin : 0 auto;
}
.program2 .image img { 
  width         : 100%;       
  border-radius : 8px;
}

.program2 .re3bs .text img { 
  width         : 30%;       
/*  border-radius : 5px;*/
}

.program2 h4 { 
  margin : 0 0 10vh 0;
  color  : rgb(22, 122, 2);       
}

.program2 .image a {
  color       :blue;
  font-size   : 1.2rem;
  font-weight : bold;
}

/***********************************************************************/
/****** 提供サービス *******/
/***********************************************************************/
.services {
  position : relative;
/*  margin   : 10vh 0 0 0;*/
}

.services img {
  width          : 99.9%;
/*  height         : 110vh;*/
  height         : auto;
  min-height     : 110vh;
  vertical-align : bottom;
}

.services::before {
  content          : '';
  position         : absolute;
  top              : 0;
  left             : 0;
  right            : 0;
  bottom           : 0;
  background-color : rgba(0,0,0,0.6);
  opacity          : 0;
  transition       : all 3s;
}

.services:hover::before {
  opacity    : 1;
}

.services .text {
/*  width     : 99.9%;*/
  height    : auto;
  position  : absolute;

  @media (min-width: 1930px) {
    font-size : 0.8rem;
  }
  
/*  font-size : 1rem;*/
  color     : white;
  top       : 15vh;
  left      : 5vw;
  transform : translate(0, 0);    
}

/***********************************************************************/
/****** 実績 *******/
/***********************************************************************/
.cases1 {
	width    : 99.99%;

/*  @media (min-width: 1930px) {
    height : 19vw;  
  }*/
  height   : 25vw;
	overflow : hidden;
	position : relative;
}

.cases1 .caption {
  position   : absolute;
  top        : 50%;
  left       : 50%;
  transform  : translate(-50%, -50%);  
	text-align : center;
  color      : white;
}

.cases1 .mask {
	width              : 100%;
	height             : 100%;
	position           : absolute;
	top                : 0;
	left               : 0;
	opacity            : 0;	            
	background-color   :	rgba(0,0,0,0.6);
	-webkit-transform  : rotateY(-180deg);
	transform          : rotateY(-180deg);
	-webkit-transition : all 3s ease;
	transition         : all 3s ease;
}

.cases1:hover .mask {
	-webkit-transform :	rotateY(0deg);
	transform         :	rotateY(0deg);
	opacity           : 1;	            
}

/*** carousel3d **************************************/
#carousel3d {
  margin-top    : -21px;
  margin-bottom : -20px;
}

#carousel3d .carousel-3d-slide {
  display          : flex;
  flex             : 1;
  flex-direction   : column;
  justify-content  : center;
  text-align       : center;
  background-color : rgb(210, 226, 250);
  padding          : 10px;
  transition       : all 0.4s;
}
#carousel3d .carousel-3d-slide.current {
  background-color : #333;
/*  color            : #fff;*/
  border-radius    : 8px;
}
#carousel3d .carousel-3d-slide.current .title {
  color : white;
}
#carousel3d .carousel-3d-slide.current .docu {
  font-size : 13px;
  color : rgb(240, 240, 240);
}

#carousel3d .carousel-3d-slide.current span {
  font-size   : 20px;
  font-weight : 500;
}

/***********/
#carousel3d .carousel-3d-slide .Box {
  display : flex;
}
#carousel3d .carousel-3d-slide .Box .text {
  font-size   : 16px;
  margin-left : 10px;
}
#carousel3d .carousel-3d-slide .text .docu {
  font-size  : 16px;
  text-align : left;
}

/***********************************************************************/
/****** ＣＯＮＴＡＣＴ *******/
/***********************************************************************/
.contact {
  position : relative;
}
.contact img {
  width          : 100%;
  height         : auto;
  vertical-align : top;
}
.contact a {
  color     : white;
  font-size : 1.3rem;
}
.contact a:hover {
  font-size : 1.3rem;
  color     : rgb(144, 189, 60);
}

.contact::before {
  content          : '';
  position         : absolute;
  top              : 0;
  left             : 0;
  right            : 0;
  bottom           : 0;
  background-color : rgba(0,0,0,0.6);
  opacity          : 0;
  transition       : all 3s;
}
.contact:hover::before {
  opacity : 1;
}

.contact .text1 {
  position : absolute;
  top      : 5px;
  right    : 5px;
  color    : white;
}

.contact h1 {
  position    : absolute;
  top         : 60px;
  left        : 50%;
  transform   : translateX(-50%);  
  font-weight : 900;
  color       : white;
}

.contact .text2 {
  position    : absolute;
  top         : 22vh;
  left        : 5vw;
  font-weight : bold;
  color       : white;
}
.contact .text2 a {
  font-size : 1.5rem; 
}

.contact .text3 {
  position : absolute;
  right    : 5px;
  bottom   : 5px;
  color    : white;
}

/*** メニュー * **********************************************************/
#header {                   /*fixedで上部固定*/
  position : fixed;
  height   : 70px;
  width    : 100%;
  z-index  : 999;     /*最前面へ*/
}

/*　上に上がる動き　*/
#header.UpMove {
  animation : UpAnime 0.5s forwards;
}

@keyframes UpAnime {
  from {
    opacity   : 1;
    transform : translateY(0);
  }
  to {
    opacity   : 0;
    transform : translateY(-100px);
  }
}

/*　下に下がる動き　*/
#header.DownMove {
  animation : DownAnime 0.5s forwards;
}
@keyframes DownAnime {
  from {
    opacity   : 0;
    transform : translateY(-100px);
  }
  to {
    opacity   : 1;
    transform : translateY(0);
  }
}

nav ul {
  display     : table;
  position    : absolute;
  right       : 0;
  margin      : 0 auto;
  padding     : 0;
  width       : 50%;
  text-align  : center;
  font-weight : bold;
  background  :rgb(0,0,0, 0.2);

}
nav ul li {
  display   : table-cell;
/*  min-width : 80px;*/
  max-width : 80px;
}
nav ul li a {
  display         : block;
  width           : 100%;
  height          : 100%;
  padding         : 5px 0;
  text-decoration : none;
  color           : rgb(104, 87, 32);
}

nav ul li a:hover {
  color            : blue;
  background-color : #FBFBDD;
}

/*--------------------------------------*/

html {
  box-sizing : border-box;
}

*,
*:before,
*:after {
  box-sizing : inherit;
  margin     : 0;
  padding    : 0;
}