@charset "UTF-8";
/* CSS Document */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  vertical-align:baseline;
  background:transparent;
}


.pc {
  display: block;
}
.sp {
  display: none;
}
.se {
  display: none;
}

/* =======================================
    共通CSS
======================================= */
/* ------各ブロック-------*/
p, a, ul, li {
  padding: 0;
  margin: 0;
}
section,
header,
footer,
main,
.container {
  width: 100%;
}

main {
  margin: 0 auto;
  position: relative;
}
section{
  margin-bottom: 90px;
}
.container {
  width: 1100px;
  margin: 0 auto;
  padding: 140px 0;
  position: relative;
}
.case{
  margin-bottom: 90px;
}
.box{
  margin-bottom: 50px;
}
section:last-child,.case:last-child,.box:last-child{
  margin-bottom: 0;
}
.name {
  font-size: 15px;
  color: #a6a6a6;
  position: relative;
  bottom: 3px;
  font-weight: normal;
  letter-spacing: 0.8px;
}
p,ul li,a {
	color: #313131;
	font-weight: normal;
	letter-spacing: 0.8px;
	font-size: 15px;
	text-decoration: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ------ Fonts -------*/
.fontDisplay {
  font-family: "Zen Kaku Gothic New", serif;
  font-variation-settings: 'wght' 400;
}




/* ------ h2 -------*/
.page_title_warp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: url(../img/h2-bg.png) no-repeat;
    background-position: center center;
    background-size: contain;
	margin-top: 55px;
}


/* ------ margin -------*/

.m0 {
	margin: 0 !important;
}

.mt0 {
	margin-top: 0 !important;
}

.mr0 {
	margin-right: 0 !important;
}

.mb0 {
	margin-bottom: 0 !important;
}

.ml0 {
	margin-left: 0 !important;
}

.m5 {
	margin: 5px !important;
}

.mt5 {
	margin-top: 5px !important;
}

.mr5 {
	margin-right: 5px !important;
}

.mb5 {
	margin-bottom: 5px !important;
}

.ml5 {
	margin-left: 5px !important;
}

.m10 {
	margin: 10px !important;
}

.mt10 {
	margin-top: 10px !important;
}

.mr10 {
	margin-right: 10px !important;
}

.mb10 {
	margin-bottom: 10px !important;
}

.ml10 {
	margin-left: 10px !important;
}

.m15 {
	margin: 15px !important;
}

.mt15 {
	margin-top: 15px !important;
}

.mr15 {
	margin-right: 15px !important;
}

.mb15 {
	margin-bottom: 15px !important;
}

.ml15 {
	margin-left: 15px !important;
}

.m20 {
	margin: 20px !important;
}

.mt20 {
	margin-top: 20px !important;
}

.mr20 {
	margin-right: 20px !important;
}

.mb20 {
	margin-bottom: 20px !important;
}

.ml20 {
	margin-left: 20px !important;
}

.m25 {
	margin: 25px !important;
}

.mt25 {
	margin-top: 25px !important;
}

.mr25 {
	margin-right: 25px !important;
}

.mb25 {
	margin-bottom: 25px !important;
}

.ml25 {
	margin-left: 25px !important;
}

.m30 {
	margin: 30px !important;
}

.mt30 {
	margin-top: 30px !important;
}

.mr30 {
	margin-right: 30px !important;
}

.mb30 {
	margin-bottom: 30px !important;
}

.ml30 {
	margin-left: 30px !important;
}

.m35 {
	margin: 35px !important;
}

.mt35 {
	margin-top: 35px !important;
}

.mr35 {
	margin-right: 35px !important;
}

.mb35 {
	margin-bottom: 35px !important;
}

.ml35 {
	margin-left: 35px !important;
}

.m40 {
	margin: 40px !important;
}

.mt40 {
	margin-top: 40px !important;
}

.mr40 {
	margin-right: 40px !important;
}

.mb40 {
	margin-bottom: 40px !important;
}

.ml40 {
	margin-left: 40px !important;
}

.m45 {
	margin: 45px !important;
}

.mt45 {
	margin-top: 45px !important;
}

.mr45 {
	margin-right: 45px !important;
}

.mb45 {
	margin-bottom: 45px !important;
}

.ml45 {
	margin-left: 45px !important;
}

.m50 {
	margin: 50px !important;
}

.mt50 {
	margin-top: 50px !important;
}

.mr50 {
	margin-right: 50px !important;
}

.mb50 {
	margin-bottom: 50px !important;
}

.ml50 {
	margin-left: 50px !important;
}

.m55 {
	margin: 55px !important;
}

.mt55 {
	margin-top: 55px !important;
}

.mr55 {
	margin-right: 55px !important;
}

.mb55 {
	margin-bottom: 55px !important;
}

.ml55 {
	margin-left: 55px !important;
}

.m60 {
	margin: 60px !important;
}

.mt60 {
	margin-top: 60px !important;
}

.mr60 {
	margin-right: 60px !important;
}

.mb60 {
	margin-bottom: 60px !important;
}

.ml60 {
	margin-left: 60px !important;
}

.m65 {
	margin: 65px !important;
}

.mt65 {
	margin-top: 65px !important;
}

.mr65 {
	margin-right: 65px !important;
}

.mb65 {
	margin-bottom: 65px !important;
}

.ml65 {
	margin-left: 65px !important;
}

.m70 {
	margin: 70px !important;
}

.mt70 {
	margin-top: 70px !important;
}

.mr70 {
	margin-right: 70px !important;
}

.mb70 {
	margin-bottom: 70px !important;
}

.ml70 {
	margin-left: 70px !important;
}

.m75 {
	margin: 75px !important;
}

.mt75 {
	margin-top: 75px !important;
}

.mr75 {
	margin-right: 75px !important;
}

.mb75 {
	margin-bottom: 75px !important;
}

.ml75 {
	margin-left: 75px !important;
}

.m80 {
	margin: 80px !important;
}

.mt80 {
	margin-top: 80px !important;
}

.mr80 {
	margin-right: 80px !important;
}

.mb80 {
	margin-bottom: 80px !important;
}

.ml80 {
	margin-left: 80px !important;
}

.mb100 {
	margin-bottom: 100px !important;
}

.mb130 {
	margin-bottom: 130px !important;
}

/* padding - 要素の内側の余白 */
.p0 {
	padding: 0 !important;
}

.pt0 {
	padding-top: 0 !important;
}

.pr0 {
	padding-right: 0 !important;
}

.pb0 {
	padding-bottom: 0 !important;
}

.pl0 {
	padding-left: 0 !important;
}

.p5 {
	padding: 5px !important;
}

.pt5 {
	padding-top: 5px !important;
}

.pr5 {
	padding-right: 5px !important;
}

.pb5 {
	padding-bottom: 5px !important;
}

.pl5 {
	padding-left: 5px !important;
}

.p10 {
	padding: 10px !important;
}

.pt10 {
	padding-top: 10px !important;
}

.pr10 {
	padding-right: 10px !important;
}

.pb10 {
	padding-bottom: 10px !important;
}

.pl10 {
	padding-left: 10px !important;
}

.p15 {
	padding: 15px !important;
}

.pt15 {
	padding-top: 15px !important;
}

.pr15 {
	padding-right: 15px !important;
}

.pb15 {
	padding-bottom: 15px !important;
}

.pl15 {
	padding-left: 15px !important;
}

.p20 {
	padding: 20px !important;
}

.pt20 {
	padding-top: 20px !important;
}

.pr20 {
	padding-right: 20px !important;
}

.pb20 {
	padding-bottom: 20px !important;
}

.pl20 {
	padding-left: 20px !important;
}

.p25 {
	padding: 25px !important;
}

.pt25 {
	padding-top: 25px !important;
}

.pr25 {
	padding-right: 25px !important;
}

.pb25 {
	padding-bottom: 25px !important;
}

.pl25 {
	padding-left: 25px !important;
}

.p30 {
	padding: 30px !important;
}

.pt30 {
	padding-top: 30px !important;
}

.pr30 {
	padding-right: 30px !important;
}

.pb30 {
	padding-bottom: 30px !important;
}

.pl30 {
	padding-left: 30px !important;
}

.p35 {
	padding: 35px !important;
}

.pt35 {
	padding-top: 35px !important;
}

.pr35 {
	padding-right: 35px !important;
}

.pb35 {
	padding-bottom: 35px !important;
}

.pl35 {
	padding-left: 35px !important;
}

.p40 {
	padding: 40px !important;
}

.pt40 {
	padding-top: 40px !important;
}

.pr40 {
	padding-right: 40px !important;
}

.pb40 {
	padding-bottom: 40px !important;
}

.pl40 {
	padding-left: 40px !important;
}

.p45 {
	padding: 45px !important;
}

.pt45 {
	padding-top: 45px !important;
}

.pr45 {
	padding-right: 45px !important;
}

.pb45 {
	padding-bottom: 45px !important;
}

.pl45 {
	padding-left: 45px !important;
}

.p50 {
	padding: 50px !important;
}

.pt50 {
	padding-top: 50px !important;
}

.pr50 {
	padding-right: 50px !important;
}

.pb50 {
	padding-bottom: 50px !important;
}

.pl50 {
	padding-left: 50px !important;
}

.p55 {
	padding: 55px !important;
}

.pt55 {
	padding-top: 55px !important;
}

.pr55 {
	padding-right: 55px !important;
}

.pb55 {
	padding-bottom: 55px !important;
}

.pl55 {
	padding-left: 55px !important;
}

.p60 {
	padding: 60px !important;
}

.pt60 {
	padding-top: 60px !important;
}

.pr60 {
	padding-right: 60px !important;
}

.pb60 {
	padding-bottom: 60px !important;
}

.pl60 {
	padding-left: 60px !important;
}

.p65 {
	padding: 65px !important;
}

.pt65 {
	padding-top: 65px !important;
}

.pr65 {
	padding-right: 65px !important;
}

.pb65 {
	padding-bottom: 65px !important;
}

.pl65 {
	padding-left: 65px !important;
}

.p70 {
	padding: 70px !important;
}

.pt70 {
	padding-top: 70px !important;
}

.pr70 {
	padding-right: 70px !important;
}

.pb70 {
	padding-bottom: 70px !important;
}

.pl70 {
	padding-left: 70px !important;
}

.p75 {
	padding: 75px !important;
}

.pt75 {
	padding-top: 75px !important;
}

.pr75 {
	padding-right: 75px !important;
}

.pb75 {
	padding-bottom: 75px !important;
}

.pl75 {
	padding-left: 75px !important;
}

.p80 {
	padding: 80px !important;
}

.pt80 {
	padding-top: 80px !important;
}

.pr80 {
	padding-right: 80px !important;
}

.pb80 {
	padding-bottom: 80px !important;
}

.pl80 {
	padding-left: 80px !important;
}


/* ------表示-------*/
.center {
    text-align: center;
}

a.mainBtn {
    margin: 128px auto 0;
    text-align: center;
    padding: 17px;
    background: #000;
    width: 35%;
    display: block;
    color: #FFF;
    font-weight: 600;
}
a.mainBtn:hover {
	background: #717171;
	transition: 0.3s;
	color: #FFF;
}

a.subBtn {
	margin: 88px auto 0;
	text-align: center;
	padding: 17px;
	background: #000;
	width: 40%;
	display: block;
	color: #FFF;
	font-weight: 600;
}
a.subBtn:hover {
	background: #717171;
	transition: 0.3s;
	color: #FFF;
}


/* ------タイトル-------*/
.section_titles {
  margin-bottom: 50px;
  text-align: center;
}
.section_title {
  font-size: 50px;
  font-weight: bold;
  line-height: 1.5;
}
.scttl_sub {
  color: #a19999;
  font-weight: normal;
}

p.attention-getter {
    color: #313131;
    font-weight: normal;
    letter-spacing: 0.8px;
    line-height: 2.4em;
    font-size: 15px;
    text-decoration: none;
    margin: 0;
    padding: 0;
    list-style: none;
	margin-bottom: 38px;
}
h1  {
    position: relative;
    top: 22px;
    line-height: 0.4em;
}

h1 a {
    font-weight: 600;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 17px;
    color: #6b6b6b;
}
h3 {
  color: #454545;
  font-size: 25px;
  font-weight: 500;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 2px;
}
h4 {
  color: #474747;
  letter-spacing: 2px;
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 20px;
}
span.en {
  font-family: "Montserrat";
}

span.headerImg {
    width: 53%;
    display: block;
}

/* ------テキスト、フォント-------*/
.poppins {
  font-family: "Poppins", sans-serif;
}
.sawarabi {
  font-family: 'Sawarabi Mincho', serif;
}
.plane_text {
  line-height: 2;
  color: #484848;
}
span.small-text {
  font-size: 14px;
  color: #a4a4a4;
  font-weight: normal;
  padding: 0 20px;
  position: relative;
  bottom: 2px;
  letter-spacing: 0.5px;
}
.white-text {
  color: #FFF;
}
p.name {
  text-align: left;
  font-size: 26px;
  font-weight: 600;
  color: #595959;
}

/* ------ボタン-------*/

a.btn_main {
  display: block;
  margin: 50px auto 0;
  width: 250px;
  background: #DE5161;
  color: #fff;
  letter-spacing: 0.8px;
  text-align: center;
  border-radius: 40px;
  padding: 9px 24px;
  line-height: 2.4em;
  font-size: 14px;
}
a.btn_main:hover {
  background-color: #C93C4C;
  opacity: 1;
}
.Sectionbtn a {
  background: #FFF;
  border: 1px solid #1531b3;
  padding: 20px 80px;
  color: #1531b3;
}
.Sectionbtn a:hover {
  background: #1531b3;
  color: #FFF;
  transition: 0.7s;
}

/* ------heightをwidthとの比で指定-------*/
.calc_height_o {
  position: relative;
  /* width指定 */
}
.calc_height_o::before {
  content: "";
  display: block;
  /* 高さ（padding-top）を比率で指定 */
  /* padding-top: %; */
}
.calc_height_i {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* ------画像を横幅に合わせてトリミング-------*/
.fitimg {
  overflow: hidden;
  position: relative;
  /* width、heightを指定 */
}
.fitimg img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}

/* ------flex_box-------*/
.flex_box {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

/* ------エラー文-------*/

/* ------ヘッダー-------*/
header {
	width: 100%;
	min-width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
}

header.scrolled {
	background: #fffff;
	padding: 0 0 16px;
}

header .container {
  height: 100%;
  padding: 0 3% 8px;
  min-width: 100%;
  width: 100%;
  transition: 0.3s;
}
header .flex_box {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.header_title img {
  height: auto;
  transition: 0.3s;
}
.header_menu li {
  display: inline-block;
}
.header_menu ul {
    margin: 33px 0 0;
}
.header_menu > ul > li:last-of-type {
  transition: 0.3s;
}
.header_menu > ul > li a:hover {
    opacity: 1;
    color: #6b95ce;
}
.header_menu > ul > li {
    font-weight: 500;
    margin: 0 20px;
    font-size: 14px;
	line-height: 1.8em;
    text-align: center;
}
.header_menu > ul > li > a{
    display: block;
    transition: 0.3s;
    font-size: 13px;
    color: #848484;
    letter-spacing: 0.8px;
    font-family: "Montserrat";
    font-weight: 500;
}
#about .header_menu > ul > li > a{
  color: #FFF;
}
#about .header_menu > ul > li > a:hover {
  color: #e4875b;
}
#works .header_menu > ul > li > a{
  color: #FFF;
}
#works .header_menu > ul > li > a:hover {
  color: #6a79c1;
}
.nav_menu {
    display: none;
}

span.menuJP {
    display: block;
    color: #313131;
}


@media (max-width: 1400px) {
  .header_menu > ul > li:last-of-type {
    margin-left: 25px;
  }
  .header_menu > ul > li:last-of-type {
    margin-left: 25px;
  }
  .header_menu > ul > li > a{
    padding: 40px 25px;
  }
}
@media (max-width: 1300px) {
  header .container {
    padding: 0 2%;
  }
  .header_title img {
    width: 170px;
  }
  .header_menu > ul > li:last-of-type {
    margin-left: 20px;
  }
  .header_menu > ul > li > a{
    padding: 40px 20px;
  }
}

/* .contact_btn  */
.header_menu a.contact_btn {
    color: #848484;
    letter-spacing: 0.8px;
    text-align: center;
    border-radius: 40px;
    font-size: 13px;
}
.header_menu a.contact_btn:hover {
  color: #6b95ce;
  opacity: 1;
}

/* ドロップダウンメニュー */
.dropdown .active{
  color: #53A222;
}
.dropdown > a::before{
  content: '';
  background: url(../img/arrow_header_g.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  display: inline-block;
  margin-right: 10px;
  height: 9px;
  width: 11px;
  transition: 0.3s;
}
.dropdown > a.active::before{
  transform:rotate(180deg); 
}

.dropdown ul{
  display: none;
  position: absolute;
  top: 90px;
  width: 300px;
  margin-left: 30px;
}
.dropdown ul li {
  width: 100%;
}
.dropdown ul li a {
  border-left: 4px solid rgba(42, 59, 53, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 90%);
  background-color: rgba(103, 180, 55, 90%);
  color: #fff;
  display: block;
  font-weight: normal;
  padding: 7px 15px;
  position: relative;
  text-decoration: none;
  width: 100%;
}
.dropdown ul li:nth-child(1) a{
  border-top: none;
}
.dropdown ul li a::after{
  content: '';
  background: url(../img/arrow_header_w.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  height: 11px;
  width: 9px;

  position: absolute;
  right: 15px;
  top: 15px;
}
.dropdown ul li a:hover{
  background-color: rgba(83, 162, 34, 96%);
  color: #fff;
}
 
/* spメニュー */
.nav_button {
	display: none;
	width: 35px;
	height: 35px;
}
.nav_button img {
  width: 100%;
  height: auto;
}

.nav_menu ul {
  width: 100%;
  padding: 0 20px;
  margin-bottom: 20px;
}
.nav_menu li {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #f0f0f0;
}
.nav_menu li a {
  display: block;
  position: relative;
  width: 100%;
  line-height: 50px;
  color: #6f6f6f;
  font-size: 15px;
}
.nav_menu li a img {
  width: 8px;
  height: auto;
  position: absolute;
  top: 20px;
  right: 0;
}






/* ------フッター-------*/

#footer .container {
    width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
    position: relative;
    text-align: center;
}
.copyright {
    border-top: 1px solid #dfdfdf;
    padding: 18px 0;
    font-size: 14px;
}

/* ------TOPへ戻るボタン-------*/
.topbtn_warp{
  position: relative;
}
.topbtn {
    width: 100%;
    background: #0e102a;
    border: none;
    padding: 15px 0;
    color: #FFF;
    font-size: 14px;
    font-weight: 600;
    height: 60px;
}
.topbtn img {
  height: auto;
}
.topbtn:hover {
  opacity: 1;
  background-color: #6b95ce;
}

/*------- お問い合わせエリア -------*/
.section_contact h3 {
    margin-bottom: 20px;
    font-size: 23px;
    line-height: 1.5em;
    letter-spacing: 0px;
    font-family: auto;
    border-left: none;
    text-align: center;
}
.contact_warp{
  position: relative;
  margin-bottom: -200px;
  overflow: hidden;
  height: 440px;
  width: 100%;
  transition: 0.3s;
}
.contact_warp .bg_contact{
  background-color: #267633;
  width: 94%;
  height: 340px;
  position: absolute;
  top: 0;
  right: 0;
  transition: 0.3s;
}
.contact_warp .bg_contact::after{
  content: '';
  background: url(../img/bg_contact_pc.jpg) no-repeat;
  background-size: cover;
  background-position: center center;
  display: block;
  height: 340px;
  margin-left: 100px;
  margin-top: 100px;
  width: 100%;
  transition: 0.3s;
}
@media (max-width: 1500px) {
  .contact_warp{
    margin-bottom: -180px;
    height: 420px;
  }
  .contact_warp .bg_contact{
    width: 100%;
  }
  .contact_warp .bg_contact::after{
    margin-left: 80px;
    margin-top: 80px;
  }
}
.contact_warp .container{
  padding-bottom: 0;
  padding-top: 180px;
  transition: 0.3s;
  width: 1140px;
}
.contact_warp p{
  color: #fff;
  font-size: 26px;
  text-align: center;
  transition: 0.3s;
}
.contact_warp a.btn_main{
  margin: 30px auto 0;
  width: 320px;
}
@media (max-width: 1600px) {
  .contact_warp p{
    font-size: 25px;
  }
}
@media (max-width: 1500px) {
  .contact_warp .container{
    padding-top: 160px;
  }
  .contact_warp p{
    font-size: 24px;
  }
}
@media (max-width: 1200px) {
  .contact_warp p{
    font-size: 22px;
  }
}

/* ------コンテンツを下からフロート-------*/
.show_up {
  transform: translate(0, 200px);
  opacity: 0;
}
.show_up.show {
  animation-duration: 1.5s;
  animation-name: show_up;
  animation-fill-mode: forwards;
}
@keyframes show_up {
  from {
    transform: translate(0, 200px);
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}


/* =======================================
    TOPページ
======================================= */
main#pageTop{
  width: 100%;
  margin-top: 108px;
  margin-bottom: 0;
}
main#pageTop section{
  margin-bottom: 0;
}

/* ------ローディング画面-------*/
.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5000;
  background-color: #fff;

  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.loading.hide {
  animation-duration: 1s;
  animation-name: loadingHide;
  animation-fill-mode: forwards;
}
@keyframes loadingHide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.loading.end {
  z-index: -10;
}
.loading p {
  letter-spacing: 0;
  font-size: 49px;
  font-weight: 600;
}
.loading p span {
  opacity: 0;
}
.loading p span.show {
  animation-duration: 0.7s;
  animation-name: showLetter;
  animation-fill-mode: forwards;
}
@keyframes showLetter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ------メインビジュアル-------*/
#section_mv{
  position: relative;
  padding-top: 42%;
  transition: 0.3s;
}
#section_mv .container{
  padding: 0;
  position: absolute;
  top: 0;
  width: 90%;
  right: 5%;
  transition: 0.3s;
}
#section_mv .bg_contact{
    width: 89.1%;
    position: absolute;
    top: 150px;
    left: 180px;
    transition: 0.3s;
}
#section_mv .bg_contact::before{
  content: '';
  background-color: #ec7c89;
  display: block;
  padding-top: 38.06%;
  transition: 0.3s;
}
@media (max-width: 1300px) {
  #section_mv{
    padding-top: 43%;
  }
  #section_mv .container{
    width: 94%;
    right: 0;
  }
  #section_mv .bg_contact{
    width: 96%;
  }
}
.mv_box{
  position: relative;
  padding-top: 42.5%;
}
.mv_img,.mv_text{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.mv_img .fitimg {
  width: 100%;
  height: 100%;
}
.mv_img .fitimg img {
  animation-duration: 25s;
  /*animation-name: zoom;*/
  animation-fill-mode: none;
}
@keyframes zoom {
  from {
    width: 100%;
  }
  to {
    width: 150%;
  }
}

.mv_text {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: right;
  width: 100%;
}
.mv_text .pc {
  width: 70%;
  position: relative;
  left: 28%;
  top: 259px;
}
.mv_text p {
  color: #fff;
  font-size: 56px; /*IE対策 */
  font-size: clamp(10px, 2.917vw, 56px);
  text-align: center;
  text-shadow: 1px 1px 12px rgba(0, 0, 0, 0.23);
}
.scroll_down{
  position: absolute;
  left: 1.2%;
  bottom: 13%;
  width: 2.5%;
}
.scroll_down img{
  width: 100%;
  height: auto;
}
@media (max-width: 1050px) {
  .scroll_down{
    display: none;
  }
}

/* ------ News お知らせ & ニュース -------*/
#section_top_news ul li{
  border-bottom: 1px dashed #B9B9B9;
  padding-bottom: 30px;
  margin-bottom: 20px;
}
#section_top_news ul li:last-child{
  margin-bottom: 0;
}
#section_top_news ul li a{
  color: #393939;

  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}
#section_top_news .title{
    padding-left: 0;
    font-size: 18px;
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
}
span.text {
    color: #8b8b8b;
    font-weight: normal;
    display: block;
}
.text_box {
    padding-left: 30px;
    flex: 1;
}
.scroll-contents {
  height: 280px;
  overflow: scroll;
} 


/* =======================================

    プロフィール

======================================= */

.section-profile .career p {
    margin-bottom: 28px;
    line-height: 2.2em;
}

p.experience {
    margin-left: 35px;
}

img.toolIcon {
    width: 23px;
    height: auto;
}

p.skill-item {
    display: flex
;
    align-items: center;
    gap: 10px;
}

.profileContents h3 {
    font-size: 30px;
    font-weight: 500;
    line-height: 1.6em;
}
#section_top_profile .bg_area {
  background: url(../img/top/profile_pc.png);
  height: 410px;
  background-size: auto;
}
#section_top_profile .container {
  position: relative;
  bottom: 420px;
}
section.section-teable {
	margin: 0 auto;
	padding: 40px;
	border-radius: 26px;
	box-shadow: 0 0 30px #b4b1b19c, 0 2px 3px -2px #d1d1d19c;
	position: relative;
	background-color: #FFF;
	background-image: url(../img/top/profile-bg.png);
	background-repeat: no-repeat;
	background-size: inherit;
	background-position: top -59px right -47px;
	max-width: 1080px;
}

section#section_top_profile {
  height: 940px;
}

.section-profile p {
    margin-bottom: 0;
}

span.date {
    display: block;
    color: #707070;
}

#about .row {
    width: 100%;
}


#about .about-timelines {
    --timeline-left-padding: var(--vspace-1_75);
    --timeline-top-adjust: var(--vspace-0_5);
    padding-top: 0;
}

.left-contents {
  width: 33.5%;
  margin-right: 30px
}
.right-contents {
  width: 64%;
}
.profile-details {
  display: flex;
}






/* =======================================
    以下下層ページ
======================================= */

/* ------ プロフィール -------*/

#skills {
    margin-left: 125px;
}

#skills ul li {
    display: flow;
    margin-bottom: 25px;
}
ul.otherslills {
    margin-right: 22px;
}
ul.otherslills li {
    font-size: 15px;
    margin-bottom: 0 !important;
}
ul.otherslills:last-child {
    margin-right: 0;
}

p.message {
    font-size: 40px;
    letter-spacing: 1.9px;
}

p.profileName {
    color: #454545;
    font-size: 31px;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 2px;
    margin: 0 0 18px 0;
}

span.suubtitle {
    margin-left: 28px;
    font-family: "Montserrat";
    font-size: 15px;
    font-weight: normal;
    color: #afafaf;
    padding: 0;
    letter-spacing: 0.8px;
    position: relative;
    bottom: 3px;
    right: 5px;
}

span.circle {
    color: hsl(214.48deg 62.58% 69.8%);
    padding-left: 0px;
    display: block;
    margin-left: auto;
}

#skills ul {
    display: inline-block;
}


.section-profile ul li {
    display: inline-grid;
}

.sectionLeftParts {
    margin-right: 0;
    width: 78%;
}

.profList p {
    margin-bottom: 10px;
}

span.skill {
    display: block;
    font-family: "Montserrat";
    font-size: 15px;
    color: #5b5b5b;
}


.sectionRightParts {
	width: 724px;
	position: relative;
	bottom: 1px;
	right: 20px;
}

.profileContents ul {
  display: flex;
  list-style: none;
  padding: 0;
}

.profileContents ul li {
  flex: 1;
}

/* ------ 実績一覧 -------*/
h4.jpH4 {
    font-size: 22px;
    font-weight: 500;
}
span.menuList {
	display: block;
	padding: 8px 0 0 14px;
	font-size: 12px;
	color: #9b9b9b;
}
.boxWorks h4 {
    margin-bottom: 24px;
    font-size: 26px;
}
main#worksDetails h4 {
    border-left: 5px solid #6b95ce;
    padding-left: 20px;
    height: 28px;
    margin-bottom: 32px;
}
.tabs ul li:hover {
    color: #6A95CC;
    transition: 0.3s;
}
.works-list ul {
  display: flex;
}
.works-list ul li {
  margin: 0 20px;
}
.works-list {
  width: 775px;
}
.worksDetails {
    margin-bottom: 50px;
}
span.worksTitle {
  width: 93px;
  display: inline-block;
}
.boxWorks p {
  margin-bottom: 14px;
}
.page_works #sideContents{
  position: -webkit-sticky;
  position: sticky;
  top: 108px;
  height: 273px;
  width: 327px;
  margin-left: 60px;
}
.boxWorks ul li {
    margin-right: 58px;
    width: 43%;
    height: auto;
}

.boxWorks ul {
  display: inline-flex;
}
.boxWorks a:hover {
  opacity: 0.7;
}
.boxWorks ul li:nth-child(2) {
  width: 422px;
}
#tab02_content,
#tab03_content,
#tab04_content,
#tab05_content{
  display: none;
}

.worksDetails p {
	border-bottom: 1px solid #e7e7e7;
	padding: 15px 0;
}

/* ------ 実績詳細 -------*/
main#worksDetails h5 {
	margin-bottom: 40px;
	font-size: 16px;
	padding: 6px 0 4px 13px;
	white-space: nowrap;
	font-weight: bold;
	color: #333;
	background: #f6f6f6;
	border-bottom: 1px solid #e0e0e0;
}

span.FormTitle {
    width: 170px;
    display: inline-block;
}

p.backbutton {
    color: #ffffff;
    font-size: 15px;
    letter-spacing: 0.8px;
    background: #000;
    padding: 17px;
    width: 50%;
    display: block;
    text-align: center;
    font-weight: 600;
    margin: 0 auto;
}

p.backbutton a {
    color: #FFF;
    font-weight: 600;
    display: block;
}
p.backbutton:hover {
    color: #c1c1c1;
    background: #747474;
    transition: 0.3s;
}
}


/* ------ 共通 -------*/
/* .page_title_warp */

.page_title_warp{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 230px;
}

.page_title_warp .page_title{
	font-size: 33px;
	font-weight: 500;
	text-align: left;
	letter-spacing: 2px;
	color: #494949;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	width: 100%;
	padding: 0;
	position: relative;
    margin-top: 28px;
    top: 90px;
    height: 379px;
    background-size: contain;
}

.page_title_warp .page_title .en{
  display: block;
  font-size: 15px;
  font-weight: normal;
  color: #afafaf;
  padding: 10px 0 0 4px;
  letter-spacing: 0.8px;
}

.h2-bg-area {
  width: 1080px;
  margin: 0 auto;
  padding: 40px 40px 40px 0;
}

.portfolio-filters li:hover, 
.portfolio-filters li.filter-active {
    color: var(--contrast-color);
    background-color: var(--accent-color);
}
.portfolio-filters li:last-child {
    margin-right: 0;
}

ul.portfolio-filters.isotope-filters {
	text-align: center;
	margin: 50px 0 0;
	display: inline-flex;
}
ul.portfolio-filters li {
    padding: 0 16px;
}


span.NameEn {
    margin-left: 28px;
    font-family: "Montserrat";
    font-size: 16px;
    color: #5f5f5f;
    position: relative;
    bottom: 6px;
}
.col-lg-6 strong, b {
    width: 18px;
    display: inline-block;
}

.about-info__text .col-lg-6 ul li {
    color: #313131;
    font-size: 15px;
    line-height: 2.1em;
}

.about-info__text ul li {
    padding: 0;
    margin: 0;
}




/* text Design */
.title_main{
	font-size: 30px;
	font-weight: 500;
	margin-bottom: 50px;
	padding-bottom: 5px;
	font-family: 'Montserrat';
	line-height: 1.6em;
}
.title_sub{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}
.title_sub span:nth-child(2){
  flex: 1;
}
.text_notes{
  font-size: 90%;
}
.text_box p,.list li{
  color: #868282;
  line-height: 2;
}
.pankuzu ul li {
    display: inline;
    padding: 0 12px;
	color : #313131;
}
.pankuzu ul li a:hover {
    color: #6b95ce;
}
li.allow {
    color: #b8b8b8 !important;
}

/* number Design */
.number{
  background-color: #82B953;
  border-radius: 26px;
  color: #fff;
  display: inline-block;
  font-size: 17px;
  font-weight: bold;
  line-height: 26px;
  margin-right: 10px;
  text-align: center;
  height: 26px;
  width: 26px;
}

/* list Design */
.list li{
  margin-bottom: 5px;
}
.list li:last-child{
  margin-bottom: 0;
}
.list_a li{
  position: relative;
}

.list_b li{
  padding-left: 1.5em;
  position: relative;
  margin-bottom: 10px;
}
.list_b li::before{
  content: '○';
  position: absolute;
  left: 0;
}
.list_b li:last-child{
  margin-bottom: 0;
}
.list_c{
  margin-top: 10px;
  margin-left: -1.5em;
}
.list_c li{
  padding-left: 1.5em;
  position: relative;
  margin-bottom: 10px;
}
.list_c li::before{
  content: '−';
  position: absolute;
  left: 0;
  margin-right: 0.5em;
}
.list_c li:last-child{
  margin-bottom: 0;
}

/* .tb_style */
.tb_style {
  width: 100%;
  border: 1px solid #ddd;
  border-collapse: collapse;
  table-layout: unset;
}
/* thead */
.tb_style thead th{
  background-color: #267633;
  color: #fff;
  text-align: left;
  font-size: 18px;
  font-weight: normal;
}
.tb_style thead th span{
  display: inline-block;
  padding: 12px 20px;
}
.tb_style thead th .project{
  background-color: #0D5A1A;
}
/* tbody */
.tb_style tbody th,.tb_style tbody td{
  padding: 15px 20px;
  line-height: 2;
}
.tb_style tbody th {
    border-bottom: 1px solid #D5D5D5;
    border-right: 1px solid #D5D5D5;
    background-color: #F8F8F8;
    box-sizing: border-box;
    color: #272727;
    text-align: left;
    font-weight: normal;
    width: 27%;
    vertical-align: middle;
}
.tb_style tbody td {
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  color: #535353;
  text-align: left;
  background-color: #FFF;
}



/* ------ サービスページ共通 -------*/
.page_works{
  display: -webkit-box;
  display: -ms-flexbox;
  margin: 0 auto;
  width: 1080px;
  margin-top: 180px;
}
.page_works #mainContents{
  width: 775px;
}

.page_works section{
  min-width: auto;
}


/* .side_nav_box */
.side_nav_box {
    box-sizing: border-box;
    margin-top: 30px;
}
.side_nav_box .title_side{
  background-color: #267633;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  padding: 12px 25px;
}
.side_nav_box li{
  padding-left: 1em;
  position: relative;
  margin-bottom: 10px;
}
.side_nav_box li::before{
  content: '';
  background: url(../img/arrow_side_nav.png);
  background-size: 100% auto;
  width: 9px;
  height: 11px;

  position: absolute;
  left: 0;
  top: 9px;
}
.side_nav_box li:last-child{
  margin-bottom: 0;
}


/* ------ スキル -------*/
.bold {
  font-weight: 600;
}
.skillsBox ul li {
  display: inline-block;
  margin: 0 18px;
}
.otherSkills li {
  background: #f7f7f7;
  text-align: center;
  padding: 18px;
  border-radius: 20px;
  width: 196px;
}
.skillsBox ul li:first-child {
  margin: 0;
}
.skillsBox ul li:nth-child(3) {
  margin: 0;
}
.skillsBox ul li:nth-child(4) {
  margin: 0 0 0 18px;
}
p.smallText {
	font-size: 13px;
	line-height: 1.4em;
	display: block;
}
span.skillText {
    display: block;
    font-size: 15px;
	color : #313132;
}



/* ------ 業務実績ページ -------*/
#pageWorks .list_b li{
  color: #000;
}
#pageWorks #sec03 p{
  color: #535353;
}


/* ------ 業務詳細ページ -------*/
#worksDetails .container {
  margin-top: 0;
  padding-top: 0;
}

.profList ul li {
    flex: none;
}

.profList ul {
    display: block;
    list-style: none;
    padding: 0;
}
span.Lists {
    width: 90px;
    display: inline-table;
}


/* =======================================
    お知らせ一覧
======================================= */
ul.blog_list li {
    margin-bottom: 40px;
    border-bottom: 1px dotted #c9c9c9;
}
.blog_list .text_box {
    padding-left: 30px;
    flex: 1;
}
.blog_list .thum_blog {
    display: inline-block;
    position: relative;
    width: 110px;
    height: 110px;
}
.thum_blog img {
    width: 100%;
    height: 100%;
}
.blog_list li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    align-items: flex-start;
}
#pageNews .contentsNews ul li {
  margin-bottom: 50px;
}
.contentsNews ul li {
    border-bottom: 1px dashed #B9B9B9;
    padding-bottom: 13px;
    margin-bottom: 30px;
}


/* =======================================
    お知らせ詳細
======================================= */
span.category {
    background: #de5161;
    padding: 2px 6px;
    color: #FFF;
    font-weight: normal;
    border-radius: 3px;
    margin-right: 8px;
    font-size: 13px;
}
#PageNews .container {
    width: 980px ;
    margin: 0 auto;
    padding: 140px 0;
    position: relative;
    min-width: 980px;
}
.thumbnail_box {
    text-align: center;
}
.date_cate_box {
    margin: 20px 0;
    font-size: 14px;
    color: #767676;
}
a.link_back {
    background: #a5a5a5;
    font-weight: 600;
}
.navigation_area {
    text-align: center;
    margin-top: 60px;
}

.navigation_area a {
	color: #ffffff;
	font-size: 15px;
	letter-spacing: 0.8px;
	background: #000;
	padding: 17px;
	width: 50%;
	display: block;
	text-align: center;
	font-weight: 600;
	margin: 0 auto;
}
h2.title_article {
    font-size: 30px;
    font-weight: 500;
}
.thumbnail_box img {
    width: 100%;
    height: auto;
    margin: 30px auto;
}


/* =======================================
    MV
======================================= */
span.NameEnTop {
    font-size: 237px;
    display: block;
    font-weight: 400;
    font-style: normal;
    font-family: "Bebas Neue", sans-serif;
}

/* =======================================
    トップページ
======================================= */
.timeline__desc {
    width: 90%;
}
span.small {
    font-size: 84px;
    padding-right: 13px;
}

.bg-curve {
    position: absolute;
    width: 60%;
    height: 100%;
    top: 0;
    right: 0;
    background-repeat: no-repeat;
    background-position: top right;
    background-size: cover;
}

.projectCounts {
    position: absolute;
    width: 60%;
    height: 100%;
    top: 96%;
    left: 3%;
}

li.projectTitle {
    font-size: 17px;
    margin-bottom: 30px;
    letter-spacing: 0.5px;
    line-height: 1.4em;
}
span.plus {
    font-size: 29px;
    padding-right: 9px;
    position: relative;
    bottom: 4px;
    color: #979797;
    left: 8px;
}
span.bigText {
    font-size: 43px;
}

tab_label.active {
    color: #fff;
    background-color: #40C5BD;
}
.tabs {
  display: flex;
  flex-wrap: wrap;
}
.tab_label {
    color: #838383;
    font-weight: 500;
    position: relative;
    z-index: 1;
    background: #fcfcfc;
    cursor: pointer;
    flex: 1;
    margin: 0;
    line-height: 2.15;
    height: 62px;
    text-align: center;
    padding: 15px;
    font-weight: normal;
}

.tab_content {
  flex: 100%;
  overflow: hidden;
}
input[name="tab_switch"] {
  display: none;
}
label.tab_label.active {
    color: #fff;
    background-color: #40C5BD;
}
label.tab_label:hover {
    background: #000;
    transition: 0.3s;
    color: #FFF;
}



/* =======================================
    お問い合わせ
======================================= */
#pageContact .container {
	width: 980px;
	margin: 0 auto;
	padding: 70px 0 140px;
	position: relative;
}
.contact_form {
    max-width: 820px;
    border-radius: 10px;
    width: 100%;
    margin: auto;
    padding: 60px;
    border: 1px solid #ddd;
    text-align: center;
}
dl.flex_box dd {
    width: 100%;
    margin-bottom: 48px;
    border: 1px solid #b7b7b7;
    border-radius: 4px;
}
dd.textbox {
    height: 52px;
}
input.wpcf7-form-control {
    width: 100%;
    border: 1px solid #ddd;
    margin-bottom: 35px;
}
span.required {
    display: inline-block;
    position: relative;
    top: -2px;
    margin-right: 12px;
    padding: 0 5px;
    border-radius: 3px;
    background-color: #c93b2c;
    line-height: 23px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

input.wpcf7-form-control.wpcf7-submit {
    margin: 0 auto;
    border: none;
    color: #ffffff;
    font-size: 15px;
    letter-spacing: 0.8px;
    background: #000;
    width: 50%;
    display: block;
    text-align: center;
    font-weight: 600;
    height: 62px;
}
input.wpcf7-form-control.wpcf7-submit:hover {
    background-color: #bfbfbf;
    border-color: var(--color-btn-hover);
    color: #7e7e7e;
    outline: 0;
    transition: 0.3s;
}




.perspective {
  -webkit-perspective: 76em;
  perspective: 76em;
  -webkit-perspective-origin: 50% 50px;
  perspective-origin: 50% 50px;
  margin: 0 auto;
  color: #fff;
  text-align: center;
}

input { display: none; }

.tab {
  position: absolute;
  width: 80px;
  height: 70px;
  background: pink;
  right: 0;
  line-height: 70px;
  font-weight: 300;
}

.tab:nth-child(1) {
  top: -5px;
  background: #06D6A0;
}

.tab:nth-child(2) {
  top: 69px;
  background: #1B9AAA;
}

.tab:nth-child(3) {
  top: 143px;
  background: #EF476F;
}

.cube {
  position: relative;
  margin: 60px auto 0;
  width: 300px;
  height: 200px;
  -webkit-transform-origin: 0 100px;
  -ms-transform-origin: 0 100px;
  transform-origin: 0 100px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.5s ease-in;
  transition: transform 0.5s ease-in;
}

.tab-content {
  width: 775px;
  position: absolute;
}

.tab-content h1 {
  font-size: 25px;
  margin: 75px 0 10px;
  font-weight: 300;
}

.tab-content p { font-size: 12px; }


.tab-content:nth-child(1) {
  -webkit-transform: rotateX(-270deg) translateY(-100px);
  transform: rotateX(-270deg) translateY(-100px);
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  background: #06D6A0;
}

.tab-content:nth-child(3) {
  -webkit-transform: rotateX(-90deg) translateY(100px);
  transform: rotateX(-90deg) translateY(100px);
  -webkit-transform-origin: bottom center;
  -ms-transform-origin: bottom center;
  transform-origin: bottom center;
  background: #EF476F;
}
#tab-one:checked ~ .cube {
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}

#tab-two:checked ~ .cube {
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}

#tab-three:checked ~ .cube {
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

/* =================================================================== 
 * Luther Main Stylesheet
 * Template Ver. 1.0.0
 * 02-15-2021
 * ------------------------------------------------------------------

/* ===================================================================
 * # SETTINGS
 *
 *
 * ------------------------------------------------------------------- */

/* ------------------------------------------------------------------- 
 * ## fonts 
 * ------------------------------------------------------------------- */
 @import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Serif+Text:ital@0;1&family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

 :root {
 
     --font-1 : "Public Sans", sans-serif;
     --font-2 : "DM Serif Display", serif;
 
     /* monospace
     */
     --font-mono : Consolas, "Andale Mono", Courier, "Courier New", monospace;
 }
 
 /* ------------------------------------------------------------------- 
  * ## colors
  * ------------------------------------------------------------------- */
 :root {
 
     /* color-1(#eabe7c)
      * color-2(#23967f)
      */
     --color-1 : hsla(36, 72%, 70%, 1);
     --color-2 : hsla(168, 62%, 36%, 1);
 
     /* theme color variations
      */
     --color-1-lighter : hsla(36, 72%, 90%, 1);
     --color-1-light   : hsla(36, 72%, 80%, 1);
     --color-1-dark    : hsla(36, 72%, 60%, 1);
     --color-1-darker  : hsla(36, 72%, 50%, 1);
     --color-2-lighter : hsla(168, 62%, 56%, 1);
     --color-2-light   : hsla(168, 62%, 46%, 1);
     --color-2-dark    : hsla(168, 62%, 26%, 1);
     --color-2-darker  : hsla(168, 62%, 16%, 1);
 
     /* feedback colors
      * color-error(#ffd1d2), color-success(#c8e675), 
      * color-info(#d7ecfb), color-notice(#fff099)
      */
     --color-error           : hsla(359, 100%, 91%, 1);
     --color-success         : hsla(76, 69%, 68%, 1);
     --color-info            : hsla(205, 82%, 91%, 1);
     --color-notice          : hsla(51, 100%, 80%, 1);
     --color-error-content   : hsla(359, 50%, 50%, 1);
     --color-success-content : hsla(76, 29%, 28%, 1);
     --color-info-content    : hsla(205, 32%, 31%, 1);
     --color-notice-content  : hsla(51, 30%, 30%, 1);
 
 
 
     /* text
      */
     --color-text        : var(--color-gray-4);
     --color-text-dark   : var(--color-white);
     --color-text-light  : var(--color-gray-7);
     --color-placeholder : var(--color-gray-7);
 
     /* buttons
      */
     --color-btn                    : var(--color-gray-9);
     --color-btn-text               : var(--color-1);
     --color-btn-hover              : var(--color-white);
     --color-btn-hover-text         : var(--color-black);
     --color-btn-primary            : var(--color-1-dark);
     --color-btn-primary-text       : var(--color-black);
     --color-btn-primary-hover      : var(--color-1-darker);
     --color-btn-primary-hover-text : var(--color-black);
     --color-btn-stroke             : var(--color-white);
     --color-btn-stroke-text        : var(--color-white);
     --color-btn-stroke-hover       : var(--color-white);
     --color-btn-stroke-hover-text  : var(--color-black);
 
     /* preloader
      */
     --color-preloader-bg : var(--color-gray-10);
     --color-loader       : white;
     --color-loader-light : rgba(255, 255, 255, 0.1);
 
     /* others
      */
     --color-body    : var(--color-gray-10);
     --color-border  : rgba(255, 255, 255, .05);
     --border-radius : 3px;
 }
 
 /* ------------------------------------------------------------------- 
  * ## spacing and typescale
  * ------------------------------------------------------------------- */
 :root {
 
     /* spacing
      * base font size: 19px 
      * vertical space unit : 32px
      */
     --base-size      : 62.5%;
     --multiplier     : 1;
     --base-font-size : calc(1.9rem * var(--multiplier));
     --space          : calc(3.2rem * var(--multiplier));
 
     /* vertical spacing 
      */
     --vspace-0_125 : calc(0.125 * var(--space));
     --vspace-0_25  : calc(0.25 * var(--space));
     --vspace-0_375 : calc(0.375 * var(--space));
     --vspace-0_5   : calc(0.5 * var(--space));
     --vspace-0_625 : calc(0.625 * var(--space));
     --vspace-0_75  : calc(0.75 * var(--space));
     --vspace-0_875 : calc(0.875 * var(--space));
     --vspace-1     : calc(var(--space));
     --vspace-1_25  : calc(1.25 * var(--space));
     --vspace-1_5   : calc(1.5 * var(--space));
     --vspace-1_75  : calc(1.75 * var(--space));
     --vspace-2     : calc(2 * var(--space));
     --vspace-2_5   : calc(2.5 * var(--space));
     --vspace-3     : calc(3 * var(--space));
     --vspace-3_5   : calc(3.5 * var(--space));
     --vspace-4     : calc(4 * var(--space));
     --vspace-4_5   : calc(4.5 * var(--space));
     --vspace-5     : calc(5 * var(--space));
 
     /* type scale
      * ratio 1:2 | base: 19px
      * -------------------------------------------------------
      *
      * --text-display-3 = (81.70px)
      * --text-display-2 = (68.08px)
      * --text-display-1 = (56.73px)
      * --text-xxxl      = (47.28px)
      * --text-xxl       = (39.40px)
      * --text-xl        = (32.83px)
      * --text-lg        = (27.36px)
      * --text-md        = (22.80px)
      * --text-size      = (19.00px) BASE
      * --text-sm        = (15.83px)
      * --text-xs        = (13.19px)
      *
      * ---------------------------------------------------------
      */
     --text-scale-ratio : 1.2;
     --text-size        : var(--base-font-size);
     --text-xs          : calc((var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio));
     --text-sm          : calc(var(--text-xs) * var(--text-scale-ratio));
     --text-md          : calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
     --text-lg          : calc(var(--text-md) * var(--text-scale-ratio));
     --text-xl          : calc(var(--text-lg) * var(--text-scale-ratio));
     --text-xxl         : calc(var(--text-xl) * var(--text-scale-ratio));
     --text-xxxl        : calc(var(--text-xxl) * var(--text-scale-ratio));
     --text-display-1   : calc(var(--text-xxxl) * var(--text-scale-ratio));
     --text-display-2   : calc(var(--text-display-1) * var(--text-scale-ratio));
     --text-display-3   : calc(var(--text-display-2) * var(--text-scale-ratio));
 
     /* default button height
      */
     --vspace-btn : var(--vspace-2);
 }
 
 /* on mobile devices below 600px, change the value of '--multiplier' 
  * to adjust the values of base font size and vertical space unit.
  */
 @media screen and (max-width: 600px) {
     :root {
         --multiplier : .875;
     }
 }
 
 /* ------------------------------------------------------------------- 
  * ## grid variables
  * ------------------------------------------------------------------- */
 :root {
 
     /* widths for rows and containers
      */
     --width-full     : 100%;
     --width-max      : 1200px;
     --width-wide     : 1400px;
     --width-wider    : 1600px;
     --width-widest   : 1800px;
     --width-narrow   : 1000px;
     --width-narrower : 800px;
     --width-grid-max : var(--width-max);
 
     /* gutter
      */
     --gutter : 2rem;
 }
 
 /* on medium screen devices
  */
 @media screen and (max-width: 1200px) {
     :root {
         --gutter : 1.6rem;
     }
 }
 
 /* on mobile devices
  */
 @media screen and (max-width: 600px) {
     :root {
         --gutter : 1rem;
     }
 }
 
 
 
 /* ====================================================================
  * # NORMALIZE
  *
  *
  * --------------------------------------------------------------------
  * normalize.css v8.0.1 | MIT License |
  * github.com/necolas/normalize.css
  * -------------------------------------------------------------------- */
 
 html {
     line-height              : 1.15;
     -webkit-text-size-adjust : 100%;
 }
 
 body {
	 margin : 0;
	 background: #faf2f6;
 }
 
 main {
     display : block;
 }
 
 h1 {
     font-size : 2em;
     margin    : 0.67em 0;
 }
 
 hr {
     box-sizing : content-box;
     height     : 0;
     overflow   : visible;
 }
 
 pre {
     font-family : monospace, monospace;
     font-size   : 1em;
 }
 
 a {
     background-color : transparent;
 }
 
 abbr[title] {
     border-bottom   : none;
     text-decoration : underline;
     text-decoration : underline dotted;
 }
 
 b,
 strong {
     font-weight : bolder;
 }
 
 code,
 kbd,
 samp {
     font-family : monospace, monospace;
     font-size   : 1em;
 }
 
 small {
     font-size : 80%;
 }
 
 sub,
 sup {
     font-size      : 75%;
     line-height    : 0;
     position       : relative;
     vertical-align : baseline;
 }
 
 sub {
     bottom : -0.25em;
 }
 
 sup {
     top : -0.5em;
 }
 
 img {
     border-style : none;
 }
 
 button,
 input,
 optgroup,
 select,
 textarea {
     font-family : inherit;
     font-size   : 100%;
     line-height : 1.15;
     margin      : 0;
 }
 
 button,
 input {
     overflow : visible;
 }
 
 button,
 select {
     text-transform : none;
 }
 
 button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
     -webkit-appearance : button;
 }
 
 button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
 [type="submit"]::-moz-focus-inner {
     border-style : none;
     padding      : 0;
 }
 
 button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
     outline : 1px dotted ButtonText;
 }
 
 fieldset {
     padding : 0.35em 0.75em 0.625em;
 }
 
 legend {
     box-sizing  : border-box;
     color       : inherit;
     display     : table;
     max-width   : 100%;
     padding     : 0;
     white-space : normal;
 }
 
 progress {
     vertical-align : baseline;
 }
 
 textarea {
     overflow : auto;
 }
 
 [type="checkbox"],
 [type="radio"] {
     box-sizing : border-box;
     padding    : 0;
 }
 
 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {
     height : auto;
 }
 
 [type="search"] {
     -webkit-appearance : textfield;
     outline-offset     : -2px;
 }
 
 [type="search"]::-webkit-search-decoration {
     -webkit-appearance : none;
 }
 
 ::-webkit-file-upload-button {
     -webkit-appearance : button;
     font               : inherit;
 }
 
 details {
     display : block;
 }
 
 summary {
     display : list-item;
 }
 
 template {
     display : none;
 }
 
 [hidden] {
     display : none;
 }
 
 
 
 /* ===================================================================
  * # BASE SETUP
  *
  *
  * ------------------------------------------------------------------- */
 
 html {
     font-size  : var(--base-size);
     box-sizing : border-box;
 }
 
 *,
 *::before,
 *::after {
     box-sizing : inherit;
 }
 
 html,
 body {
     height : 100%;
 }
 
 
 body {
     background-color            : #fcfcfc;
     -webkit-overflow-scrolling  : touch;
     -webkit-text-size-adjust    : 100%;
     -webkit-tap-highlight-color : rgba(0, 0, 0, 0);
     -webkit-font-smoothing      : antialiased;
     -moz-osx-font-smoothing     : grayscale;
 }
 
 
 p {
     font-size      : 15px;
     text-rendering : optimizeLegibility;
 }
 
 a {
     text-decoration : none;
 }
 
 svg,
 img,
 video {
     max-width : 100%;
     height    : auto;
 }
 
 pre {
     overflow : auto;
 }
 
 div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
     margin  : 0;
     padding : 0;
 }
 
 input[type="email"],
 input[type="number"],
 input[type="search"],
 input[type="text"],
 input[type="tel"],
 input[type="url"],
 input[type="password"],
 textarea {
     -webkit-appearance : none;
     -moz-appearance    : none;
     appearance         : none;
 }
 
 
 
 .works-portfolio h2 {
     text-align: center;
 }
 
 
 /* row 
  */
 .row {
     width     : 92%;
     max-width : var(--width-grid-max);
     margin    : 0 auto;
     display   : flex;
     flex-flow : row wrap;
 }
 
 .row .row {
     width        : auto;
	 height: 600px
     max-width    : none;
     margin-left  : calc(var(--gutter) * -1);
     margin-right : calc(var(--gutter) * -1);
 }
 
 /* column
  */
 .column {
     display : block;
     flex    : 1 1 0%;
 }
 
 .collapse>.column,
 .column.collapse {
     padding : 0;
 }
 
 /* row utility classes
  */
 .row.row-wrap {
     flex-wrap : wrap;
 }
 
 .row.row-nowrap {
     flex-wrap : nowrap;
 }
 
 .row.row-y-top {
     align-items : flex-start;
 }
 
 .row.row-y-bottom {
     align-items : flex-end;
 }
 
 .row.row-y-center {
     align-items : center;
 }
 
 .row.row-stretch {
     align-items : stretch;
 }
 
 .row.row-baseline {
     align-items : baseline;
 }
 
 .row.row-x-left {
     justify-content : flex-start;
 }
 
 .row.row-x-right {
     justify-content : flex-end;
 }
 
 .row.row-x-center {
     justify-content : center;
 }
 
 /* --------------------------------------------------------------------
  * ## large screen devices 
  * -------------------------------------------------------------------- */
 .lg-1 {
     flex  : none;
     width : 8.33333%;
 }
 
 .lg-2 {
     flex  : none;
     width : 16.66667%;
 }
 
 .lg-3 {
     flex  : none;
     width : 25%;
 }
 
 .lg-4 {
     flex  : none;
     width : 33.33333%;
 }
 
 .lg-5 {
     flex  : none;
     width : 41.66667%;
 }
 
 .lg-6 {
     flex  : none;
     width : 50%;
 }
 
 .lg-7 {
     flex  : none;
     width : 58.33333%;
 }
 
 .lg-8 {
     flex  : none;
     width : 66.66667%;
 }
 
 .lg-9 {
     flex  : none;
     width : 75%;
 }
 
 .lg-10 {
     flex  : none;
     width : 83.33333%;
 }
 
 .lg-11 {
     flex  : none;
     width : 91.66667%;
 }
 
 .lg-12 {
     flex  : none;
     width : 100%;
 }
 
 .block-lg-one-eight>.column {
     flex  : none;
     width : 12.5%;
 }
 
 .block-lg-one-sixth>.column {
     flex  : none;
     width : 16.66667%;
 }
 
 .block-lg-one-fifth>.column {
     flex  : none;
     width : 20%;
 }
 
 .block-lg-one-fourth>.column {
     flex  : none;
     width : 25%;
 }
 
 .block-lg-one-third>.column {
     flex  : none;
     width : 33.33333%;
 }
 
 .block-lg-one-half>.column {
     flex  : none;
     width : 20%;
 }
 
 .block-lg-whole>.column {
     flex  : none;
     width : 100%;
 }
 
 /* --------------------------------------------------------------------
  * ## medium screen devices 
  * -------------------------------------------------------------------- */
 @media screen and (max-width: 1200px) {
     .md-1 {
         flex  : none;
         width : 8.33333%;
     }
 
     .md-2 {
         flex  : none;
         width : 16.66667%;
     }
 
     .md-3 {
         flex  : none;
         width : 25%;
     }
 
     .md-4 {
         flex  : none;
         width : 33.33333%;
     }
 
     .md-5 {
         flex  : none;
         width : 41.66667%;
     }
 
     .md-6 {
         flex  : none;
         width : 50%;
     }
 
     .md-7 {
         flex  : none;
         width : 58.33333%;
     }
 
     .md-8 {
         flex  : none;
         width : 66.66667%;
     }
 
     .md-9 {
         flex  : none;
         width : 75%;
     }
 
     .md-10 {
         flex  : none;
         width : 83.33333%;
     }
 
     .md-11 {
         flex  : none;
         width : 91.66667%;
     }
 
     .md-12 {
         flex  : none;
         width : 100%;
     }
 
     .block-md-one-eight>.column {
         flex  : none;
         width : 12.5%;
     }
 
     .block-md-one-sixth>.column {
         flex  : none;
         width : 16.66667%;
     }
 
     .block-md-one-fifth>.column {
         flex  : none;
         width : 20%;
     }
 
     .block-md-one-fourth>.column {
         flex  : none;
         width : 25%;
     }
 
     .block-md-one-third>.column {
         flex  : none;
         width : 33.33333%;
     }
 
     .block-md-one-half>.column {
         flex  : none;
         width : 50%;
     }
 
     .block-md-whole>.column {
         flex  : none;
         width : 100%;
     }
 
     .hide-on-md {
         display : none;
     }
 }
 
 /* --------------------------------------------------------------------
  * ## tablet devices 
  * -------------------------------------------------------------------- */
 @media screen and (max-width: 800px) {
     .tab-1 {
         flex  : none;
         width : 8.33333%;
     }
 
     .tab-2 {
         flex  : none;
         width : 16.66667%;
     }
 
     .tab-3 {
         flex  : none;
         width : 25%;
     }
 
     .tab-4 {
         flex  : none;
         width : 33.33333%;
     }
 
     .tab-5 {
         flex  : none;
         width : 41.66667%;
     }
 
     .tab-6 {
         flex  : none;
         width : 50%;
     }
 
     .tab-7 {
         flex  : none;
         width : 58.33333%;
     }
 
     .tab-8 {
         flex  : none;
         width : 66.66667%;
     }
 
     .tab-9 {
         flex  : none;
         width : 75%;
     }
 
     .tab-10 {
         flex  : none;
         width : 83.33333%;
     }
 
     .tab-11 {
         flex  : none;
         width : 91.66667%;
     }
 
     .tab-12 {
         flex  : none;
         width : 100%;
     }
 
     .block-tab-one-eight>.column {
         flex  : none;
         width : 12.5%;
     }
 
     .block-tab-one-sixth>.column {
         flex  : none;
         width : 16.66667%;
     }
 
     .block-tab-one-fifth>.column {
         flex  : none;
         width : 20%;
     }
 
     .block-tab-one-fourth>.column {
         flex  : none;
         width : 25%;
     }
 
     .block-tab-one-third>.column {
         flex  : none;
         width : 33.33333%;
     }
 
     .block-tab-one-half>.column {
         flex  : none;
         width : 50%;
     }
 
     .block-tab-whole>.column {
         flex  : none;
         width : 100%;
     }
 
     .hide-on-tab {
         display : none;
     }
 }
 
 /* --------------------------------------------------------------------
  * ## mobile devices 
  * -------------------------------------------------------------------- */
 @media screen and (max-width: 600px) {
     .row {
         width         : 100%;
         padding-left  : 6vw;
         padding-right : 6vw;
     }
 
     .row .row {
         padding-left  : 0;
         padding-right : 0;
     }
 
     .mob-1 {
         flex  : none;
         width : 8.33333%;
     }
 
     .mob-2 {
         flex  : none;
         width : 16.66667%;
     }
 
     .mob-3 {
         flex  : none;
         width : 25%;
     }
 
     .mob-4 {
         flex  : none;
         width : 33.33333%;
     }
 
     .mob-5 {
         flex  : none;
         width : 41.66667%;
     }
 
     .mob-6 {
         flex  : none;
         width : 50%;
     }
 
     .mob-7 {
         flex  : none;
         width : 58.33333%;
     }
 
     .mob-8 {
         flex  : none;
         width : 66.66667%;
     }
 
     .mob-9 {
         flex  : none;
         width : 75%;
     }
 
     .mob-10 {
         flex  : none;
         width : 83.33333%;
     }
 
     .mob-11 {
         flex  : none;
         width : 91.66667%;
     }
 
     .mob-12 {
         flex  : none;
         width : 100%;
     }
 
     .block-mob-one-eight>.column {
         flex  : none;
         width : 12.5%;
     }
 
     .block-mob-one-sixth>.column {
         flex  : none;
         width : 16.66667%;
     }
 
     .block-mob-one-fifth>.column {
         flex  : none;
         width : 20%;
     }
 
     .block-mob-one-fourth>.column {
         flex  : none;
         width : 25%;
     }
 
     .block-mob-one-third>.column {
         flex  : none;
         width : 33.33333%;
     }
 
     .block-mob-one-half>.column {
         flex  : none;
         width : 50%;
     }
 
     .block-mob-whole>.column {
         flex  : none;
         width : 100%;
     }
 
     .hide-on-mob {
         display : none;
     }
 }
 
 /* --------------------------------------------------------------------
  * ## small screen devices 
  * --------------------------------------------------------------------*/
 
 /* stack columns on small screen devices
  */
 @media screen and (max-width: 400px) {
     .row .row {
         margin-left  : 0;
         margin-right : 0;
     }
 
     .block-stack>.column,
     .column {
         margin-left  : 0;
         margin-right : 0;
         padding      : 0;
     }
 
     .hide-on-sm {
         display : none;
     }
 }
 
 /* --------------------------------------------------------------------
  * ## additional column stackpoints 
  * -------------------------------------------------------------------- */
 @media screen and (max-width: 1000px) {
 
     .stack-on-1000,
     .block-stack-on-1000>.column {
         flex         : none;
         width        : 100%;
         margin-left  : 0;
         margin-right : 0;
     }
 }
 
 @media screen and (max-width: 700px) {
 
     .stack-on-700,
     .block-stack-on-700>.column {
         flex         : none;
         width        : 100%;
         margin-left  : 0;
         margin-right : 0;
     }
 }
 
 @media screen and (max-width: 550px) {
 
     .stack-on-550,
     .block-stack-on-550>.column {
         flex         : none;
         width        : 100%;
         margin-left  : 0;
         margin-right : 0;
     }
 }
 
 
 
 /* ===================================================================
  * # UTILITY CLASSES
  *
  *
  * ------------------------------------------------------------------- */
 
 /* flex item alignment classes
  */
 .u-flexitem-center {
     margin     : auto;
     align-self : center;
 }
 
 .u-flexitem-left {
     margin-right : auto;
     align-self   : center;
 }
 
 .u-flexitem-right {
     margin-left : auto;
     align-self  : center;
 }
 
 .u-flexitem-x-center {
     margin-right : auto;
     margin-left  : auto;
 }
 
 .u-flexitem-x-left {
     margin-right : auto;
 }
 
 .u-flexitem-x-right {
     margin-left : auto;
 }
 
 .u-flexitem-y-center {
     align-self : center;
 }
 
 .u-flexitem-y-top {
     align-self : flex-start;
 }
 
 .u-flexitem-y-bottom {
     align-self : flex-end;
 }
 
 /* misc helper classes
  */
 .u-clearfix:after {
     content : "";
     display : table;
     clear   : both;
 }
 
 .u-hidden {
     display : none;
 }
 
 .u-invisible {
     visibility : hidden;
 }
 
 .u-antialiased {
     -webkit-font-smoothing  : antialiased;
     -moz-osx-font-smoothing : grayscale;
 }
 
 .u-overflow-hidden {
     overflow : hidden;
 }
 
 .u-remove-top {
     margin-top : 0;
 }
 
 .u-remove-bottom {
     margin-bottom : 0;
 }
 
 .u-add-half-bottom {
     margin-bottom : var(--vspace-0_5);
 }
 
 .u-add-bottom {
     margin-bottom : var(--vspace-1);
 }
 
 .u-no-border {
     border : none;
 }
 
 .u-fullwidth {
     width : 100%;
 }
 
 .u-pull-left {
     float : left;
 }
 
 .u-pull-right {
     float : right;
 }
 
 
 
 /* ===================================================================
  * # TYPOGRAPHY 
  *
  *
  * ------------------------------------------------------------------- 
  * type scale - ratio 1:2 | base: 19px
  * -------------------------------------------------------------------
  *
  * --text-display-3 = (81.70px)
  * --text-display-2 = (68.08px)
  * --text-display-1 = (56.73px)
  * --text-xxxl      = (47.28px)
  * --text-xxl       = (39.40px)
  * --text-xl        = (32.83px)
  * --text-lg        = (27.36px)
  * --text-md        = (22.80px)
  * --text-size      = (19.00px) BASE
  * --text-sm        = (15.83px)
  * --text-xs        = (13.19px)
  *
  * -------------------------------------------------------------------- */
 
 /* --------------------------------------------------------------------
  * ## base type styles
  * -------------------------------------------------------------------- */
 body {
     font-family : var(--font-1);
     font-size   : var(--base-font-size);
     font-weight : 300;
     line-height : var(--vspace-1);
     color       : var(--color-text);
 }
 
 /* links
  */
 a {
     color: #6b95ce;
     transition: all 0.3s ease-in-out;
 }
 
 a:focus,
 a:hover,
 a:active {
     color: #adbdd4;
     transition: 0.3s;
 }
 
 a:hover,
 a:active {
     outline : 0;
 }
 
 /* headings
  */
 
 
 
 
 h3.sitename {
     font-size: 38px;
     margin: 0 auto;
     font-family: "Montserrat", sans-serif;
   margin-bottom: 30px;
 }
 
 h5, .h5, h6, .h6 {
     margin-top    : var(--vspace-1_5);
     margin-bottom : var(--vspace-0_5);
 }
 
 
 
 
 /* emphasis, italic,
  * strong, bold and small text
  */
 em,
 i,
 strong,
 b {
     font-size   : 14px;
     line-height : inherit;
 }
 
 em,
 i {
     font-style : italic;
 }
 
 strong,
 b {
     font-weight : 500;
 }
 
 small {
     font-size   : 75%;
     font-weight : 400;
     line-height : var(--vspace-0_5);
 }
 
 /* blockquotes
  */
 blockquote {
     margin      : 0 0 var(--vspace-1) 0;
     padding     : var(--vspace-1) var(--vspace-1_5);
     border-left : 2px solid var(--color-text-light);
     position    : relative;
 }
 
 @media screen and (max-width: 400px) {
     blockquote {
         padding : var(--vspace-0_75) var(--vspace-0_75);
     }
 }
 
 blockquote p {
     font-family : var(--font-1);
     font-weight : 400;
     font-size   : var(--text-lg);
     font-style  : normal;
     line-height : var(--vspace-1_25);
     color       : var(--color-text-dark);
     padding     : 0;
 }
 
 blockquote cite {
     display     : block;
     font-family : var(--font-1);
     font-weight : 400;
     font-size   : var(--text-sm);
     line-height : var(--vspace-0_75);
     font-style  : normal;
 }
 
 blockquote cite:before {
     content : "\2014 \0020";
 }
 
 blockquote cite,
 blockquote cite a,
 blockquote cite a:visited {
     color  : var(--color-text-light);
     border : none;
 }
 
 /* figures
  */
 figure img,
 p img {
     margin         : 0;
     vertical-align : bottom;
 }
 
 figure {
     display      : block;
     margin-left  : 0;
     margin-right : 0;
 }
 
 figure img+figcaption {
     margin-top : var(--vspace-1);
 }
 
 figcaption {
     font-style    : italic;
     font-size     : var(--text-sm);
     text-align    : center;
     margin-bottom : 0;
 }
 
 /* preformatted, code
  */
 var,
 kbd,
 samp,
 code,
 pre {
     font-family : var(--font-mono);
 }
 
 pre {
     padding    : var(--vspace-0_75) var(--vspace-1) var(--vspace-1);
     background : var(--color-gray-9);
     overflow-x : auto;
 }
 
 code {
     font-size     : var(--text-sm);
     line-height   : 1.6rem;
     margin        : 0 .2rem;
     padding       : calc(((var(--vspace-1) - 1.6rem) / 2) - .1rem) calc(.8rem - .1rem);
     white-space   : nowrap;
     background    : var(--color-gray-9);
     border        : 1px solid var(--color-gray-8);
     color         : var(--color-text-dark);
     border-radius : 3px;
 }
 
 pre>code {
     display     : block;
     white-space : pre;
     line-height : var(--vspace-1);
     padding     : 0;
     margin      : 0;
     border      : none;
 }
 
 /* deleted text, abbreviation,
  * & mark text
  */
 del {
     text-decoration : line-through;
 }
 
 abbr {
     font-family    : var(--font-1);
     font-weight    : 600;
     font-variant   : small-caps;
     text-transform : lowercase;
     letter-spacing : .1em;
 }
 
 abbr[title],
 dfn[title] {
     border-bottom   : 1px dotted;
     cursor          : help;
     text-decoration : none;
 }
 
 mark {
     background : var(--color-white);
     color      : var(--color-black);
 }
 
 /* horizontal rule
  */
 hr {
     border       : solid var(--color-border);
     border-width : .1rem 0 0;
     clear        : both;
     margin       : var(--vspace-2) 0 calc(var(--vspace-2) - 1px);
     height       : 0;
 }
 
 hr.fancy {
     border     : none;
     margin     : var(--vspace-2) 0;
     height     : var(--vspace-1);
     text-align : center;
 }
 
 hr.fancy::before {
     content        : "*****";
     letter-spacing : .3em;
 }
 
 /* --------------------------------------------------------------------
  * ## additional typography & helper classes
  * -------------------------------------------------------------------- */
 .lead,
 .attention-getter {
     font-family : var(--font-1);
     font-weight : 300;
     font-size   : var(--text-md);
     line-height : var(--vspace-1_25);
     color       : var(--color-text-dark);
 }
 
 .pull-quote {
     position   : relative;
     padding    : 0;
     margin-top : 0;
     text-align : center;
 }
 
 .pull-quote blockquote {
     border      : none;
     margin      : 0 auto;
     max-width   : 62rem;
     padding-top : var(--vspace-2_5);
     position    : relative;
 }
 
 .pull-quote blockquote p {
     font-weight : 400;
     color       : var(--color-text-dark);
 }
 
 .pull-quote blockquote:before {
     content           : "";
     display           : block;
     height            : var(--vspace-1);
     width             : var(--vspace-1);
     background-repeat : no-repeat;
     background        : center center;
     background-size   : contain;
     background-image  : url(../images/icons/icon-quote.svg);
     transform         : translate(-50%, 0, 0);
     position          : absolute;
     top               : var(--vspace-1);
     left              : 50%;
 }
 
 .drop-cap:first-letter {
     float          : left;
     font-family    : var(--font-1);
     font-weight    : 600;
     font-size      : calc(3 * var(--space));
     line-height    : 1;
     padding        : 0 0.125em 0 0;
     text-transform : uppercase;
     background     : transparent;
     color          : var(--color-text-dark);
 }
 
 .text-center {
     text-align : center;
 }
 
 .text-left {
     text-align : left;
 }
 
 .text-right {
     text-align : right;
 }
 
 /* --------------------------------------------------------------------
  * ## lists
  * -------------------------------------------------------------------- */
 ol {
     list-style : decimal;
 }
 
 ul {
     list-style : disc;
 }
 
 li {
     display : list-item;
 }
 
 
 ul.disc li {
     display    : list-item;
     list-style : none;
     padding    : 0 0 0 .8rem;
     position   : relative;
 }
 
 ul.disc li::before {
     content        : "";
     display        : inline-block;
     width          : 8px;
     height         : 8px;
     border-radius  : 50%;
     background     : var(--color-1);
     position       : absolute;
     left           : -.9em;
     top            : 11px;
     vertical-align : middle;
 }
 
 dt {
     margin : 0;
     color  : var(--color-1);
 }
 
 
 /* definition list line style 
  */
 .lining dt,
 .lining dd {
     display : inline;
     margin  : 0;
 }
 
 .lining dt+dt:before,
 .lining dd+dt:before {
     content     : "\A";
     white-space : pre;
 }
 
 .lining dd+dd:before {
     content : ", ";
 }
 
 .lining dd+dd:before {
     content : ", ";
 }
 
 .lining dd:before {
     content     : ": ";
     margin-left : -0.2em;
 }
 
 /* definition list dictionary style 
  */
 .dictionary-style dt {
     display       : inline;
     counter-reset : definitions;
 }
 
 .dictionary-style dt+dt:before {
     content     : ", ";
     margin-left : -0.2em;
 }
 
 .dictionary-style dd {
     display           : block;
     counter-increment : definitions;
 }
 
 .dictionary-style dd:before {
     content : counter(definitions, decimal) ". ";
 }
 
 /* --------------------------------------------------------------------
  * ## spacing
  * -------------------------------------------------------------------- */
 
 
 
 
 
 /* ===================================================================
  * # PRELOADER
  * 
  * 
  * -------------------------------------------------------------------
  * - markup:
  *
  * <div id="preloader">
  *    <div id="loader"></div>
  * </div>
  *
  * ------------------------------------------------------------------- */
 
 #preloader {
     position        : fixed;
     display         : flex;
     flex-flow       : row wrap;
     justify-content : center;
     align-items     : center;
   background: #c3d6ee;
     z-index         : 500;
     height          : 100vh;
     width           : 100%;
     opacity         : 1;
 }
 
 .no-js #preloader {
     display : none;
 }
 
 #loader {
     width             : var(--vspace-2);
     height            : var(--vspace-2);
     padding           : 0;
     background-color  : white;
     border-radius     : 100%;
     -webkit-animation : sk-scaleout 1.0s infinite ease-in-out;
     animation         : sk-scaleout 1.0s infinite ease-in-out;
 }
 
 @-webkit-keyframes sk-scaleout {
     0% {
         -webkit-transform : scale(0);
         transform         : scale(0);
     }
 
     100% {
         -webkit-transform : scale(1);
         transform         : scale(1);
         opacity           : 0;
     }
 }
 
 @keyframes sk-scaleout {
     0% {
         transform : scale(0);
     }
 
     100% {
         transform : scale(1);
         opacity   : 0;
     }
 }
 
 
 
 /* ===================================================================
  * # FORM
  *
  *
  * ------------------------------------------------------------------- */
 
 fieldset {
     border : none;
 }
 
 input[type="email"],
 input[type="number"],
 input[type="search"],
 input[type="text"],
 input[type="tel"],
 input[type="url"],
 input[type="password"],
 textarea,
 select {
     --input-height      : var(--vspace-2);
     --input-line-height : var(--vspace-1);
     --input-vpadding    : calc((var(--input-height) - var(--input-line-height)) / 2);
     display             : block;
     height              : var(--input-height);
     padding             : var(--input-vpadding) 0 calc(var(--input-vpadding) - 1px);
     border              : 0;
     outline             : 0;
     color               : var(--color-text-light);
     font-family         : var(--font-1);
     font-size           : calc(var(--text-size) * 0.7778);
     line-height         : var(--input-line-height);
     max-width           : 100%;
     background          : transparent;
     border-bottom       : 1px solid var(--color-border);
     transition          : all .3s ease-in-out;
 }
 
 .ss-custom-select {
     position : relative;
     padding  : 0;
 }
 
 .ss-custom-select select {
     -webkit-appearance : none;
     -moz-appearance    : none;
     appearance         : none;
     text-indent        : 0.01px;
     text-overflow      : '';
     margin             : 0;
     vertical-align     : middle;
     line-height        : var(--vspace-1);
 }
 
 .ss-custom-select select option {
     padding-left     : 2rem;
     padding-right    : 2rem;
     background-color : var(--color-body);
 }
 
 .ss-custom-select select::-ms-expand {
     display : none;
 }
 
 .ss-custom-select::after {
     border-bottom    : 1px solid white;
     border-right     : 1px solid white;
     content          : '';
     display          : block;
     height           : 8px;
     width            : 8px;
     margin-top       : -7px;
     pointer-events   : none;
     position         : absolute;
     right            : 2.4rem;
     top              : 50%;
     transition       : all 0.15s ease-in-out;
     transform-origin : 66% 66%;
     transform        : rotate(45deg);
 }
 
 textarea {
     min-height : calc(8 * var(--space));
 }
 
 label,
 legend {
     font-family: "Montserrat";
     font-weight   : 500;
     font-size     : var(--text-sm);
     line-height   : var(--vspace-0_5);
     margin-bottom : 20px;
     color         : var(--color-text-dark);
 }
 


 
 /* ------------------------------------------------------------------- 
  * ## style placeholder text
  * ------------------------------------------------------------------- */
 ::-webkit-input-placeholder {
     /* WebKit, Blink, Edge */
     color : var(--color-placeholder);
 }
 
 :-moz-placeholder {
     /* Mozilla Firefox 4 to 18 */
     color   : var(--color-placeholder);
     opacity : 1;
 }
 
 ::-moz-placeholder {
     /* Mozilla Firefox 19+ */
     color   : var(--color-placeholder);
     opacity : 1;
 }
 
 :-ms-input-placeholder {
     /* Internet Explorer 10-11 */
     color : var(--color-placeholder);
 }
 
 ::-ms-input-placeholder {
     /* Microsoft Edge */
     color : var(--color-placeholder);
 }
 
 ::placeholder {
     /* Most modern browsers support this now. */
     color : var(--color-placeholder);
 }
 
 /* ------------------------------------------------------------------- 
  * ## change autocomplete styles in Chrome
  * ------------------------------------------------------------------- */
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 textarea:-webkit-autofill,
 textarea:-webkit-autofill:hover,
 textarea:-webkit-autofill:focus,
 select:-webkit-autofill,
 select:-webkit-autofill:hover,
 select:-webkit-autofill:focus {
     -webkit-text-fill-color : var(--color-1);
     transition              : background-color 5000s ease-in-out 0s;
 }
 
 
 
 /* ===================================================================
  * # BUTTONS
  *
  *
  * ------------------------------------------------------------------- */
 
 
 li.folio-list__item .btn {
     background: #343434;
 }
 
 .btn:focus,
 button:focus,
 input[type="submit"]:focus,
 input[type="reset"]:focus,
 input[type="button"]:focus,
 .btn:hover,
 button:hover,
 input[type="submit"]:hover,
 input[type="reset"]:hover,
   border-color: var(--color-btn-hover);
   color: #7e7e7e;
   outline: 0;
 }
 
 /* button primary
  */
 .btn.btn--primary,
 button.btn--primary,
 input[type="submit"].btn--primary,
 input[type="reset"].btn--primary,
 input[type="button"].btn--primary {
     background   : var(--color-btn-primary);
     border-color : var(--color-btn-primary);
     color        : var(--color-btn-primary-text);
 }
 
 .btn.btn--primary:focus,
 button.btn--primary:focus,
 input[type="submit"].btn--primary:focus,
 input[type="reset"].btn--primary:focus,
 input[type="button"].btn--primary:focus,
 .btn.btn--primary:hover,
 button.btn--primary:hover,
 input[type="submit"].btn--primary:hover,
 input[type="reset"].btn--primary:hover,
 input[type="button"].btn--primary:hover {
     background   : var(--color-btn-primary-hover);
     border-color : var(--color-btn-primary-hover);
     color        : var(--color-btn-primary-hover-text);
 }
 
 /* button modifiers
  */
 
 .btn--small,
 button.btn--small {
     --btn-height : calc(var(--vspace-btn) - 1.6rem);
 }
 
 
 .btn--large,
 button.btn--large {
     --btn-height : calc(var(--vspace-btn) + 1.6rem);
 }
 
 .btn--stroke,
 button.btn--stroke {
     background : transparent !important;
     border     : 1px solid var(--color-btn-stroke);
     color      : var(--color-btn-stroke-text);
 }
 
 .btn--stroke:focus,
 button.btn--stroke:focus,
 .btn--stroke:hover,
 button.btn--stroke:hover {
     background : var(--color-btn-stroke-hover) !important;
     border     : 1px solid var(--color-btn-stroke-hover);
     color      : var(--color-btn-stroke-hover-text);
 }
 
 .btn--pill,
 button.btn--pill {
     padding-left  : 3.2rem !important;
     padding-right : 3.2rem !important;
     border-radius : 1000px !important;
 }
 
 
 
 /* ===================================================================
  * # TABLE
  *
  *
  * ------------------------------------------------------------------- */
 
 table {
     border-width    : 0;
     width           : 100%;
     max-width       : 100%;
     font-family     : var(--font-1);
     border-collapse : collapse;
 }
 
 th,
 td {
     padding       : var(--vspace-0_5) 3.2rem calc(var(--vspace-0_5) - 1px);
     text-align    : left;
     border-bottom : 1px solid var(--color-border);
 }
 
 th {
     padding     : var(--vspace-0_5) 3.2rem;
     color       : var(--color-text-dark);
     font-family : var(--font-1);
     font-weight : 600;
 }
 
 th:first-child,
 td:first-child {
     padding-left : 0;
 }
 
 th:last-child,
 td:last-child {
     padding-right : 0;
 }
 
 .table-responsive {
     overflow-x                 : auto;
     -webkit-overflow-scrolling : touch;
 }
 
 
 
 /* ===================================================================
  * # COMPONENTS
  *
  *
  * ------------------------------------------------------------------- */
 
 /* -------------------------------------------------------------------
  * ## pagination
  * ------------------------------------------------------------------- */
 .pgn {
     --pgn-num-height : calc(var(--vspace-1) + .4rem);
     margin           : var(--vspace-1) auto;
     text-align       : center;
 }
 
 .pgn ul {
     display         : inline-flex;
     flex-flow       : row wrap;
     justify-content : center;
     list-style      : none;
     margin-left     : 0;
     position        : relative;
     padding         : 0 6rem;
 }
 
 .pgn ul li {
     margin  : 0;
     padding : 0;
 }
 
 .pgn__num {
     font-family   : var(--font-1);
     font-weight   : 600;
     font-size     : var(--text-size);
     line-height   : var(--vspace-1);
     display       : block;
     padding       : .2rem 1.2rem;
     height        : var(--pgn-num-height);
     margin        : .2rem .2rem;
     color         : var(--color-text-dark);
     border-radius : 4px;
     transition    : all, .3s, ease-in-out;
 }
 
 .pgn__num:focus,
 .pgn__num:hover {
     background : var(--color-gray-9);
     color      : var(--color-white);
 }
 
 .pgn .current,
 .pgn .current:focus,
 .pgn .current:hover {
     background-color : var(--color-gray-9);
     color            : var(--color-white);
 }
 
 .pgn .inactive,
 .pgn .inactive:focus,
 .pgn .inactive:hover {
     opacity : 0.4;
     cursor  : default;
 }
 
 .pgn__prev,
 .pgn__next {
     display         : inline-flex;
     flex-flow       : row wrap;
     justify-content : center;
     align-items     : center;
     height          : var(--pgn-num-height);
     width           : 4.8rem;
     line-height     : var(--vspace-1);
     border-radius   : 4px;
     padding         : 0;
     margin          : 0;
     opacity         : 1;
     font            : 0/0 a;
     text-shadow     : none;
     color           : transparent;
     transition      : all, .3s, ease-in-out;
     position        : absolute;
     top             : 50%;
     transform       : translate(0, -50%);
 }
 
 .pgn__prev:focus,
 .pgn__prev:hover,
 .pgn__next:focus,
 .pgn__next:hover {
     background-color : var(--color-gray-9);
 }
 
 .pgn__prev svg,
 .pgn__next svg {
     height     : 2.4rem;
     width      : 2.4rem;
     transition : all, .3s, ease-in-out;
 }
 
 .pgn__prev svg path,
 .pgn__next svg path {
     fill : var(--color-text-dark);
 }
 
 .pgn__prev:focus svg path,
 .pgn__prev:hover svg path,
 .pgn__next:focus svg path,
 .pgn__next:hover svg path {
     fill : white;
 }
 
 .pgn__prev {
     left : 0;
 }
 
 .pgn__next {
     right : 0;
 }
 
 .pgn__prev.inactive,
 .pgn__next.inactive {
     opacity : 0.4;
     cursor  : default;
 }
 
 .pgn__prev.inactive:focus,
 .pgn__prev.inactive:hover,
 .pgn__next.inactive:focus,
 .pgn__next.inactive:hover {
     background-color : transparent;
 }
 
 /* ------------------------------------------------------------------- 
  * responsive:
  * pagination
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 600px) {
     .pgn ul {
         padding : 0 5.2rem;
     }
 }
 
 /* ------------------------------------------------------------------- 
  * ## alert box 
  * ------------------------------------------------------------------- */
 .alert-box {
     padding       : var(--vspace-0_75) 4rem var(--vspace-0_75) 3.2rem;
     margin-bottom : var(--vspace-1);
     border-radius : var(--border-radius);
     font-family   : var(--font-1);
     font-weight   : 500;
     font-size     : var(--text-sm);
     line-height   : var(--vspace-0_75);
     opacity       : 1;
     visibility    : visible;
     position      : relative;
 }
 
 .alert-box__close {
     position : absolute;
     display  : block;
     right    : 1.6rem;
     top      : 1.6rem;
     cursor   : pointer;
     width    : 12px;
     height   : 12px;
 }
 
 .alert-box__close::before,
 .alert-box__close::after {
     content  : '';
     display  : inline-block;
     width    : 1px;
     height   : 12px;
     position : absolute;
     top      : 0;
     left     : 5px;
 }
 
 .alert-box__close::before {
     transform : rotate(45deg);
 }
 
 .alert-box__close::after {
     transform : rotate(-45deg);
 }
 
 .alert-box--error {
     background-color : var(--color-error);
     color            : var(--color-error-content);
 }
 
 .alert-box--error .alert-box__close::before,
 .alert-box--error .alert-box__close::after {
     background-color : var(--color-error-content);
 }
 
 .alert-box--success {
     background-color : var(--color-success);
     color            : var(--color-success-content);
 }
 
 .alert-box--success .alert-box__close::before,
 .alert-box--success .alert-box__close::after {
     background-color : var(--color-success-content);
 }
 
 .alert-box--info {
     background-color : var(--color-info);
     color            : var(--color-info-content);
 }
 
 .alert-box--info .alert-box__close::before,
 .alert-box--info .alert-box__close::after {
     background-color : var(--color-info-content);
 }
 
 .alert-box--notice {
     background-color : var(--color-notice);
     color            : var(--color-notice-content);
 }
 
 .alert-box--notice .alert-box__close::before,
 .alert-box--notice .alert-box__close::after {
     background-color : var(--color-notice-content);
 }
 
 .alert-box.hideit {
     opacity    : 0;
     visibility : hidden;
     transition : all .5s;
 }
 
 /* ------------------------------------------------------------------- 
  * ## skillbars 
  * ------------------------------------------------------------------- */
 .skill-bars {
     list-style : none;
     margin     : var(--vspace-2) 0 var(--vspace-1);
 }
 
 .skill-bars li {
     height        : .4rem;
     background    : var(--color-gray-9);
     width         : 100%;
     margin-bottom : calc(var(--vspace-2) - .4rem);
     padding       : 0;
     position      : relative;
 }
 
 .skill-bars li strong {
     position       : absolute;
     left           : 0;
     top            : calc((var(--vspace-1) * 1.25) * -1);
     font-family    : var(--font-1);
     font-weight    : 600;
     color          : var(--color-text-dark);
     text-transform : uppercase;
     letter-spacing : .2em;
     font-size      : var(--text-xs);
     line-height    : var(--vspace-0_75);
 }
 
 .skill-bars li .progress {
     background : var(--color-1);
     position   : relative;
     height     : 100%;
 }
 
 .skill-bars li .progress span {
     display       : block;
     font-family   : var(--font-1);
     color         : white;
     font-size     : 1rem;
     line-height   : 1;
     background    : var(--color-black);
     padding       : var(--vspace-0_25);
     border-radius : 4px;
     position      : absolute;
     right         : 0;
     top           : calc((var(--vspace-1) + .8rem) * -1);
 }
 
 .skill-bars li .progress span::after {
     position         : absolute;
     left             : 50%;
     bottom           : -10px;
     margin-left      : -5px;
     width            : 0;
     height           : 0;
     border           : 5px solid transparent;
     border-top-color : var(--color-black, var(--color-black));
     content          : "";
 }
 
 .skill-bars li .percent5 {
     width : 5%;
 }
 
 .skill-bars li .percent10 {
     width : 10%;
 }
 
 .skill-bars li .percent15 {
     width : 15%;
 }
 
 .skill-bars li .percent20 {
     width : 20%;
 }
 
 .skill-bars li .percent25 {
     width : 25%;
 }
 
 .skill-bars li .percent30 {
     width : 30%;
 }
 
 .skill-bars li .percent35 {
     width : 35%;
 }
 
 .skill-bars li .percent40 {
     width : 40%;
 }
 
 .skill-bars li .percent45 {
     width : 45%;
 }
 
 .skill-bars li .percent50 {
     width : 50%;
 }
 
 .skill-bars li .percent55 {
     width : 55%;
 }
 
 .skill-bars li .percent60 {
     width : 60%;
 }
 
 .skill-bars li .percent65 {
     width : 65%;
 }
 
 .skill-bars li .percent70 {
     width : 70%;
 }
 
 .skill-bars li .percent75 {
     width : 75%;
 }
 
 .skill-bars li .percent80 {
     width : 80%;
 }
 
 .skill-bars li .percent85 {
     width : 85%;
 }
 
 .skill-bars li .percent90 {
     width : 90%;
 }
 
 .skill-bars li .percent95 {
     width : 95%;
 }
 
 .skill-bars li .percent100 {
     width : 100%;
 }
 
 /* --------------------------------------------------------------------
  * ## stats tabs
  * -------------------------------------------------------------------- */
 .stats-tabs {
     padding : 0;
     margin  : var(--vspace-1) 0;
 }
 
 .stats-tabs li {
     display      : inline-block;
     margin       : 0 1.6rem var(--vspace-0_5) 0;
     padding      : 0 1.5rem 0 0;
     border-right : 1px solid var(--color-border);
 }
 
 .stats-tabs li:last-child {
     margin  : 0;
     padding : 0;
     border  : none;
 }
 
 .stats-tabs li a {
     display     : block;
     font-family : var(--font-1);
     font-size   : var(--text-lg);
     font-weight : 600;
     line-height : var(--vspace-1_5);
     border      : none;
     color       : var(--color-text-dark);
 }
 
 .stats-tabs li a:hover {
     color : var(--color-1);
 }
 
 .stats-tabs li a em {
     display     : block;
     margin      : 0;
     font-family : var(--font-1);
     font-size   : var(--text-sm);
     line-height : var(--vspace-0_5);
     font-weight : 400;
     font-style  : normal;
     color       : var(--color-text-light);
 }
 
 
 
 /* ===================================================================
  * # PROJECT-WIDE SHARED STYLES
  *
  *
  * ------------------------------------------------------------------- */
 
 .wide {
     max-width : var(--width-wide);
 }
 
 .wider {
     max-width : var(--width-wider);
 }
 
 .narrow {
     max-width : var(--width-narrow);
 }
 
 
 
 /* ------------------------------------------------------------------- 
  * ## media classes
  * ------------------------------------------------------------------- */
 
 /* floated image
  */
 
 img.u-pull-right {
     margin : var(--vspace-0_5) 0 var(--vspace-0_5) var(--vspace-0_875);
 }
 
 img.u-pull-left {
     margin : var(--vspace-0_5) var(--vspace-0_875) var(--vspace-0_5) 0;
 }
 
 /* responsive video container
  */
 .video-container {
     position       : relative;
     padding-bottom : 56.25%;
     height         : 0;
     overflow       : hidden;
 }
 
 .video-container iframe,
 .video-container object,
 .video-container embed,
 .video-container video {
     position : absolute;
     top      : 0;
     left     : 0;
     width    : 100%;
     height   : 100%;
 }
 
 /* ------------------------------------------------------------------- 
  * ## theme-specific typography classes
  * ------------------------------------------------------------------- */
 .text-pretitle {
     font-size: 38px;
     font-weight: 400;
     color: #474747;
     text-transform: uppercase;
     letter-spacing: .3em;
     margin-top: 0;
     margin-bottom: 78px;
     position: relative;
 }
 
 .text-pretitle.with-line {
     color: hsl(214.48deg 62.58% 69.8%);
     padding-left: 6rem;
     transform: translateX(-6rem);
     font-family: "Montserrat", sans-serif;
 }
 
 .text-pretitle.with-line::before {
     content          : "";
     display          : block;
     height           : 1px;
     width            : 4rem;
     background-color : rgb(147 147 147 / 50%);
     position         : absolute;
     top              : 50%;
     left             : 0;
 }
 
 
 .text-huge-title {
     --text-huge : 10.8rem;
     font-size   : var(--text-huge);
     line-height : 1.4em;
     margin-top  : 0;
 }
 
 /* ------------------------------------------------------------------- 
  * ## MailtoUI style overrides
  * ------------------------------------------------------------------- */
 .mailtoui-modal {
     --mailtoui-modal-box-shadow         : 0 1px 1px rgba(0, 0, 0, 0.08), 0 2px 2px rgba(0, 0, 0, 0.08), 0 4px 4px rgba(0, 0, 0, 0.08), 0 8px 8px rgba(0, 0, 0, 0.08);
     --mailtoui-modal-head-bgcolor       : var(--color-gray-18);
     --mailtoui-modal-head-title-color   : white;
     --mailtoui-modal-body-bgcolor       : var(--color-gray-11);
     --mailtoui-button-bgcolor           : rgba(255, 255, 255, .04);
     --mailtoui-button-text-color        : white;
     --mailtoui-button-bgcolor-hover     : var(--color-1-dark);
     --mailtoui-button-text-color-hover  : black;
     --mailtoui-button-text-size         : 16px;
     --mailtoui-email-address-bgcolor    : var(--color-gray-13);
     --mailtoui-email-address-text-color : var(--text-color);
     --border-radius                     : 0;
     font-family                         : var(--font-1);
     background-color                    : var(--color-body);
     color                               : white;
 }
 
 .mailtoui-modal-content {
     background-color : var(--mailtoui-modal-body-bgcolor);
     border-radius    : var(--border-radius);
     box-shadow       : var(--mailtoui-modal-box-shadow);
 }
 
 .mailtoui-modal-content button {
     font-weight : 400;
     font-size   : 16px;
     margin      : 0;
     padding     : 0;
 }
 
 .mailtoui-modal-head {
     background-color : var(--mailtoui-modal-head-bgcolor);
 }
 
 .mailtoui-modal-title {
     font-family : var(--font-1);
     font-weight : 400;
     font-size   : 16px;
     color       : var(--mailtoui-modal-head-title-color);
 }
 
 .mailtoui-modal-close {
     font        : 0/0 a;
     text-shadow : none;
     color       : transparent;
     font-size   : 32px;
     font-weight : 300;
     color       : rgba(255, 255, 255, 0.5);
 }
 
 .mailtoui-modal-close:hover,
 .mailtoui-modal-close:focus {
     color       : white;
     font-weight : 300;
 }
 
 .mailtoui-modal-body {
     background-color : var(--mailtoui-modal-body-bgcolor);
 }
 
 .mailtoui-button-text {
     font-size      : var(--mailtoui-button-text-size);
     text-transform : none;
     letter-spacing : 0;
 }
 
 .mailtoui-button:focus .mailtoui-button-content {
     background-color : var(--mailtoui-button-bgcolor-hover);
     color            : var(--mailtoui-button-text-color-hover);
 }
 
 .mailtoui-button-content,
 .mailtoui-button-copy {
     background-color : var(--mailtoui-button-bgcolor);
     color            : var(--mailtoui-button-text-color);
     border-radius    : var(--border-radius);
     box-shadow       : none;
 }
 
 .mailtoui-button-content:hover,
 .mailtoui-button-content:focus,
 .mailtoui-button-copy:hover,
 .mailtoui-button-copy:focus {
     background-color : var(--mailtoui-button-bgcolor-hover);
     color            : var(--mailtoui-button-text-color-hover);
 }
 
 .mailtoui-copy {
     border-radius : var(--border-radius);
     box-shadow    : none;
 }
 
 .mailtoui-button-icon-copy {
     line-height : var(--vspace-1);
 }
 
 .mailtoui-button-copy-clicked,
 .mailtoui-button-copy-clicked:hover,
 .mailtoui-button-copy-clicked:focus {
     background-color : #1F9D55;
     color            : white;
 }
 
 .mailtoui-email-address {
     background-color : var(--mailtoui-email-address-bgcolor);
     color            : var(--mailtoui-email-address-text-color);
     font-size        : 16px;
     line-height      : 1;
     border-radius    : var(--border-radius);
 }
 
 .mailtoui-brand a {
     color : rgba(255, 255, 255, 0.12);
 }
 
 .mailtoui-brand a:focus,
 .mailtoui-brand a:hover {
     font-weight : 300;
     color       : white;
 }
 
 /* ------------------------------------------------------------------- 
  * responsive:
  * project-wide shared styles
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 800px) {
     .text-pretitle.with-line {
         padding-left : 3rem;
         transform    : translateX(-3rem);
         transform    : none;
     }
 
     .text-pretitle.with-line::before {
         width : 2rem;
     }
 }
 
 
 
 /* ===================================================================
  * # PAGE WRAP
  *
  *
  * ------------------------------------------------------------------- */
 
 .s-pagewrap {
     --circle-width  : 70vw;
     --header-height : 6.4rem;
     display         : flex;
     flex-direction  : column;
     min-height      : 100%;
     overflow        : hidden;
     position        : relative;
 }
 
 /* --------------------------------------------------------------------
  * ## circles
  * -------------------------------------------------------------------- */
 .s-pagewrap .circles,
 .s-pagewrap .circles span {
     position : absolute;
 }
 
 .s-pagewrap .circles {
     width  : var(--circle-width);
     height : var(--circle-width);
     top    : calc(100vh - var(--circle-width));
     left   : calc(100% - 33vw);
 }
 
 .s-pagewrap .circles span {
   display: block;
   border-radius: 50%;
   transform: translate(-50%, -50%);
   left: 61%;
   top: 50%;
   background: radial-gradient(circle, rgba(33, 150, 243, 0.8) 0%, rgba(255, 255, 255, 1) 100%);
 }
 
 .s-pagewrap .circles span:nth-child(1) {
     height : 100%;
     width  : 100%;
 }
 
 .s-pagewrap .circles span:nth-child(2) {
     height : 80%;
     width  : 80%;
 }
 
 .s-pagewrap .circles span:nth-child(3) {
     height : 60%;
     width  : 60%;
 }
 
 .s-pagewrap .circles span:nth-child(4) {
     height : 40%;
     width  : 40%;
 }
 
 .s-pagewrap .circles span:nth-child(5) {
     height : 20%;
     width  : 20%;
 }
 
 .s-pagewrap .circles,
 .s-pagewrap .circles span {
     position : absolute;
 }
 
 .ss-preload .s-pagewrap {
     visibility : hidden;
 }
 
 /* ------------------------------------------------------------------- 
  * responsive:
  * page-wrap
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 800px) {
     .s-pagewrap .circles {
         top : calc(var(--header-height) + 5vh);
     }
 }
 
 
 
 /* ===================================================================
  * # SITE HEADER
  *
  *
  * ------------------------------------------------------------------- */
 
 .s-header {
     --box-shadow : 0 1px 1px rgba(0, 0, 0, 0.06), 0 2px 2px rgba(0, 0, 0, 0.06), 0 4px 4px rgba(0, 0, 0, 0.06), 0 8px 8px rgba(0, 0, 0, 0.06);
     z-index      : 100;
     width        : 100%;
     position     : fixed;
     top          : 0;
     left         : 0;
 }
 
 .header-mobile {
     z-index          : 101;
     display          : none;
     height           : var(--header-height);
     background-color : var(--color-body);
     box-shadow       : var(--box-shadow);
     border-bottom    : 1px solid var(--color-border);
 }
 
 /* --------------------------------------------------------------------
  * ## main navigation
  * -------------------------------------------------------------------- */
 .mobile-home-link a,
 .main-nav a {
     display             : block;
     font-size           : 10px;
     font-weight         : 400;
     line-height         : var(--header-height);
     text-transform      : uppercase;
     letter-spacing      : .35em;
     color               : white;
     transition-property : color, background-color;
 }
 
 .mobile-home-link a:focus,
 .mobile-home-link a:hover,
 .main-nav a:focus,
 .main-nav a:hover {
     color : var(--color-1);
 }
 
 .mobile-home-link {
     display  : inline-block;
     position : relative;
 }
 
 .mobile-home-link a {
     padding     : 0 .4rem;
     margin-left : 2.4rem;
 }
 
 .main-nav {
     padding : 0;
 }
 
 .main-nav a {
     padding : 0 2rem 0 2.4rem;
 }
 
 .main-nav .current a {
     background-color : var(--color-gray-9);
 }
 
 .main-nav ul {
     list-style       : none;
     display          : flex;
     flex-flow        : row nowrap;
     margin           : 0;
     padding          : 0;
     background-color : var(--color-body);
     border-width     : 1px;
     border-color     : var(--color-border);
     border-style     : none solid solid solid;
 }
 
 .main-nav li {
     flex         : 1 1 0%;
     padding-left : 0;
     border-right : 1px solid var(--color-border);
 }
 
 .main-nav li:last-child {
     border-right : none;
 }
 
 /* --------------------------------------------------------------------
  * ## mobile menu toggle
  * -------------------------------------------------------------------- */
 .mobile-menu-toggle {
     display  : block;
     width    : var(--header-height);
     height   : var(--header-height);
     position : absolute;
     top      : 0;
     right    : .8rem;
 }
 
 .mobile-menu-toggle span {
     display          : block;
     background-color : white;
     width            : 24px;
     height           : 1px;
     margin-top       : -1px;
     font             : 0/0 a;
     text-shadow      : none;
     color            : transparent;
     position         : absolute;
     right            : 20px;
     top              : 50%;
     bottom           : auto;
     left             : auto;
     transition       : background-color 0.2s ease-in-out;
 }
 
 .mobile-menu-toggle span::before,
 .mobile-menu-toggle span::after {
     content             : "";
     width               : 100%;
     height              : 100%;
     background-color    : inherit;
     transition-duration : 0.2s, 0.2s;
     transition-delay    : 0.2s, 0s;
     position            : absolute;
     left                : 0;
 }
 
 .mobile-menu-toggle span::before {
     top                 : -8px;
     transition-property : top, transform;
 }
 
 .mobile-menu-toggle span::after {
     bottom              : -8px;
     transition-property : bottom, transform;
 }
 
 /* is clicked 
  */
 .mobile-menu-toggle.is-clicked span {
     background-color : rgba(255, 255, 255, 0);
 }
 
 .mobile-menu-toggle.is-clicked span::before,
 .mobile-menu-toggle.is-clicked span::after {
     background-color : white;
     transition-delay : 0s, 0.2s;
 }
 
 .mobile-menu-toggle.is-clicked span::before {
     top       : 0;
     transform : rotate(45deg);
 }
 
 .mobile-menu-toggle.is-clicked span::after {
     bottom    : 0;
     transform : rotate(-45deg);
 }
 
 /* ------------------------------------------------------------------- 
  * responsive:
  * site-header
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 1000px) {
     .main-nav-wrap {
         width : 100%;
     }
 }
 
 @media screen and (max-width: 800px) {
     .s-header {
         height : var(--header-height);
     }
 
     .header-mobile {
         display : block;
     }
 
     .main-nav-wrap {
         transform        : scaleY(0);
         transform-origin : center top;
         background-color : var(--color-body);
         border-bottom    : 1px solid var(--color-border);
         box-shadow       : var(--box-shadow);
     }
 
     .main-nav {
         padding    : var(--vspace-1) 0 var(--vspace-1_5);
         transform  : translateY(-2rem);
         opacity    : 0;
         visibility : hidden;
     }
 
     .main-nav a {
         font-family    : var(--font-2);
         font-size      : var(--text-md);
         font-weight    : 400;
         line-height    : var(--vspace-0_875);
         text-transform : none;
         letter-spacing : 0;
         padding        : var(--vspace-0_5) 2.8rem;
         color          : var(--color-text);
     }
 
     .main-nav a:focus,
     .main-nav a:hover {
         color : white;
     }
 
     .main-nav .current a {
         background-color : transparent;
         color            : var(--color-1);
     }
 
     .main-nav ul {
         display          : block;
         background-color : transparent;
         text-align       : left;
         margin           : 0;
         border           : none;
     }
 
     .main-nav ul li {
         display : block;
         border  : none;
     }
 
     .main-nav ul li:first-child {
         display : none;
     }
 
     .menu-is-open .s-header {
         height : auto;
     }
 
     .menu-is-open .header-mobile {
         box-shadow : none;
     }
 
     .menu-is-open .main-nav-wrap {
         transform        : scaleY(1);
         transition       : transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
         transition-delay : 0s;
     }
 
     .menu-is-open .main-nav {
         transform        : translateY(0);
         opacity          : 1;
         visibility       : visible;
         transition       : all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
         transition-delay : .4s;
     }
 }
 
 @media screen and (max-width: 600px) {
     .main-nav-wrap {
         padding : 0;
     }
 }
 
 
 
 /* ===================================================================
  * # INTRO
  *
  *
  * ------------------------------------------------------------------- */
 
 .s-intro {
     --gutter               : 6rem;
     --text-huge-multiplier : 1;
     position               : relative;
 }
 
 .intro-content {
     min-height      : calc(25.5 * var(--space));
     align-items     : center;
     padding-top     : calc(16vh + var(--header-height));
     padding-bottom  : var(--vspace-3);
 }
 
 .intro-content .text-huge-title {
    font-size: 70px;
    padding-right: 5vw;
    line-height: 2.4em;
 }
 
 /* --------------------------------------------------------------------
  * ## intro social
  * -------------------------------------------------------------------- */
 .intro-social {
     z-index          : 1;
     list-style       : none;
     display          : flex;
     font-size        : 1rem;
     font-weight      : 400;
     text-transform   : uppercase;
     letter-spacing   : .3em;
     margin           : 0;
     padding          : 0 0 0 9.6rem;
     transform        : rotate(-90deg) translateX(-50%);
     transform-origin : left bottom;
     position         : absolute;
     top: 23%;
     left: calc(100% - 6rem);
     width: 40%;
 }
 
 .intro-social li {
     padding : 0 1.2rem;
 }
 
 .intro-social a {
     color : var(--color-text-light);
 }
 
 .intro-social a:focus,
 .intro-social a:hover {
     color : white;
 }
 
 /* --------------------------------------------------------------------
  * ## intro scrolldown
  * -------------------------------------------------------------------- */
 .intro-scrolldown {
   display: block;
   height: var(--vspace-1);
   width: var(--vspace-1);
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   right: 5.9rem;
   top: 53rem;
 }
 
 .intro-scrolldown svg {
     height : var(--vspace-0_75);
     width  : var(--vspace-0_75);
 }
 
 .intro-scrolldown svg path {
     fill       : #707070;
     transition : all .3s ease-in-out;
 }
 
 .intro-scrolldown:focus svg path,
 .intro-scrolldown:hover svg path {
     fill : var(--color-1);
 }
 
 /* ------------------------------------------------------------------- 
  * responsive:
  * intro
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 1600px) {
     .s-intro {
         --text-huge-multiplier : .92;
     }
 }
 
 @media screen and (max-width: 1200px) {
     .s-intro {
         --text-huge-multiplier : .85;
     }
 
     .intro-social {
         left : calc(100% - 4rem);
     }
 
     .intro-scrolldown {
         right: 12.4rem;
         top: 44.2rem;
     }
 }
 
 @media screen and (max-width: 1000px) {
     .s-intro {
         --text-huge-multiplier : .8;
     }
 
     .intro-content {
         padding-top : calc(14vh + var(--header-height));
     }
 }
 
 @media screen and (max-width: 900px) {
     .s-intro {
         --text-huge-multiplier : .75;
     }
 
 }
 
 @media screen and (max-width: 800px) {
     .s-intro {
         --gutter               : 4rem;
         --text-huge-multiplier : .7;
     }
 
     .intro-content {
         min-height  : 0;
         align-items : flex-start;
         padding-top : calc(9.6rem + var(--header-height));
     }
 
     .intro-content .text-huge-title {
         padding-right : 0;
     }
 
     .intro-social {
         width         : 100%;
         flex-wrap     : wrap;
         padding-left  : 0;
         padding-right : 8rem;
         transform     : none;
         position      : relative;
         left          : var(--gutter);
     }
 
     .intro-social li {
        padding: 0 .6rem;
        margin-top: 161px;
     }
 }
 
 @media screen and (max-width: 600px) {
     .s-intro {
         --gutter               : 2rem;
         --text-huge-multiplier : .58;
     }
 
 }
 
 @media screen and (max-width: 500px) {
     .s-intro {
         --text-huge-multiplier : .55;
     }
 
     .intro-social {
         left : 1.4rem;
     }
 }
 
 @media screen and (max-width: 400px) {
     .intro-content .text-huge-title {
         font-size: 32px;
         line-height: 1.3em;
     }
 
     .intro-social {
         left : 0;
     }
 }
 
 @media screen and (max-width: 350px) {
     .intro-social {
         display : none;
     }
 }
 
 
 
 /* ===================================================================
  * # ABOUT
  *
  *
  * ------------------------------------------------------------------- */
 
 .s-about {
     padding-top    : var(--vspace-4);
     padding-bottom : var(--vspace-3);
 }
 
 /* --------------------------------------------------------------------
  * ## about info
  * -------------------------------------------------------------------- */
 .about-info {
     --gutter    : 0;
     width       : 100%;
     align-items : center;
 }
 
 .about-info__pic {
   width: 70%;
   height: auto;
   position: relative;
   left: 7%;
   margin: 0;
 }
 
 .about-info__text {
     padding: 0;
 }
 
 .about-info__text .text-pretitle {
     margin-bottom : var(--vspace-1);
 }
 
 .about-info__text .btn {
     color: #ffffff;
     font-size: 15px;
     letter-spacing: 0.8px;
     background: #000;
     padding: 17px;
     width: 50%;
     display: block;
     text-align: center;
     font-weight: 600;
     margin: 38px 0 0 0;
 }
 
 .about-info__text .btn:hover {
     color: #c1c1c1;
     background: #747474;
 }
 
 .about-info__text h3 {
     margin: 60px 0 28px;
     font-size: 36px;
 }
 
 
 
 
 /* --------------------------------------------------------------------
  * ## about expertise
  * -------------------------------------------------------------------- */
 .about-expertise {
   padding-top: 280px;
   margin: 0 auto;
 }
 
 .about-expertise .skills-list {
     list-style  : none;
     margin-top  : var(--vspace-1);
     margin-left : 0;
 }
 
 .about-expertise .skills-list li {
     display      : inline-block;
     padding-left : 0;
 }
 
 .about-expertise .skills-list li:not(:last-child)::after {
     content : ", ";
 }
 
 /* --------------------------------------------------------------------
  * ## about timelines
  * -------------------------------------------------------------------- */
 .about-timelines {
     --timeline-left-padding : var(--vspace-1_75);
     --timeline-top-adjust   : var(--vspace-0_5);
     padding-top             : var(--vspace-3);
 }
 
 .about-timelines .text-pretitle {
     margin-left : var(--timeline-left-padding);
 }
 
 .timeline {
     margin-top    : var(--vspace-1_25);
     padding-right : 1vw;
     position      : relative;
 }
 
 .timeline::before {
     content          : "";
     display          : block;
     width            : 1px;
     height           : calc(100% - var(--timeline-top-adjust));
     background-color : hsl(0deg 0% 89.27%);
     position         : absolute;
     top              : var(--timeline-top-adjust);
     left             : 3px;
 }
 
 .timeline__block {
     padding-left   : var(--timeline-left-padding);
     padding-bottom : 70px;
     position       : relative;
 }
 
 .timeline__block:last-child {
     padding-bottom : 0;
 }
 
 .timeline__bullet {
     display          : block;
     height           : 8px;
     width            : 8px;
     border-radius    : 50%;
     background-color : #82abe2;
     position         : absolute;
     top              : var(--timeline-top-adjust);
     left             : 0;
 }
 
 .timeline__title {
     font-family   : var(--font-1);
     font-weight   : 500;
     font-size     : 28px;
     margin-top    : 0;
     margin-bottom : var(--vspace-0_125);
 }
 
 .timeline__meta {
     font-family   : var(--font-1);
     font-weight   : 300;
     font-size     : 20px;
     margin-top    : 10px;
     margin-bottom : var(--vspace-0_125);
 }
 
 .timeline__timeframe {
     font-size: 14px;
     line-height: var(--vspace-0_75);
     text-transform: uppercase;
     letter-spacing: .1em;
     margin-top: 10px;
     color: #707070;
   margin-bottom: 40px;
 }
 
 /* ------------------------------------------------------------------- 
  * responsive:
  * about
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 1300px) {
     .about-info__text {
         padding : var(--vspace-2) 8rem var(--vspace-1_5) 0;
     }
 }
 
 @media screen and (max-width: 1200px) {
     .about-info {
         --gutter  : 1.6rem;
         width     : 92%;
         max-width : 800px;
     }
 
     .about-info__text {
         padding     : var(--vspace-1) 0 0 0;
         margin-left : 0;
     }
 }
 
 @media screen and (max-width: 1000px) {
     .about-timelines {
         --timeline-left-padding : var(--vspace-1_25);
     }
 }
 
 @media screen and (max-width: 800px) {
     .about-timelines {
         --timeline-left-padding : var(--vspace-1_5);
     }
 
 }
 
 @media screen and (max-width: 600px) {
     .about-info {
         width : 100%;
     }
 }
 
 @media screen and (max-width: 400px) {
     .about-timelines {
         --timeline-left-padding : var(--vspace-1);
     }
 }
 
 
 
 /* ===================================================================
  * # WORKS
  *
  *
  * ------------------------------------------------------------------- */
 
 .s-works {
     padding-top    : var(--vspace-5);
     padding-bottom : var(--vspace-3_5);
 }
 
 .s-works .h1 {
     margin-top : 0;
 }
 
 /* --------------------------------------------------------------------
  * ## works portfolio
  * -------------------------------------------------------------------- */
 .folio-list {
     --item-min-height : var(--vspace-4_5);
     list-style        : none;
     margin-top        : var(--vspace-4);
     margin-bottom     : var(--vspace-1);
     margin-left       : 0;
 }
 
 .folio-list__item {
    position: relative;
    margin: 0 15px 280px 15px;
 }
 

 
 .folio-list__item-link:focus,
 .folio-list__item-link:hover {
     color   : var(--color-1);
     outline : 0;
 }
 
 .folio-list__item-link:focus .folio-list__item-pic::before,
 .folio-list__item-link:hover .folio-list__item-pic::before {
     opacity    : 1;
     visibility : visible;
 }
 
 .folio-list__item-link:focus .folio-list__item-pic::after,
 .folio-list__item-link:hover .folio-list__item-pic::after {
     opacity    : 1;
     visibility : visible;
     transform  : scale(1);
 }
 
 .folio-list__item-link:focus .folio-list__item-text::before,
 .folio-list__item-link:hover .folio-list__item-text::before {
     width : 100%;
 }
 
 .folio-list__item-pic {
     display  : block;
     position : absolute;
     top      : 0;
     left     : 0;
 }
 
 .folio-list__item-pic img {
     vertical-align : bottom;
     object-fit     : cover;
     width          : 240px;
     height         : 240px;
     margin         : 0;
 }
 
 .folio-list__item-pic::before,
 .folio-list__item-pic::after {
     transition : all, 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
 .folio-list__item-pic::before {
     z-index          : 1;
     content          : "";
     display          : block;
     background-color : rgba(255, 255, 255, 0.75);
     position         : absolute;
     top              : 0;
     left             : 0;
     right            : 0;
     bottom           : 0;
     width            : 100%;
     height           : 100%;
     opacity          : 0;
     visibility       : hidden;
 }
 
 .folio-list__item-pic::after {
     z-index     : 2;
     display     : block;
     content     : "+";
     font-family : var(--font-1);
     font-weight : 300;
     font-size   : 2.2rem;
     color       : black;
     text-align  : center;
     height      : var(--vspace-1);
     width       : var(--vspace-1);
     line-height : var(--vspace-1);
     transform   : scale(0.2);
     opacity     : 0;
     visibility  : hidden;
     position    : absolute;
     top         : calc(50% - var(--vspace-0_5));
     left        : calc(50% - var(--vspace-0_5));
 }
 
 .folio-list__item-text::before,
 .folio-list__item-title,
 .folio-list__item-cat {
     transition : all, 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
 .folio-list__item-text {
   padding-top: var(--vspace-0_5);
   border-top: 1px solid var(--color-border);
   min-height: var(--item-min-height);
   position: relative;
   left: 110px;
   width: 240px;
 }
 
 .folio-list__item-text::before {
     content          : "";
     display          : block;
     width            : 0;
     height           : 1px;
     background-color : #82abe2;
     position         : absolute;
     top              : 0;
     left             : 0;
 }
 
 .folio-list__item-title {
   font-family: var(--font-1);
   font-size: 20px;
   color: #474747;
 }
 
 .folio-list__item-cat {
   font-size: 15px;
   color: #707070;
   line-height: var(--vspace-0_75);
   margin-left: 0;
 }
 
 .folio-list__proj-link {
     display  : block;
     height   : var(--vspace-1);
     width    : var(--vspace-1);
     position : absolute;
     top      : .8rem;
     right    : var(--vspace-0_75);
 }
 
 .folio-list__proj-link svg {
     height    : var(--vspace-0_5);
     width     : var(--vspace-0_5);
     transform : translate(-50%, -50%) rotate(-45deg);
     position  : absolute;
     top       : 50%;
     left      : 50%;
 }
 
 .folio-list__proj-link svg path {
     fill : white;
 }
 
 .folio-list__proj-link:hover {
     transform : scale(1.2);
 }
 
 .jpTitle {
     font-size: 16px;
     color: #474747;
     margin-top: 12px;
 }
 
 
 
 /* ------------------------------------------------------------------- 
  * ## testimonials
  * ------------------------------------------------------------------- */
 .testimonials {
     margin-top : var(--vspace-3);
 }
 
 .testimonials .swiper-container {
     padding-bottom : var(--vspace-2_5);
 }
 
 .testimonials .swiper-container-horizontal .swiper-pagination-bullets .swiper-pagination-bullet {
     margin : 0 9px;
 }
 
 .testimonials .swiper-pagination-bullet {
     width      : 6px;
     height     : 6px;
     background : white;
     opacity    : 0.4;
 }
 
 .testimonials .swiper-pagination-bullet-active {
     background : var(--color-1);
     opacity    : 1;
 }
 
 /* ------------------------------------------------------------------- 
  * ## testimonial slider 
  * ------------------------------------------------------------------- */
 .testimonial-slider__slide {
     position : relative;
 }
 
 .testimonial-slider__slide:hover .testimonial-slider__avatar {
     filter : none;
 }
 
 .testimonial-slider__slide:hover .testimonial-slider__cite strong {
     color : var(--color-1);
 }
 
 .testimonial-slider__slide:hover .testimonial-slider__cite span {
     color : white;
 }
 
 .testimonial-slider__author {
     display       : inline-block;
     min-height    : var(--vspace-2);
     margin-bottom : var(--vspace-0_5);
     padding-left  : var(--vspace-2_5);
     position      : relative;
 }
 
 .testimonial-slider__avatar {
     width         : var(--vspace-1_75);
     height        : var(--vspace-1_75);
     border-radius : 100%;
     outline       : none;
     position      : absolute;
     top           : 0;
     left          : 0;
     filter        : grayscale(100%);
     transition    : all 0.3s ease-in-out;
 }
 
 .testimonial-slider__cite {
     display : block;
 }
 
 .testimonial-slider__cite strong,
 .testimonial-slider__cite span {
     font-style : normal;
     transition : all 0.3s ease-in-out;
 }
 
 .testimonial-slider__cite strong {
     font-size   : calc(var(--text-size) * 0.8947);
     font-weight : 400;
     line-height : var(--vspace-0_75);
     color       : white;
 }
 
 .testimonial-slider__cite span {
     display     : block;
     font-size   : calc(var(--text-size) * 0.7368);
     font-weight : 300;
     line-height : var(--vspace-0_5);
     color       : var(--color-text-light);
 }
 
 /* ------------------------------------------------------------------- 
  * responsive:
  * works
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 1200px) {
     .folio-list__item-title {
         font-size   : var(--text-md);
         line-height : var(--vspace-0_875);
     }
 
     .folio-list__item-cat {
         font-size : var(--text-xs);
     }
 }
 
 @media screen and (max-width: 1000px) {
     .folio-list__item-title {
         font-size   : var(--text-lg);
         line-height : var(--vspace-1);
     }
 
     .folio-list__item-cat {
         font-size : var(--text-sm);
     }
 }
 
 @media screen and (max-width: 800px) {
     .s-works {
         padding-top    : var(--vspace-4);
         padding-bottom : var(--vspace-3);
     }
 }
 
 @media screen and (max-width: 600px) {
     .folio-list__item-title {
         font-size   : var(--text-md);
         line-height : var(--vspace-0_875);
     }
 
     .folio-list__proj-link {
         right : var(--vspace-0_5);
     }
 }
 
 @media screen and (max-width: 500px) {
     .folio-list {
         --item-min-height : var(--vspace-3_5);
     }
 
     .folio-list__item {
         margin-bottom : var(--vspace-0_75);
     }
 
     .folio-list__item-link {
         padding-left : calc(4.25 * var(--space));
     }
 }
 
 @media screen and (max-width: 400px) {
     .folio-list .column {
         flex  : none;
         width : 100%;
     }
 
     .folio-list__item {
         margin-bottom : 0;
     }
 
     .folio-list__item-link {
         padding-left: 0;
         width: 100%;
         height: auto;
         margin-bottom: 30px;
     }

   
     .folio-list__item-pic {
         position : static;
     }
 
     .folio-list__item-pic img {
         max-width : 100%;
         width     : 100%;
         height    : auto;
     }
 
     .folio-list__item-text,
     .folio-list__proj-link {
         display : none;
     }
 
     .modal-popup__desc {
         padding : 0 var(--vspace-1) var(--vspace-0_25);
     }
 }
 
 
 
 /* ===================================================================
  * # CONTACT
  *
  *
  * ------------------------------------------------------------------- */
 
 .contact-top {
     padding-top : var(--vspace-5);
     border-top  : 1px solid var(--color-border);
 }
 
 .contact-top .h1 {
     margin-top : 0;
 }
 
 .contact-bottom {
     padding-bottom : var(--vspace-3);
     margin-top     : var(--vspace-3);
     border-bottom  : 1px solid var(--color-border);
 }
 
 .contact-bottom .text-pretitle {
     margin-bottom : var(--vspace-0_125);
 }
 
 .contact-links,
 .contact-social {
     font-size   : var(--text-md);
     font-weight : 300;
     line-height : var(--vspace-1_25);
     color       : var(--color-text-light);
 }
 
 .contact-links a,
 .contact-social a {
     color : var(--color-text-light);
 }
 
 .contact-links a:focus,
 .contact-links a:hover,
 .contact-social a:focus,
 .contact-social a:hover {
     color : var(--color-1);
 }
 
 .contact-social {
     list-style  : none;
     margin-left : 0;
 }
 
 .contact-social li {
     display      : inline-block;
     padding-left : 0;
 }
 
 .contact-social li::after {
     content : ",  ";
 }
 
 .contact-social li:last-child::after {
     display : none;
 }
 
 .contact-btn {
     margin-left  : auto;
     margin-right : 5vw;
 }
 
 /* ------------------------------------------------------------------- 
  * responsive:
  * contact
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 1200px) {
     .contact-btn {
         margin-top   : var(--vspace-0_5);
         margin-left  : 0;
         margin-right : 0;
     }
 }
 
 @media screen and (max-width: 800px) {
     .contact-top {
         padding-top : var(--vspace-4);
     }
 }
 
 
 
 /* ===================================================================
  * # FOOTER
  *
  *
  * ------------------------------------------------------------------- */
 
 .s-footer {
     margin-top     : auto;
     padding-top    : var(--vspace-1);
     padding-bottom : var(--vspace-3);
     color          : var(--color-text-light);
 }
 
 .s-footer>.row {
     position : relative;
 }
 
 .s-footer a {
     color : var(--color-text);
 }
 
 .s-footer a:focus,
 .s-footer a:hover {
     color : white;
 }
 
 /* ------------------------------------------------------------------- 
  * ## 共通
  * ------------------------------------------------------------------- */
 span.title {
     font-size: 21px;
     color: #474747;
     font-weight: 500;
     padding-bottom: 18px;
     display: block;
 }
 .col-lg-6 ul li {
     text-align: left;
     margin-right: 70px;
 }
 
 
 
 /* ------------------------------------------------------------------- 
  * ## copyright
  * ------------------------------------------------------------------- */
 .ss-copyright {
     margin-top   : calc(var(--vspace-0_25) * -1);
     margin-right : 5.2rem;
     line-height  : var(--vspace-0_875);
 }
 
 .ss-copyright span {
     font-size : var(--text-sm);
     display   : inline-block;
 }
 
 .ss-copyright span::after {
     content : "|";
     display : inline-block;
     padding : 0 .8rem 0 1rem;
     color   : rgba(255, 255, 255, 0.1);
 }
 
 .ss-copyright span:last-child::after {
     display : none;
 }
 
 
 /* ------------------------------------------------------------------- 
  * responsive:
  * footer
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 600px) {
     .ss-copyright span {
         display : block;
     }
 
     .ss-copyright span::after {
         display : none;
     }
 
     .ss-go-top {
         top   : calc(var(--vspace-0_25) * -1);
         right : calc(6vw + var(--gutter));
     }
 }
 
 @media screen and (max-width: 400px) {
     .ss-go-top {
         right : 6vw;
     }
 }
 
 
 
 /* ------------------------------------------------------------------- 
  * responsive:
  * top page
  * ------------------------------------------------------------------- */
 
 @media (max-width: 768px) {
     .text-pretitle {
         font-size: 30px;
         margin-bottom: 58px;
     }
   
   .about-info__text h3 {
     font-size: 25px;
     margin: 30px 0 28px;
   }
   
   .timeline__desc {
     width: 100%;
   }
   
   span.title {
     font-size: 20px;
   }
   
   .timeline__title {
     font-size: 22px;
   }
   
   .timeline__meta {
     font-size: 18px;
     margin-top: 12px;
     margin-bottom: 12px;
   }
   
   .timeline__block:last-child {
         padding-bottom: 40px;
         border-bottom: unset;
         margin-bottom: 0;
   }
   
   .about-expertise {
     padding-top: 148px;
   }
   
   .timeline__bullet {
     display: none;
   }
   
   .timeline__block {
         padding-left: 0;
         padding-bottom: 40px;
         border-bottom: 1px dotted #d7d7d7;
         margin-bottom: 40px;
   }
   
   .timeline::before {
     content: unset;
     top: unset;
     left: 0;
   }
   
   .folio-list {
     margin-top: 0;
   }
   
 }