@charset "UTF-8";
@import url("../icomoon/style.css"); /* Icon fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500&display=swap');


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

STARBLESS CREATIVE / PC CSS
Mod : 2023.01.01 MT

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

* {margin: 0;padding: 0;}

html {font-size: 62.5%;width: 100%;}

body{
font-size: 1.6rem;
font-weight:300;
font-family: fot-tsukuardgothic-std, 游ゴシック体, "Yu Gothic", 游ゴシック, YuGothic, 'Noto Sans JP',Verdana, メイリオ, Meiryo, sans-serif;
background:#113450;
color:#666;
line-height:1.6;
}

div:after {content: ".";  clear: both;  display: block;  line-height: 0;  height: 0;  visibility: hidden;  }  
.clearfix:after {content:".";height:0;clear:both;display: block;visibility:hidden;}

.pc {display:block !important;}
.sp {display:none !important;}


/*a:hover img {filter:alpha(opacity=70);-moz-opacity: 0.7;opacity: 0.7;}*/

a {color:#b9ac99;cursor:pointer !important;}
a:visited {color:#b9ac99;}
a:hover {color:#000;}


/* WP img */
 
.aligncenter {display: block;margin: 0 auto 20px auto;}
.alignright { float: right; margin:0 0 20px 20px;}
.alignleft { float: left; margin:0 20px 20px 0;}
 
img[class*="wp-image-"],
img[class*="attachment-"] {
    height: auto;
    max-width: 100%;
}

.btnA { text-align: center; }
.btnA a { color: #fff; display: inline-block; font-size: 1.4rem; font-weight: 700; line-height: 60px; min-width: 240px; height: 60px; padding: 0 15px;background:#900;text-decoration:none;transition: 0.5s;}
.btnA a:hover {background:#600;}

@media screen and (max-width: 767px) { 
.btnA a { font-size: 1.4rem; line-height: 45px; min-width: 180px; height: 45px; } 
}



/* animation
------------------------------------------------------------- */

.fadein {animation-name: fadein;animation-duration:1s;animation-fill-mode:forwards;opacity:0;}
@keyframes fadein {
  0% {transform: translateY(-10px);opacity: 0;}
  80% {opacity: 1;}
  100% {opacity: 1;transform: translateY(0);}
}

.fadeUp {animation-name: fadeUp;animation-duration:1s;animation-fill-mode:forwards;opacity:0;}
@keyframes fadeUp{
  from {opacity: 0;transform: translateY(-50px);}
  to {opacity: 1;transform: translateY(0);}
}



/* header
------------------------------------------------------------- */

header {width:100%;height:80px;position:fixed;background:rgba(255,255,255,0.6);z-index:100;transition: 0.5s;}
header .inner {width:100%;position: relative;}
header h1 {height:80px;width:400px;transition: 0.5s;}
header h1 img {display:block;width:100%;margin:auto;padding:16px 0 0 20px;transition: 0.5s;filter: invert(1);}
header h1 a:hover img {filter:alpha(opacity=100);-moz-opacity: 0.7;opacity: 0.7;}

header ul#gnavi {position:absolute;top:30px;right:60px;display:flex;list-style:none;color:#000;font-size:1.6rem;font-weight:400;transition: 0.5s;}
header ul#gnavi li {position: relative;display:inline;margin: 0 30px 0 10px;text-align:center;line-height:1.2;letter-spacing:2px;}
header ul#gnavi li.on::after {position: absolute;bottom: -8px;left: 0;content: '';width: 100%;height: 3px;
background: #000;transform: scale(1, 1);transform-origin: center top;transition: transform .3s;}
header ul#gnavi li:last-child {margin: 0 ;}
header ul#gnavi li:last-child:after {content:""}
header ul#gnavi a {color:#000;position: relative;text-decoration: none;display:block;}
header ul#gnavi a:hover {color:#000;} 
header ul#gnavi a:visited {color:#000;}
header ul#gnavi a::after {position: absolute;bottom: -8px;left: 0;content: '';width: 100%;height: 3px;
background: #ccc;transform: scale(0, 1);transform-origin: center top;transition: transform .3s;z-index:10;}
header ul#gnavi a:hover::after {transform: scale(1, 1);}
header ul#gnavi em {display:block;font-weight:200;font-style:normal;font-size:1.1rem;letter-spacing:1px;padding:5px 0 0 0;}

header ul#gnavi li:nth-child(1) {animation-duration: 0.2s;}
header ul#gnavi li:nth-child(2) {animation-duration: 0.4s;}
header ul#gnavi li:nth-child(3) {animation-duration: 0.6s;}
header ul#gnavi li:nth-child(4) {animation-duration: 0.8s;}
header ul#gnavi li:nth-child(5) {animation-duration: 1.0s;}
header ul#gnavi li:nth-child(6) {animation-duration: 1.2s;}

/* .s_header */
header.s_header {width:100%;height:60px;position:fixed;background:rgba(255,255,255,1);z-index:1;}
header.s_header h1 {width:360px;}
header.s_header h1 img {display:block;width:80%;margin:auto;padding:14px 0 0 20px;}

header.s_header ul#gnavi {top:20px;}

#top header header.s_header {width:100%;height:80px;position:fixed;background:rgba(255,255,255,0.2);z-index:1;}


/* titleheader
------------------------------------------------------------*/

#titleheader {height:300px;background:url(../img/common/titleheader.jpg) 80% top / cover ;color:#fff;}
#titleheader h2 {font-size:4rem;letter-spacing:5px;text-align:center;width:1000px;margin:0 auto;padding:160px 0 0 0;font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;font-weight: 500;text-shadow: 1px 1px 2px black;}
#titleheader .sub { width:1000px;margin:0 auto;font-size: 1.6rem; margin-bottom: 50px;text-align:center;text-shadow: 1px 1px 2px black;}



/* footer
------------------------------------------------------------- */

footer {padding:50px 0 50px 0;background:#000;text-align:center;color:#fff;}
footer .inner {width:700px;margin:auto;}
footer .logo {width:300px;margin:0 0 10px 0;}
footer .industry {margin:0 0 20px 0;}
footer ul.snsicon{list-style:none;display: table;margin:0 auto 20px auto;}
footer ul.snsicon li{float:left;margin:0 20px 0 0;}
footer ul.snsicon li:last-child{margin:0;}
footer ul.snsicon li img{width:60px;}

footer small {display:block;clear:both;font-size:1.0rem;letter-spacing:2px;}
footer a:hover{color:#960}

footer ul.snsicon {clear:both;width:150px;margin:20px auto 0 auto;list-style:none;display:flex;justify-content: space-between;}
footer ul.snsicon li {width:40px;}
footer ul.snsicon li img {width:100%;}



/* TOP
------------------------------------------------------------- */

#top #mainvisual {position: relative;background:#000; width:100%;height:100vh;box-shadow: 0 0 20px 0 rgba(0,0,0,0.4) inset;overflow: hidden;z-index:0;display: flex;justify-content: center;align-items: center;}

#top #mainvisual .content {z-index:1;}
#top #mainvisual .content .catch {text-align:center;font-size:4.6rem;color:#fff;width:100%;z-index:1;font-weight:400;text-shadow: 1px 1px 2px black;letter-spacing:1px;font-family:"游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;}
#top #mainvisual .content .lead {text-align:center;font-size:2.4rem;color:#fff;width:100%;z-index:1;font-weight:400;text-shadow: 2px 2px 3px black;letter-spacing:1px;}
#top #mainvisual .content .lead span {font-size:3rem;font-weight:300;}

#top #mainvisual img {position: absolute; width:100%;height:800px;object-fit: cover;object-position: 50% 0;}

#top #mainvisual .scrolldown {position:absolute;left:50%;bottom:10px;height:50px;z-index:1;}
#top #mainvisual .scrolldown span{position: absolute;left:-20px;top: -20px;color: #eee;font-size: 1.3rem;letter-spacing: 0.1em;}
#top #mainvisual .scrolldown::after{content: "";position: absolute;top: 0;width: 1px;height: 30px;background: #eee;animation: pathmove 1.4s ease-in-out infinite;opacity:0;}

@keyframes pathmove{
  0%{height:0;top:0;opacity: 0;}
  30%{height:30px;opacity: 1;}
  100%{height:0;top:50px;opacity: 0;}
}

#top #mainvisual .bg {position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);min-width: 100%;min-height: 100%;}
#top .mainvisual_sp {width:100%;}

#top #lead {padding:55px 0;background:#fff;text-align:center;color:#000;}
#top #lead p {font-size:1.7rem;margin:0 0 50px 0;font-weight:200;letter-spacing:0;line-height:2;}
#top #lead ul {width:1100px;list-style:none;display:flex;justify-content: space-between;margin:auto;}
#top #lead ul li {width:30%;display:inline-block;}
#top #lead ul li img {width:100%;}


#top #service { background: #f8f8f8; padding: 100px 0;}
#top #service .servicelist { margin-bottom: 50px; }
#top #service .l-inner { margin-left: auto; margin-right: auto; position: relative; width: 90%; max-width: 1180px;z-index:0;}

#top #service .header { text-align: center;}
#top #service .title {font-size:4.4rem;font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;font-weight: 500;letter-spacing:1px;color:#000;}
#top #service .sub { font-size: 16px; margin-bottom: 42px; }
#top #service .sub:last-child { margin-bottom: 50px; }
#top #service .desc { line-height: 2; margin-bottom: 50px;font-family: 游ゴシック体, "Yu Gothic", 游ゴシック, YuGothic, Verdana, メイリオ, Meiryo, sans-serif;font-weight:400;}
#top #service .p-three-box { display: flex; }
#top #service .p-three-box__item { margin-left: -1px; width: 33.33%; height: 360px; }

@media only screen and (max-width: 991px) { #top #service .l-inner { width: 88.88889%; } }

@media screen and (max-width: 767px) { 
#top #service { padding: 36px 0 40px; }
#top #service .servicelist { margin: 0 auto 10px; } 
#top #service .l-inner { padding: 0 5%; width: 90%; }
#top #service .title { margin-bottom: 5px;font-size:3.4rem;}
#top #service .sub { font-size: 14px; margin-bottom: 23px; }
#top #service .sub:last-child { margin-bottom: 30px; }
#top #service .desc { margin-bottom: 33px; } 
#top #service .p-three-box { flex-wrap: wrap; }
#top #service .p-three-box__item { margin-left: 0; width: 100%; height: 250px; } 
}
  
.article_header { border: 1px solid #ddd; border-bottom: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; width: 100%; height: 140px; position: absolute; top: 0; z-index: 1;font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;font-weight: 500;box-sizing: border-box;}
.article_title { transition: color 0.2s ease; font-size:1.9rem;color:#000;}
.article_sub { transition: color 0.2s ease; }
.article_desc { color: #fff; line-height: 1.8; padding: 0 10%; opacity: 1; transition: opacity 0.2s ease; position: absolute; top: 65%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1;font-size:1.5rem; }
.article_img { width: 100%; height: 100%; transition: opacity 0.2s ease, -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: opacity 0.2s ease, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: opacity 0.2s ease, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateY(140px); transform: translateY(140px); }
.article_img::before { content: ""; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.article_img img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; }

@media screen and (max-width: 991px) { 
.article a:hover .article_title, .article a:hover .article_sub { color: inherit; }
.article a:hover .article_img { -webkit-transform: translateY(140px); transform: translateY(120px); }
.article a:hover .article_img::before { opacity: 0; }
.article_desc { } 
}

@media screen and (max-width: 767px) { 
.article a:hover .article_img { -webkit-transform: translateY(83px); transform: translateY(83px); }
.article_header { height: 90px; }
.article_title { margin-bottom: 1px; }
.article_sub { font-size: 14px; }
.article_img { width:calc(100% - 2px);margin:auto;-webkit-transform: translateY(83px); transform: translateY(83px); } 
}


.article { background: #fff; overflow: hidden;margin:0 0 10px 0;}
.article:first-child .article_img { border-left: 1px solid #ddd; }
.article:last-child .article_img { border-right: 1px solid #ddd; }

.article a { display: block; position: relative; height: 100%; }
.article a:hover .article_title, .article a:hover .article_sub { color: #fff; }
.article a:hover .article_desc { opacity: 1; }
.article a:hover .article_img { -webkit-transform: translateY(0); transform: translateY(0); }
.article a:hover .article_img::before { opacity: 1; }





#top #newsArea {background: #fff;}
#top #newsArea .inner {width:1000px;margin:0 auto;padding:70px 0;font-size:1.7rem;}
#top #newsArea .inner h2  { font-size:4.4rem;font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;font-weight: 500;letter-spacing:1px;color:#000;text-align:center;}
#top #newsArea .inner .sub { font-size: 1.6rem; margin-bottom: 50px;text-align:center;}

#top ul#topics {list-style:none;margin:0 0 20px 0;}
#top ul#topics li{position: relative;padding:10px 0 10px 30px;margin:0 0 10px 0;border-bottom:1px solid #f1f1f1;}
#top ul#topics li a {color:#645d51;text-decoration:none;}
#top ul#topics li a:visited {color:#645d51;}
#top ul#topics li a:hover {color:#000;}

#top ul#topics li::after,
#top ul#topics li::before {display: block;content: '';position: absolute;}
#top ul#topics li::after {top: 13px;left: 0;width: 20px;height: 20px;background-color: #fff;border-radius: 100%;}
#top ul#topics li::before {z-index: 2;top: 18px;left: 3px;width: 10px;height: 10px;border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
#top ul#topics li .date{font-size:1.1rem;}

#top #access { background:#fff;color:#333;}
#top #access iframe {filter: grayscale(100%);vertical-align:top;}




/* service
------------------------------------------------------------- */

#service #titleheader {height:340px;background:url(../img/service/titleheader.jpg) 50% 50% / cover ;color:#fff;}

#service #container {background: #fff;}
#service #container .inner {width:1060px;margin:0 auto;padding:60px 0;}

#service #container .inner h3 {font-size:1.9rem;font-weight:500;line-height:2;padding: 30px;margin:0 auto 0 auto;position: relative;}
#service #container .inner h3::before, #service #container .inner h3::after {content: '';width: 30px;height: 30px;position: absolute;}
#service #container .inner h3::before {border-left: solid 2px #666;border-top: solid 2px #666;top: 0;left: 0;}
#service #container .inner h3::after {border-right: solid 2px #666;border-bottom: solid 2px #666;bottom: 0;right: 0;}

#service h4 {font-size:3rem;font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;font-weight: 500;margin:0 0 1em 0;letter-spacing:1px;color:#000;}

#service #website {background: #f1f1f1;}
#service #website .inner {width:1100px;margin:0 auto;padding:100px 0;}

#service #lp {background: #fff;}
#service #lp .inner {width:1100px;margin:0 auto;padding:100px 0;}

#service #system {background: #f1f1f1;}
#service #system .inner {width:1100px;margin:0 auto;padding:100px 0;}

#service #marketing {background: #fff;}
#service #marketing .inner {width:1100px;margin:0 auto;padding:100px 0;}

#service #logomark {background: #f1f1f1;}
#service #logomark .inner {width:1100px;margin:0 auto;padding:100px 0;}

#service #streaming {background: #fff;}
#service #streaming .inner {width:1100px;margin:0 auto;padding:100px 0;}

#service #movie {background: #f1f1f1;}
#service #movie .inner {width:1100px;margin:0 auto;padding:100px 0;}

#service #print {background: #fff;}
#service #print .inner {width:1100px;margin:0 auto;padding:100px 0;}


#service dl {}
#service dl dt {float:left;width:400px;}
#service dl dt img {width:100%;height:auto;}
#service dl dd {float:right;width:650px;}

#service  .note {text-align:center;margin:60px 0 40px 0;font-size:2rem;font-weight:500;}




/* about
------------------------------------------------------------- */

#about #titleheader {height:340px;background:url(../img/about/titleheader.jpg) 50% 50% / cover ;color:#fff;}

#about #container {background: #fff;font-family: fot-tsukuardgothic-std, 游ゴシック体, "Yu Gothic", 游ゴシック, YuGothic, Verdana, メイリオ, Meiryo, sans-serif;}
#about #container .inner {width:1060px;margin:0 auto;padding:60px 0;}

#about #container .inner h3 {font-size:1.9rem;font-weight:500;line-height:2;padding: 30px;margin:0 auto 50px auto;position: relative;}

#about #container .inner h4 {font-size:1.9rem;border-bottom:1px solid #ccc;padding:0 0 10px 0;margin:0 0 1em 0;}

#about #container .inner table {border-collapse: collapse;width:50%;margin:0 auto 70px auto;}
#about #container .inner table th {font-weight:500;padding:20px;border-bottom:1px solid #ccc;text-align:right;}
#about #container .inner table td {padding:20px;border-bottom:1px solid #ccc;}

#about #container .inner .note {text-align:center;margin:0 0 40px 0;font-size:2rem;font-weight:500;}



/* contact
------------------------------------------------------------- */

#contact #titleheader {height:340px;background:url(../img/contact/titleheader.jpg) 50% 50% / cover ;color:#fff;}

#contact #container {background: #fff;padding:0;}
#contact #container .inner {width:1060px;margin:0 auto;padding:60px 0;}
#contact #container .inner h3 {font-size:1.7rem;margin:0 0 50px 0;font-weight:400;letter-spacing:0;line-height:2;text-align:center;}

#contact #container .cform {width: 80%;margin: auto;border-collapse: collapse;}
#contact #container .cform [type=submit] {display: inline-block;font-size: 20px;padding: 10px 30px;text-decoration: none;background: #ff8f00;color: #FFF;border-bottom: solid 4px #B17C00;border-radius: 3px;}

#contact #container .cform th {font-size:1.5rem;width: 30%;text-align:right;border-bottom: solid 1px #d6d6d6;padding: 30px 20px 30px 0;font-weight: normal;}
#contact #container .cform td {font-size:1.5rem;line-height: 150%;border-bottom: solid 1px #d6d6d6;padding: 30px 5px;}

#contact #container .cform option,
#contact #container .cform textarea,
#contact #container .cform input[type=text],
#contact #container .cform input[type=email],
#contact #container .cform input[type=search],
#contact #container .cform input[type=url] {
appearance: none;width: calc(100% - 20px);padding:10px;border:1px solid #666;
}

#contact #container .cform .mwform-tel-field input {width: 6em;}

#contact #container input[type='submit'],
#contact #container input[type='button'],
#contact #container label,
#contact #container button,
#contact #container select {
appearance: none;outline: none;border: none;cursor: pointer;
}

#contact #container .required-srt {font-size: 8pt;padding: 5px;background: #ce0000;color: #fff;border-radius: 3px;margin-left: 10px;vertical-align: middle;}



#contact #container .submit-btn input {color: #fff; display:table; font-size: 1.5rem; font-weight: 700; line-height: 60px; min-width: 240px; height: 60px; padding: 0 15px;margin:30px auto 10px auto;background:#900;text-decoration:none;transition: 0.5s;}
#contact #container .submit-btn input:hover {background: #600;}

#contact #container .back-btn input {color: #fff; display:table; font-size: 1.4rem; font-weight: 700; line-height: 40px; min-width: 200px; height: 50px; padding: 0 15px;margin:30px auto;background:#888;text-decoration:none;transition: 0.5s;}
#contact #container .back-btn input:hover {background: #666;}





/* INFORMATION
------------------------------------------------------------- */

#information #container {background: #fff;padding:100px 0;}
#information #container .inner{width:1100px;margin:0 auto;}
#information #sidebar {float:right;width:300px;padding:0 0 30px 0;}
#information #mainArea {float:left;width:750px;padding:0 0 30px 0;}

#information .entry{
padding:0 0 2em 0;
margin:0 0 2rem 0;
border-bottom:1px solid #ccc;
}

#information .entry-title{
font-size:1.8rem;
margin:0 0 2rem 0;
color:#000;
}
#information .entry-title a{color:#000;}
#information .entry-title a:visited{color:#000;}
#information .entry-title a:hover{color:#b9ac99;}


#information .entry .date{
text-align:right;
font-size:1.2rem;
}
#information .entry a{color:#000;}
#information .entry a:visited{color:#000;}
#information .entry a:hover{color:#b9ac99;}

#information .entry a .icon {
font-size:1.2rem;
font-family: 'Philosopher', sans-serif;
color:#fff;
padding:3px 6px;
background:#b9ac99;
text-decoration:none !important;
}
#information .entry a:visited .icon {background:#b9ac99;text-decoration:none !important;}
#information .entry a:hover .icon {color:#fff;text-decoration:none !important;}

#information .entry p{margin:0 0 1rem 0;}

#information #sidebar h4{padding:0 0 10px 0;margin:0 0 10px 0;border-bottom:2px solid #666;}
#information #sidebar ul{margin:0 0 20px 0;list-style:none;}
#information #sidebar ul li{padding:10px 0 10px 20px;border-bottom:1px dotted #ccc;}

#information #sidebar a{color:#000;}
#information #sidebar a:visited{color:#000;}
#information #sidebar a:hover{color:#b9ac99;}





/* spmenu [SP MENU]
------------------------------------------------------------- */

#spmenu {display:none;}
ul#nav_sp {display:none;}

#nav_sp ul {list-style: none;margin: 0 40px;letter-spacing:2px;}
#nav_sp > ul > li {position: relative;}

#nav_sp a {color: #fff !important;text-decoration: none !important;display: block;padding: 15px 0;border-bottom:1px solid #666;transition: background-color .3s linear;}
#nav_sp a:hover {text-decoration:none !important;background: #113450;color:#fff !important;}

/* sub-menu */
#nav_sp .sub-menu-nav {position: fixed;background: #033560;color: #fff;top: 0;padding-top: 20px;left: 260px;width: 0;height: 100%;overflow: hidden;transition: width .2s ease-out;}
#nav_sp .sub-menu-nav a,
#nav_sp .sub-menu:hover .sub-menu-nav {width: 230px;}

/* nav-toggle */
#nav-toggle {display: none;position: fixed;top: 17px;right: 15px;height: 32px;cursor:pointer;}
#nav-toggle > div {position: relative;width: 32px;}
#nav-toggle span {width: 100%;height: 2px;right: 0;display: block;background: #000;position: absolute;-webkit-transition: .35s ease-in-out;-moz-transition: .35s ease-in-out;transition: .35s ease-in-out;}

#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 11px;width: 28px;}
#nav-toggle span:nth-child(3) {top: 22px;width: 24px;}

#overlay {display: none;position: fixed;background: rgba(0,0,0,.6);width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;}