@charset "utf-8";
h1, h1 .button {
font-size: 32px
}
h2, h2 .button {
font-size: 28px
}
h3, h3 .button {
font-size: 17px
}
h4, h4 .button {
font-size: 15px
}
h5, h5 .button {
font-size: 14px
}
h6, h6 .button {
font-size: 12px
}
small {
font-size: 10px
}
ol {
list-style: decimal
}
li {
margin-left: 30px
}
dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset, blockquote, article, p {
margin-bottom: 20px
}
strong {
font-weight:300;
}
body {
border-top: 6px solid #3a3a3a;
color: #545454;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
background-color: #fff;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size: 11px;
line-height: 1.7
}
::-moz-selection {
background:#000;
color:#fff;
text-shadow:none
}
::selection {
background: #000;
color: ##545454;
text-shadow: none
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px [#f8f8f8] inset;
}
h1, h2, h3, h4, h5, h6 {
color: #2c2c2c;
font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-weight: 400;
line-height: 1.25;
margin-bottom: 15px
}
h3, h4, h5 {
font-weight: 100
}
a, a>* {
color: #3a3a3a;
text-decoration: none;
-webkit-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
-moz-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
-ms-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
-o-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out
}
a:hover, a>*:hover {
color: #000
}
.block a, a>* {
color: #000;
text-decoration: underline;
-webkit-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
-moz-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
-ms-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
-o-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out
}
.block a:hover, a>*:hover {
color: #858585;
text-decoration: none
}
.block_under a, a>* {
color: #858585;
text-decoration: none;
-webkit-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
-moz-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
-ms-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
-o-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out
}
.block_under a:hover {
color: #858585;
text-decoration: underline
}
hr {
background: #000;
color: #efefef;
margin: 5px 0 25px
}
hr.dotted {
border-style: dotted
}
p+hr {
margin: 25px 0 20px
}
blockquote {
background: #3a3a3a url(https://grampixel.jp/img/quote.png) no-repeat 17px 21px;
font: italic 15px/1.6 'PT Serif', Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
padding: 20px 20px 20px 55px
}
blockquote.simple {
background: 0;
border-left: 2px solid #ddd;
color: #bbb;
font-size: 13px;
margin: 0;
padding: 0 0 0 10px
}
blockquote p:last-of-type {
margin-bottom: 0
}
blockquote small {
font-size: 12px
}
input[type="button"],input[type="text"],input[type="submit"],input[type="reset"]{
-webkit-appearance: none;
border-radius: 0;
}
input[type="submit"], input[type="reset"], input[type="button"],button {
background: #fff;
border: 1px solid #D7D7D7;
color: #000;
cursor: pointer;
font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-weight: 400;
height: auto;
overflow: visible;
padding: 7px 20px;
-webkit-transition: background-color .2s ease;
-moz-transition: background-color .2s ease;
-ms-transition: background-color .2s ease;
-o-transition: background-color .2s ease;
transition: background-color .2s ease;
width: auto
}
input[type="submit"]:hover, input[type="reset"]:hover, button:hover {
background: #3a3a3a;
color: #fff
}
.button {
background: #fff;
font-size: 12px;
display: inline-block;
padding: 0px;
}
.button.medium {
font-size: 13px
}
.button.large {
font-size: 15px
}
.button.no-bg {
background: 0;
color: #3a3a3a;
padding: 0
}
.button.no-bg:hover, #footer .button.no-bg:hover {
background: 0;
color: #000
}
.button .icon, .button .arrow {
color: transparent;
cursor: pointer;
display: inline-block;
font: 0/0 a;
height: 19px;
margin: -3px 0 0 3px;
-webkit-text-shadow: none;
-moz-text-shadow: none;
-ms-text-shadow: none;
-o-text-shadow: none;
text-shadow: none;
vertical-align: middle;
width: 19px
}
.ie7 .button .icon, .ie7 .button .arrow {
display: inline
}
.button .arrow {
background: #ddd url(https://grampixel.jp/img/button-arrows.png) no-repeat 0 0
}
.button .icon.left, .button .arrow.left {
margin-left: 0;
margin-right: 3px
}
.button .arrow.left {
background-position: 0 -19px
}
.button:hover .arrow {
background-color: #000
}
.dropcap {
background: #eaeaea;
color: #777;
display: inline-block;
float: left;
display: inline;
font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size: 23px;
font-weight: 600;
height: 36px;
line-height: 36px;
margin: 0 7px 0 0;
text-align: center;
width: 36px
}
.dropcap.dark {
background: #3a3a3a;
color: #fff
}
.infobox {
background: #fbfbfb;
border: 1px solid #efefef;
margin: 0 0 20px;
padding: 25px
}
.single-image, .image-gallery, .iframe {
cursor: pointer;
display: block;
margin-bottom: 5px;
overflow: hidden;
position: relative
}
.single-image.none, .image-gallery.none, .iframe.none, .single-image.none img, .image-gallery.none img, .iframe.none img {
display: inline;
margin-bottom: 0;
overflow: visible
}
.single-image.align-left, .image-gallery.align-left, .iframe.align-left {
margin-bottom: 15px;
margin-right: 15px
}
.single-image.align-right, .image-gallery.align-right, .iframe.align-right {
margin-bottom: 15px;
margin-left: 15px
}
.single-image img, .image-gallery img, .iframe img {
margin-bottom: -5px
}
.single-image .zoom, .image-gallery .zoom, .iframe .zoom {
background: #fff;
background: rgba(255,255,255,0.4);
color: transparent;
display: block;
font: 0/0 a;
height: 100%;
left: 0;
filter: alpha(opacity=0);
-webkit-opacity: 0;
-moz-opacity: 0;
-ms-opacity: 0;
-o-opacity: 0;
opacity: 0;
-webkit-text-shadow: none;
-moz-text-shadow: none;
-ms-text-shadow: none;
-o-text-shadow: none;
text-shadow: none;
top: 0;
-webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-ms-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
width: 100%
}
.zoom, .image-gallery .zoom, .iframe .zoom {
position: absolute
}
* html .zoom {
position: relative
}
.single-image .zoom:before, .image-gallery .zoom:before, .iframe .zoom:before {
background: url(https://grampixel.jp/img/zoom.png) no-repeat;
content: '';
display: block;
position: absolute;
height: 58px;
margin: -29px 0 0 -29px;
left: 50%;
top: 50%;
width: 58px
}
.single-image.video .zoom:before, .image-gallery.video .zoom:before, .iframe.video .zoom:before {
background-image: url(https://grampixel.jp/img/zoom-video.png)
}
.single-image.link .zoom:before, .image-gallery.link .zoom:before, .iframe.link .zoom:before {
background-image: url(https://grampixel.jp/img/zoom-link.png)
}
.single-image:hover .zoom, .image-gallery:hover .zoom, .iframe:hover .zoom {
filter: alpha(opacity=40);
-webkit-opacity: 1;
-moz-opacity: 1;
-ms-opacity: 1;
-o-opacity: 1;
opacity: 1
}
.hidden {
display: none
}
.disabled {
cursor: auto
}
.screenreader {
clip: rect(1px 1px 1px 1px);
clip: rect(1px,1px,1px,1px);
position: absolute
}
.align-center {
margin-left: auto;
margin-right: auto;
text-align: center
}
.align-left {
float: left;
display: inline
}
img.align-left {
margin-bottom: 15px;
margin-right: 15px
}
.align-right {
float: right;
display: inline
}
* html .single-project .page-header .right {
float: right;
display: inline;
padding-right: 100px;
padding-top: 10px
}
img.align-right {
margin-bottom: 15px;
margin-left: 15px
}
ul.none {
list-style: none;
margin: 0
}
ul.dotted+ul.dotted:before {
content: '';
display: block;
clear: both;
border-bottom: 1px dotted #bdbdbd;
margin: -15px 0 5px
}
.arrow li, .arrow-2 li, .circle li, .check li, .check-2 li, .star li, .plus li, .dash li {
list-style: none;
margin: 0;
padding: 0 0 0 24px
}
.arrow li {
}
.arrow-2 li {
}
.circle li {
}
.check li {
background: url(https://grampixel.jp/img/list-check.png) no-repeat 3px 4px
}
.check-2 li {
background: url(https://grampixel.jp/img/list-check-2.png) no-repeat 0 4px
}
.star li {
}
.plus li {
}
.dash li {
}
.error, .success, .info, .notice {
display: block;
padding: 10px 20px 10px 44px
}
.error {
border: 1px solid #f7c7c9;
border-left-width: 4px;
color: #b3696c
}
.success {
border: 1px solid #c2d288;
border-left-width: 4px;
color: #8fa442
}
.info {
border: 1px solid #9ac9df;
border-left-width: 4px;
color: #528da9
}
.notice {
border: 1px solid #f5dc7d;
border-left-width: 4px;
color: #c4a21b
}
label {
cursor: pointer;
display: block;
font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
margin: 0 0 5px
}
.inputarea {
-webkit-appearance: none;
background-color: #f8f8f8;
border: 1px solid #e8e8e8;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
color: #8f8f8f;
font: 12px/1.5 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
padding: 5px 10px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
height: 30px;
width: 200px
}
.inputtextarea {
-webkit-appearance: none;
background-color: #f8f8f8;
border: 1px solid #e8e8e8;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
color: #8f8f8f;
font: 12px/1.5 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
padding: 5px 10px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
-webkit-resize: both;
-moz-resize: both;
-ms-resize: both;
-o-resize: both;
resize: both;
width: 100%;
}
input:hover, textarea:hover, select:hover {
border-color: #5F5F5F;
}
input:focus, textarea:focus, select:focus {
border-color: #5F5F5F;
}
input[type="submit"], input[type="reset"],input[type="button"],button {
font-size: 13px;
text-transform: uppercase
}
input[type="submit"]:hover, input[type="reset"]:hover,input[type="button"]:hover{
background: #000;
color: #fff;
}
input[type="submit"].medium, input[type="reset"].medium, button.medium {
font-size: 15px
}
input[type="submit"].large, input[type="reset"].large, button.large {
font-size: 17px
}
select, option {
cursor: pointer;
padding: 5px 7px
}
input[type="checkbox"], input[type="radio"], .contact-form input[type="checkbox"], .contact-form input[type="radio"] {
width: 20px
}
input[type="checkbox"] {
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
-ms-appearance: checkbox;
-o-appearance: checkbox;
appearance: checkbox
}
input[type="radio"] {
-webkit-appearance: radio;
-moz-appearance: radio;
-ms-appearance: radio;
-o-appearance: radio;
appearance: radio
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color:#b0b0b0
}
input:-moz-placeholder, textarea:-moz-placeholder {
color:#b0b0b0
}
input.placeholder, textarea.placeholder {
color: #b0b0b0
}
.container {
margin: 0 auto;
position: relative;
width: 940px
}
.one-half, .one-third, .two-third, .one-fourth, .three-fourth {
float: left;
display: inline;
margin-right: 20px
}
.one-half.last, .one-third.last, .two-third.last, .one-fourth.last, .three-fourth.last {
margin-right: 0
}
.one-half {
width: 460px
}
.one-third {
width: 300px
}
.two-third {
width: 620px
}
.one-fourth {
width: 220px
}
.three-fourth {
width: 700px
}
.second {
clear: both;
}
.one-third h4 {
color: #000;
}
.news,.news a ,.news a:hover{
color: #02c2ff;
}
#news{
text-align:right;
}
#header {
border-bottom: 1px solid #000;
height: 86px;
z-index: 97;
}
#logo {
float: left;
display: inline;
height: 86px
}
#logo span {
width: 139px;
height: 86px;
text-indent: -5000px;
display: block;
background: url(https://grampixel.jp/img/logo.png) no-repeat 0 0;
}
p.menu-open{
margin-top:-18px;
}
p.menu-open img{
display:none;
}
p.bt-close{
display:none;
}
div.global{
display:none;
}
#main-nav {
float: right;
display: inline
}
#main-nav>ul {
margin: -6px 0 0
}
#main-nav li {
list-style: none;
float: left;
display: inline;
margin: 0;
position: relative
}
#main-nav a {
border-bottom: 1px solid transparent;
border-top: 6px solid transparent;
color: #616161;
font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size: 12px;
font-weight: 400;
display: block;
letter-spacing: -0.08px;
padding: 26px 20px 40px;
position: relative;
text-align: center;
text-transform: uppercase;
z-index: 98
}
.ie7 #main-nav a {
padding: 33px 20px
}
#main-nav a:after {
content: attr(data-description);
font-size: 10px;
font-weight: 400;
display: block;
line-height: 0;
margin: 3px 0 -3px;
text-align: center;
text-transform: lowercase
}
#main-nav a:hover, #main-nav .hover>a, #main-nav .current>a {
border-bottom-color: #000;
border-top-color: #000;
color: #B9B6B6;
}
#main-nav a:hover, #main-nav .hover>a, #main-nav .current>a {
background: #000;
}
.not-ie #main-nav .current:after {
background: #000;
bottom: -2.5px;
content: '';
left: 50%;
display: block;
height: 5px;
margin: 0 0 0 -2.5px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
width: 5px
}
.no-js #main-nav li:hover>ul {
display: block;
top: 92px
}
#main-nav ul ul {
background: #fff;
-webkit-box-shadow: 2.5px 2.5px 5px rgba(0,0,0,.2);
-moz-box-shadow: 2.5px 2.5px 5px rgba(0,0,0,.2);
-ms-box-shadow: 2.5px 2.5px 5px rgba(0,0,0,.2);
-o-box-shadow: 2.5px 2.5px 5px rgba(0,0,0,.2);
box-shadow: 2.5px 2.5px 5px rgba(0,0,0,.2);
display: none;
left: 0;
padding: 0;
position: absolute;
top: 92px;
width: 200px;
z-index: 99;
}
#main-nav ul ul li {
float: none;
display: inline
}
#main-nav ul ul a {
border: 0;
border-bottom: 1px solid #F0F0F0;
border-top: 1px solid #4c4c4c;
color: #000;
display: block;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size: 11px;
letter-spacing: 0;
font-weight: 400;
padding: 8px 20px !important;
text-align: left;
text-transform: none
}
#main-nav ul ul a:hover, #main-nav ul ul .hover>a, #main-nav ul ul .current>a, #main-nav ul ul .current>a:hover {
background: #000;
color: #fff;
}
.not-ie #main-nav ul ul .current:after {
display: none
}
#main-nav ul ul ul {
left: 200px !important;
top: 0 !important
}
#main-nav .responsive-nav {
background-color: #fff;
background-position: center right;
background-repeat: no-repeat;
display: none;
width: 100%
}
#content {
padding-top: 40px
}
.ie7 #content {
padding-top: 25px
}
.page-header {
border-bottom: 1px solid #000;
margin: -15px 0 40px
}
.ie7 .page-header {
margin-top: 0
}
.slogan, .page-title, .page-description, .page-subdescription, .project-title {
font-weight: 300;
letter-spacing: -0.1px;
margin-bottom: 0;
overflow: hidden
}
.page-title, .page-description, .page-subdescription, .project-title {
font-size: 18px;
margin-top: -10px;
padding: 0 0 35px
}
.slogan {
font-size: 24px;
margin-bottom: 40px
}
.page-title {
margin-top: 0
}
.page-subdescription {
font-size: 20px
}
.project-title {
margin-top: -15px;
padding-bottom: 30px
}
.page-description {
font-size: 24px;
font-weight: 400;
padding: 0 0 40px
}
.page-title ~ hr, .page-description ~ hr, .page-subdescription ~ hr, .project-title ~ hr {
margin-bottom: 40px;
margin-top: 0
}
.section-title {
font-weight: 800;
text-transform: uppercase
}
#main {
float: left;
display: inline;
width: 680px;
border-bottom:1px dotted #ced8df;
}
.sidebar-left #main {
float: right;
display: inline;
margin-right: 0
}
#main .one-half {
width: 330px
}
#main .one-third {
width: 213px
}
#main .two-third {
width: 447px
}
#main .one-fourth {
width: 155px
}
#main .three-fourth {
width: 505px
}
.image-gallery-slider {
position: relative;
margin: 0 0 25px;
width: 100%
}
.image-gallery-slider>ul {
margin: 0
}
.image-gallery-slider>ul>li {
background: #fff;
display: none;
list-style: none;
margin: 0
}
.no-js .image-gallery-slider>ul>li, .image-gallery-slider.disabled>ul>li {
display: block;
margin-bottom: 25px
}
.image-gallery-slider>ul>li:first-child {
display: block
}
.image-gallery-slider a {
margin: 0 auto
}
.image-gallery-slider img, .image-gallery-slider img.entry-image {
display: block;
margin: 0 auto;
max-width: 100%
}
.image-gallery-slider-nav a {
background: #3a3a3a url(https://grampixel.jp/img/slider-arrows-medium.png) no-repeat 0 0;
filter: alpha(opacity=60);
background: rgba(255,255,255,0.6) url(https://grampixel.jp/img/slider-arrows-medium.png) no-repeat 0 0;
color: transparent;
cursor: pointer;
display: block;
font: 0/0 a;
height: 53px;
margin: -26.5px 0 0;
position: absolute;
-webkit-text-shadow: none;
-moz-text-shadow: none;
-ms-text-shadow: none;
-o-text-shadow: none;
text-shadow: none;
top: 50%;
width: 25px;
z-index: 90
}
.image-gallery-slider-nav a.prev {
background-position: -7px center;
left: 0
}
.image-gallery-slider-nav a.next {
background-position: -46px center;
right: 0
}
.image-gallery-slider-nav a:hover, .image-gallery-slider-nav a:active {
background-color: #000;
background-color: rgba(0,0,0,1);
filter: alpha(opacity=100);
background-image:url(https://grampixel.jp/img/slider-arrows-medium_on.png);
background-repeat:no-repeat;
}
.acc-trigger {
border-top: 1px dotted #ced8df;
cursor: pointer;
display: block;
margin: 0
}
.acc-trigger:last-of-type, .acc-container:last-of-type {
border-bottom: 1px dotted #ced8df;
margin-bottom: 20px
}
.no-js .acc-trigger:last-of-type {
border-bottom: 0
}
.acc-trigger a {
background: url(https://grampixel.jp/img/accordion-content-buttons.png) no-repeat 20px 23px;
display: block;
color: #000;
outline: medium none;
padding: 25px 20px 25px 55px;
text-decoration: none;
-webkit-text-shadow: none;
-moz-text-shadow: none;
-ms-text-shadow: none;
-o-text-shadow: none;
text-shadow: none
}
* html .acc-trigger a {
background: 0;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://grampixel.jp/img/accordion-content-buttons.png', sizingMethod='scale')
}
h3.acc-trigger a, h4.acc-trigger a {
background-position: 20px 24px
}
h6.acc-trigger a {
background-position: 20px 21px
}
.acc-trigger a:hover {
background-color: #ccc;
color:#000 !important;
}
.acc-trigger a:hover, .acc-trigger.active a, .acc-trigger.active a:hover {
color: #000;
}
.acc-trigger.active a:hover {
background-color: transparent
}
.acc-trigger.active {
cursor: default
}
.acc-trigger.active:last-of-type {
border-bottom: 0;
margin-bottom: 0
}
.acc-trigger.active a {
background-position: 20px -88px;
cursor: default
}
h3.acc-trigger.active a, h4.acc-trigger.active a {
background-position: 20px -87px
}
h6.acc-trigger.active a {
background-position: 20px -90px
}
.acc-container .content {
padding: 0 20px 25px 55px;
}
.js .acc-container {
margin: -5px 0 0
}
.tabs-nav {
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
width: 100%
}
.tabs-nav li {
float: left;
display: inline;
line-height: 32px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative
}
.tabs-nav li.active {
line-height: 31px
}
.tabs-nav li a {
background: #f8f8f8;
border: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
border-left: 0;
color: #959393;
display: block;
letter-spacing: 0;
outline: 0;
padding: 0 16px;
text-decoration: none;
-webkit-text-shadow: 0 1px 0 #fff;
-moz-text-shadow: 0 1px 0 #fff;
-ms-text-shadow: 0 1px 0 #fff;
-o-text-shadow: 0 1px 0 #fff;
text-shadow: 0 1px 0 #fff
}
.tabs-nav li:first-child a {
border-left: 1px solid #eaeaea
}
.tabs-nav li a:hover {
background: #f0f0f0
}
.tabs-nav li a:hover, .tabs-nav li.active a {
color: #000
}
.tabs-nav li.active a {
background: #fff;
border-bottom: 2px solid #fff;
border-top: 1px solid #000
}
.tabs-container {
border: 1px solid #eaeaea;
margin: -1px 0 20px;
overflow: hidden;
width: 100%
}
.tab-content {
padding: 20px
}
.simple-pricing-table, .extended-pricing-table {
height: 100%;
margin: 0 0 40px;
position: relative;
text-align: center;
width: 100%
}
.simple-pricing-table .column, .extended-pricing-table .column {
float: left;
display: inline;
margin: 0;
padding: 0;
position: relative
}
.simple-pricing-table .features, .extended-pricing-table .features {
list-style: none;
margin: 0
}
.post-format.audio {
background-position: -99px 0
}
.post-format.link {
background-position: -132px 0
}
.post-format.quote {
background-position: -165px 0
}
.post-format.aside {
background-position: -199px 0
}
a:hover>.post-format {
background-color: #000;
color: #000
}
.video-js {
max-width: 100%
}
#comments .section-title, #respond .section-title {
font-weight: 600;
margin-bottom: 15px
}
.comments-list {
border-bottom: 1px dotted #ced8df;
margin: 27px 0 45px;
padding: 0 0 30px;
overflow: hidden
}
.comment {
border-top: 1px dotted #ced8df;
list-style: none;
margin: 30px 0 0;
padding: 35px 0 0
}
.comment:first-child {
border-top: 0;
margin-top: 0;
padding-top: 0
}
.comment>article {
margin: 0;
overflow: hidden
}
.comment .avatar {
background: #fff;
float: left;
display: inline;
margin: 0 0 5px 0;
position: relative;
width: 54px;
z-index: 1
}
.comment .comment-body, .comment .comment-meta {
float: right;
display: inline;
margin: 0 0 -20px 15px;
width: 611px
}
.comment .comment-meta {
margin-bottom: 0
}
.comment .author, .comment .author a {
color: #54555a;
margin: 0
}
.comment .author .comment-reply-link {
font-size: 11px
}
.comment .date, .comment .date a {
color: #adb3b8;
font-style: italic;
margin: 1px 0 5px
}
.comment .author a:hover, .comment .date a:hover {
color: #000
}
.comment .children {
margin: 0;
padding: 30px 0 0 70px;
position: relative
}
.comment .children .comment {
border-top: 1px dotted #ced8df;
margin: 30px 0 0;
padding: 35px 0 0;
position: relative
}
.comment .children .comment:first-child {
margin-top: 0
}
.comment .children .comment-body, .comment .children .comment-meta {
width: 541px
}
.comments-form {
margin: 20px -20px 0 0
}
.comments-form input {
width: 191px
}
.comments-form textarea {
height: 150px;
width: 657px
}
.pagination {
margin: 0
}
.pagination li {
display: inline-block;
list-style: none;
margin: 0 5px 0 0
}
.ie7 .pagination li, .ie7 .pagination a {
display: inline
}
.pagination li:last-child {
margin-right: 0
}
.pagination .current {
background: #e6edef;
color: #707070
}
.pagination a, .pagination .current {
border: 1px solid transparent;
color: #9c9c9c;
display: inline-block;
padding: 2px 8px 4px
}
.pagination a:hover {
border-color: #e6edef;
color: #000
}
.pagination .next a, .pagination .prev a {
border: 0
}
#portfolio-items-filter {
float: right;
display: inline;
margin: -65px 0 0;
overflow: hidden
}
.no-js #portfolio-items-filter {
display: none
}
#portfolio-items-filter li {
display: block;
float: left;
display: inline;
list-style: none;
margin: 0
}
#portfolio-items-filter li:first-child {
margin-top: 5px;
margin-right: 5px
}
.ie7 #portfolio-items-filter li:first-child {
display: none !important
}
#portfolio-items-filter a {
background: #fff;
color: #575656;
cursor: pointer;
display: block;
margin: 0 0 5px 5px;
padding: 5px 10px
}
.ie7 #portfolio-items-filter a {
display: block !important;
margin: 0 0 5px 5px !important;
padding: 5px 10px !important;
width: auto !important
}
#portfolio-items-filter a:hover {
background: #000;
color:#fff;
}
#portfolio-items {
margin: 0 -20px 40px 0
}
#portfolio-items article {
margin-bottom: 50px
}
#portfolio-items .project-meta {
display: block;
margin: 0;
padding: 20px 0 0
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1
}
.isotope, .isotope .isotope-item {
-webkit-transition-duration: .6s;
-moz-transition-duration: .6s;
-ms-transition-duration: .6s;
-o-transition-duration: .6s;
transition-duration: .6s;
z-index: 2
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width
}
.isotope .isotope-item {
-webkit-transition-property: transform, opacity;
-moz-transition-property: transform, opacity;
-ms-transition-property: top, left, opacity;
-o-transition-property: top, left, opacity;
transition-property: transform, opacity
}
.project-title {
color: #3a3a3a;
font-size: 32px;
font-weight: 400
}
.portfolio-pagination {
float: right;
display: inline;
margin: -58px 0 0
}
.portfolio-pagination li {
display: inline-block;
list-style: none;
line-height: 25px;
margin: 0
}
.ie7 .portfolio-pagination li {
display: inline
}
.portfolio-pagination .prev {
border-right: 1px solid #e8e8e8;
margin: 0 10px 0 0;
padding: 0 10px 0 0
}
.single-project .page-header .button {
color: #3a3a3a;
margin-top: -5px
}
.single-project .page-header a:hover {
color: #000
}
.single-project .image-gallery-slider ul {
-webkit-box-shadow: 0 0 15px rgba(0,0,0,.15);
-moz-box-shadow: 0 0 15px rgba(0,0,0,.15);
-ms-box-shadow: 0 0 15px rgba(0,0,0,.15);
-o-box-shadow: 0 0 15px rgba(0,0,0,.15);
box-shadow: 0 0 15px rgba(0,0,0,.15)
}
.contact-form, .comments-form {
max-width: 100%
}
.contact-form {
margin: 0 -20px 0 0
}
.contact-form .input-block, .comments-form .input-block {
float: left;
display: inline;
margin: 0 20px 20px 0
}
.contact-form .input-block:nth-of-type(3n), .comments-form .input-block:nth-of-type(3n) {
margin-right: 0
}
.contact-form input {
width: 198px
}
.contact-form .textarea-block, .comments-form .textarea-block {
clear: both
}
.contact-form textarea {
height: 150px;
max-width: 100%;
width: 678px
}
.contact-form input[type="submit"], .comments-form input[type="submit"], .contact-form input[type="reset"], .comments-form input[type="reset"] {
margin: 0 0 20px;
width: auto
}
#sidebar {
float: right;
display: inline;
width: 220px
}
.sidebar-left #sidebar {
float: left;
display: inline
}
#sidebar .widget {
margin: 0 0 10px;
width: 250px
}
#sidebar .widget-title {
color: #909090;
font-weight: 600;
text-transform: uppercase;
margin: 45px 10px 12px
}
.categories li {
background: url(https://grampixel.jp/img/arrow-right-grey.png) no-repeat 0 11px;
border-bottom: 1px dotted #ced8df;
list-style: none;
margin: 0
}
.categories li:last-child {
border-bottom: 0
}
.categories a {
color: #868686;
display: block;
padding: 5px 0 5px 15px
}
#sidebar .acc-trigger a {
background-position: 0 8px;
font-size: 11px;
font-weight: 400;
padding: 12px 12px 12px 30px
}
#sidebar .acc-trigger:first-of-type {
border-top: 0
}
#sidebar .acc-trigger:last-of-type {
border-bottom: 0
}
#sidebar .acc-trigger.active a {
background-position: 0 -103px;
cursor: default
}
#sidebar .acc-container {
margin: -5px 0 0
}
#sidebar .acc-container:first-of-type {
border-top: 0
}
#sidebar .acc-container:last-of-type {
border-bottom: 0
}
#sidebar .acc-container .content {
padding: 0 12px 12px 30px
}
.sidebar .acc-trigger a {
background-position: 0 8px;
font-size: 11px;
font-weight: 400;
padding: 12px 12px 12px 30px
}
.sidebar .acc-trigger.active a {
background-position: 0 -103px;
cursor: default
}
.sidebar .acc-container {
margin: -5px 0 0
}
.sidebar .acc-container:first-of-type {
border-top: 0
}
.sidebar .acc-container .content {
padding: 0 12px 12px 30px
}
.tweets-feed {
margin: 0
}
.tweets-feed li {
display: block;
list-style: none;
margin: 0;
padding: 0
}
#sidebar .tweets-feed li a, #footer .tweets-feed li a {
color: #000
}
#sidebar .tweets-feed li a:hover, #sidebar .tweets-feed .date a:hover {
color: #3a3a3a
}
.tweets-feed .date {
display: block
}
#sidebar .tweets-feed li .date a, #footer .tweets-feed li .date a {
color: #bbb;
font-size: 10px;
font-style: italic
}
#sidebar .tweets-feed li a:hover {
color: #000
}
#footer .tweets-feed li a:hover {
color: #fff
}
.flickr-feed li {
margin: 15px -5px 0 0
}
.flickr-feed li img {
margin: 0;
height: 70px;
width: 70px
}
a, a>* {
color: #3a3a3a;
text-decoration: none;
transition: background-color .2s ease 0, border .2s ease 0, color .2s ease 0, opacity .2s ease-in-out 0
}
p.privacy {
margin-left: 12px;
}
p.privacy strong {
margin-left: 30px;
}
#footer {
background: #3a3a3a;
color: #868686;
margin-top: 80px;
padding: 35px 0 30px;
position: relative
}
.not-ie #footer:before {
background: #3a3a3a;
content: '';
left: 50%;
display: block;
height: 15px;
margin: 0 0 0 -7.5px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: -8px;
width: 15px
}
x:-o-prefocus, .not-ie #footer:before {
display:none
}
#footer, #footer a, #footer-bottom, #footer-bottom a {
color: #868686;
clear:both;
}
#footer a:hover, #footer-bottom a:hover {
color: #000
}
#footer .title {
border-bottom: 1px solid #4b4b4b;
display: block;
font-size: 10px;
margin: 0 0 12px;
padding: 0 0 12px;
text-transform: uppercase
}
#footer-nav {
border-bottom: 1px solid #4b4b4b;
margin: 0 0 12px;
padding: 0 0 12px
}
#footer-nav ul {
width:105%;
margin: 0;
}
#footer-nav li {
background: 0;
border: 0;
float: left;
display: inline;
list-style: none;
margin: 0 -3px 0 0
}
.ie7 #footer-nav li {
display: inline
}
#footer-nav li a {
border-left: 1px solid #484848;
font-size: 10px;
display: block;
padding: 0 15px;
text-transform: uppercase
}
#footer-nav li:first-child a {
border-left: 0;
padding-left: 0
}
#footer-nav li:last-child a {
padding-right: 0
}
.contact-info {
margin: 0
}
.contact-info li {
float: left;
display: inline;
list-style: none;
margin: 0 0 5px 24px;
padding: 0 0 0 24px
}
.contact-info li:first-child {
margin-left: 0
}
.contact-info .address {
background: url(https://grampixel.jp/img/icon-address.png) no-repeat 0 0
}
.contact-info .phone {
background: url(https://grampixel.jp/img/icon-phone.png) no-repeat 0 1px
}
.contact-info .email {
background: url(https://grampixel.jp/img/icon-email-2.png) no-repeat 0 4px
}
.social-links {
margin: 0
}
.social-links li {
float: left;
display: inline;
list-style: none;
margin: 0 0 10px 15px;
text-indent: -9999px
}
.ie7 .social-links li {
display: inline;
font-size: 0;
text-indent: 0
}
.social-links li:nth-child(6n+1) {
margin-left: 0
}
.social-links li:nth-child(6n) {
margin-right: 15px
}
.social-links li:last-child {
margin-right: 0
}
.social-links a {
background-repeat: no-repeat;
background-position: 0 -16px;
display: block;
height: 16px;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
width: 20px
}
.social-links li.behance a {
}
.social-links li.delicious a {
background-position: 0 -14px;
height: 14px
}
.social-links li.deviantart a {
background-image: url(https://grampixel.jp/img/icon-deviantart.png)
}
.social-links li.digg a {
background-image: url(https://grampixel.jp/img/icon-digg.png);
background-position: 0 -14px;
height: 14px
}
.social-links li.dribbble a {
}
.social-links li.dropbox a {
background-position: 0 -15px;
height: 15px
}
.social-links li.email a {
}
.social-links li.facebook a {
background-image: url(https://grampixel.jp/img/icon-facebook.png)
}
.social-links li.flickr a {
}
.social-links li.forrst a {
}
.social-links li.github a {
}
.social-links li.google a {
}
.social-links li.googleplus a {
}
.social-links li.ichat a {
background-position: 0 -15px;
height: 15px
}
.social-links li.lastfm a {
background-position: 0 -15px;
height: 15px
}
.social-links li.linkedin a {
}
.social-links li.mobypicture a {
background-image: url(https://grampixel.jp/img/icon-mobypicture.png)
}
.social-links li.myspace a {
}
.social-links li.picasa a {
}
.social-links li.plixi a {
background-image: url(https://grampixel.jp/img/icon-plixi.png)
}
.social-links li.rss a {
background-image: url(https://grampixel.jp/img/icon-rss.png)
}
.social-links li.skype a {
background-image: url(https://grampixel.jp/img/icon-skype.png)
}
.social-links li.stumbleupon a {
background-image: url(https://grampixel.jp/img/icon-stumbleupon.png);
background-position: 0 -17px;
height: 17px
}
.social-links li.tumblr a {
background-image: url(https://grampixel.jp/img/icon-tumblr.png);
background-position: 0 -15px;
height: 15px
}
.social-links li.twitter a {
background-image: url(https://grampixel.jp/img/icon-twitter.png);
background-position: 0 -15px;
height: 15px;
width: 21px
}
.social-links li.deviantart a {
background-image: url(https://grampixel.jp/img/icon-deviantart.png);
background-position: 0 -15px;
height: 15px
}
.social-links li.vimeo a {
background-image: url(https://grampixel.jp/img/icon-vimeo.png);
background-position: 0 -15px;
height: 15px
}
.social-links li.youtube a {
background-image: url(https://grampixel.jp/img/icon-youtube.png);
background-position: 0 -15px;
height: 15px
}
.social-links li a:hover {
background-position: 0 0
}
#footer .button:hover, #footer input[type="submit"]:hover #footer input[type="reset"]:hover, #footer button:hover {
background: #ddd;
color: #3a3a3a
}
#footer .button.no-bg {
color: #ddd
}
#footer .button .arrow {
background-color: #3a3a3a
}
#footer blockquote {
background-color: #464646
}
#footer blockquote.simple {
background: 0;
border-left-color: #484848;
color: #868686
}
#footer .infobox {
background: #464646;
border-color: #363636
}
#footer .infobox, #footer .infobox * {
color: #868686
}
#footer-bottom {
background: #303030;
line-height: 17px;
padding: 12px 0
}
#footer-bottom ul {
margin: 0
}
#footer-bottom li {
float: left;
display: inline;
list-style: none;
margin: 0
}
#footer-bottom li:first-child {
margin-right: 15px
}
#footer-bottom li a {
border-left: 1px solid #484848;
display: block;
padding: 0 15px
}
#footer-bottom li:first-child a {
border-left: 0;
padding-left: 0
}
#footer-bottom li:last-child a {
padding-right: 0
}
.projects-carousel-pack,.projects-carousel-pack li.hp-pack{
width:100% !important;
}
#back-to-top, .touch-device #back-to-top:hover {
background: url(../img/arrow-up-large.png) no-repeat center center;
background-color: #3a3a3a;
background-color: #3a3a3a;
bottom: 20px;
color: transparent;
display: none;
font: 0/0 a;
height: 45px;
position: fixed;
right: 20px;
-webkit-text-shadow: none;
-moz-text-shadow: none;
-ms-text-shadow: none;
-o-text-shadow: none;
text-shadow: none;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
width: 45px;
z-index: 100
}
#back-to-top:hover, .touch-device #back-to-top:active {
background-color: #000
}
p.attention{padding-top:20px; margin-bottom:0;}
@media only screen and (min-width:960px) {
.simple-pricing-table .features li[data-tooltip], .extended-pricing-table .features li[data-tooltip] {
cursor: help
}
.ie7 .simple-pricing-table .features li[data-tooltip], .ie7 .extended-pricing-table .features li[data-tooltip] {
cursor: auto
}
.simple-pricing-table .features li[data-tooltip]:hover, .extended-pricing-table .features li[data-tooltip]:hover {
color: #54555a
}
.simple-pricing-table .features li[data-tooltip]:before, .extended-pricing-table .features li[data-tooltip]:before {
background: #fff8de;
border: 1px solid #fee5a2;
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.10);
-moz-box-shadow: 0 0 10px rgba(0,0,0,.10);
-ms-box-shadow: 0 0 10px rgba(0,0,0,.10);
-o-box-shadow: 0 0 10px rgba(0,0,0,.10);
box-shadow: 0 0 10px rgba(0,0,0,.10);
bottom: 0;
color: #7b7b7b;
content: attr(data-tooltip) !important;
font-size: 11px;
left: 9px;
line-height: 1.5;
-webkit-opacity: 0;
-moz-opacity: 0;
-ms-opacity: 0;
-o-opacity: 0;
opacity: 0;
padding: 5px 10px;
position: absolute;
text-align: center;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
width: 143px;
z-index: 98
}
.simple-pricing-table .features li[data-tooltip]:before {
left: 10px;
width: 192px
}
.extended-pricing-table .features-list .features li[data-tooltip]:before {
left: 10px;
text-align: left;
width: 158px
}
.simple-pricing-table .features li[data-tooltip]:hover:before, .extended-pricing-table .features li[data-tooltip]:hover:before {
bottom: 100%;
-webkit-opacity: 1;
-moz-opacity: 1;
-ms-opacity: 1;
-o-opacity: 1;
opacity: 1
}
.not-ie .simple-pricing-table .features li[data-tooltip]:after, .not-ie .extended-pricing-table .features li[data-tooltip]:after {
background: #fff8de;
border-bottom: 1px solid #fee5a2;
border-right: 1px solid #fee5a2;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.05);
-ms-box-shadow: 1px 1px 2px rgba(0,0,0,.05);
-o-box-shadow: 1px 1px 2px rgba(0,0,0,.05);
box-shadow: 1px 1px 2px rgba(0,0,0,.05);
bottom: 0;
content: '';
display: block;
height: 10px;
left: 50%;
margin: 0 0 0 -5px;
-webkit-opacity: 0;
-moz-opacity: 0;
-ms-opacity: 0;
-o-opacity: 0;
opacity: 0;
position: absolute;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
width: 10px;
z-index: 99
}
.simple-pricing-table .features-list .features li[data-tooltip]:after, .extended-pricing-table .features-list .features li[data-tooltip]:after {
left: 22px;
margin-left: 0
}
.not-ie .simple-pricing-table .features li[data-tooltip]:hover:after, .not-ie .extended-pricing-table .features li[data-tooltip]:hover:after {
bottom: 30px;
-webkit-opacity: 1;
-moz-opacity: 1;
-ms-opacity: 1;
-o-opacity: 1;
opacity: 1
}
.simple-pricing-table .features li[data-tooltip]:hover:after {
bottom: 24px !important
}
.ie8 .simple-pricing-table .features li[data-tooltip]:before, .ie8 .simple-pricing-table .features li[data-tooltip]:after, .ie8 .extended-pricing-table .features li[data-tooltip]:before, .ie8 .extended-pricing-table .features li[data-tooltip]:after {
display: none
}
.ie8 .simple-pricing-table .features li[data-tooltip]:hover:before, .ie8 .extended-pricing-table .features li[data-tooltip]:hover:before {
display: block
}
.ss-slider .slides-container {
display: block
}
.ss-slider .slide-images-container {
display: none
}
.other-services .jcarousel-prev,.other-services-pack .jcarousel-prev{
visibility:hidden;
}
.other-services .jcarousel-next,.other-services-pack .jcarousel-next{
visibility:hidden;
}
}
@media only screen and (max-width:959px) {
.ss-slider .slides-container {
display: none
}
.ss-slider .slide-images-container {
display: block
}
.ss-slider .slide-bg-image {
display: none
}
.ss-slider .slide-bg-image:first-child, .no-js.ss-slider .slide-bg-image {
display: block
}
.no-js .ss-slider .slide-button {
width: 100% !important
}
.ss-slider .slide-button {
width: 50% !important
}
.ss-slider.fully-loaded .slide-button.active {
border-top-color: #000
}
.ss-slider .content-container.center, .ss-slider .pagination-container.center a {
top: 95px
}
.ss-slider .active-slide-bar {
display: none
}
#logo {
max-height: 100%
}
#content img {
height: auto;
max-width: 100%
}
.simple-pricing-table .column {
margin-bottom: 20px !important
}
.extended-pricing-table .features li:before {
color: #7b7b7b;
content: attr(data-feature) ':' !important;
display: block;
font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-weight: 700;
text-align: center
}
.extended-pricing-table .features-list {
display: none
}
#portfolio-items-filter {
float: none;
margin: 0 0 20px
}
#portfolio-items-filter li:first-child {
display: none !important
}
#portfolio-items-filter a {
display: block !important
}
.portfolio-pagination {
float: none;
margin-bottom: 20px;
margin-top: 0
}
.portfolio-pagination .button {
margin-bottom: 0 !important
}
.single-project .page-header .button {
margin-bottom: 20px;
margin-top: 0
}
.contact-info li {
border-bottom: 1px dotted #4b4b4b;
float: none;
margin-left: 0;
padding-bottom: 5px
}
.contact-info li:last-child {
border-bottom: 0;
float: none
}
.social-links li:nth-child(6n+1) {
margin-left: 15px
}
.social-links li:nth-child(6n) {
margin-right: 0
}
}
@media only screen and (min-width:768px) and (max-width:959px) {
.container {
width: 748px
}
.one-half {
width: 364px
}
.one-third {
width: 236px
}
.two-third {
width: 492px
}
.one-fourth {
width: 172px
}
.three-fourth {
width: 556px
}
#main {
width: 488px
}
#main .one-half {
width: 234px
}
#main .one-third {
width: 149px
}
#main .two-third {
width: 319px
}
#main .one-fourth {
width: 107px
}
#main .three-fourth {
width: 361px
}
#header {
height: 72px;
}
#logo {
margin-top: -7px
}
#main-nav a {
padding: 26px 20px
}
#main-nav a:after {
content: '';
display: none
}
.no-js #main-nav li:hover>ul, #main-nav ul ul {
top: 78px
}
.simple-pricing-table .column {
width: 746px
}
.simple-pricing-table .column.featured {
width: 736px
}
.simple-pricing-table.col2 .column {
width: 372px
}
.simple-pricing-table.col3 .column {
width: 248px
}
.simple-pricing-table.col4 .column {
width: 185px
}
.simple-pricing-table.col5 .column {
width: 148px
}
.simple-pricing-table.col2.featured .column {
width: 354px
}
.simple-pricing-table.col3.featured .column {
width: 235px
}
.simple-pricing-table.col4.featured .column {
width: 178px
}
.simple-pricing-table.col5.featured .column {
width: 142px
}
.simple-pricing-table.col2 .column.featured {
width: 382px
}
.simple-pricing-table.col3 .column.featured {
width: 265px
}
.simple-pricing-table.col4 .column.featured {
width: 199px
}
.simple-pricing-table.col5 .column.featured {
width: 165px
}
.extended-pricing-table .column {
width: 748px
}
.extended-pricing-table.col2 .column {
width: 374px
}
.extended-pricing-table.col3 .column {
width: 249px
}
.extended-pricing-table.col4 .column {
width: 187px
}
.extended-pricing-table.col5 .column {
width: 149px
}
.projects-carousel>li, .post-carousel>li {
width: 236px
}
.post-carousel .entry-body {
width: 236px
}
.entry-body {
width: 488px
}
.comment .comment-body, .comment .comment-meta {
width: 419px
}
.comment .children .comment-body, .comment .children .comment-meta {
width: 349px
}
.comments-form input {
width: 127px
}
.comments-form textarea {
width: 468px
}
#map {
height: 340px
}
.contact-form input {
width: 150px
}
.contact-form textarea {
width: 534px
}
.social-links li:nth-child(5n+1) {
margin-left: 0
}
.social-links li:nth-child(5n) {
margin-right: 10px
}
.other-services-pack .jcarousel-prev{
visibility:hidden;
}
.other-services-pack .jcarousel-next{
visibility:hidden;
}
}
@media only screen and (max-width:767px) {
.fluid-width-video-wrapper {
margin-bottom: 10px
}
.align-left, .align-right {
float: none
}
.container {
width: 300px
}
.one-half, .one-third, .two-third, .one-fourth, .three-fourth {
float: none;
margin-right: 0
}
.one-half, #main .one-half {
width: 300px
}
.one-third, #main .one-third {
width: 300px
}
.two-third, #main .two-third {
width: 300px
}
.one-fourth, #main .one-fourth {
width: 300px
}
.three-fourth, #main .three-fourth {
width: 300px
}
#header {
height: auto
}
#logo {
display: block;
float: none;
text-align: center
}
#main-nav {
float: none;
margin: 10px 0 20px
}
#main-nav li {
width: 50%
}
#main-nav a {
border-bottom-color: #efefef;
padding: 16px 20px 30px
}
#main-nav>ul>li:last-child a {
border-bottom-color: transparent
}
#main-nav>ul>.current:last-child a {
border-bottom-color: #000
}
#main-nav ul ul {
width: 100%
}
.no-js #main-nav li:hover>ul, #main-nav ul ul {
top: 72px
}
#main-nav ul ul li {
width: auto
}
#main-nav ul ul li:first-child>a {
border-top: 0
}
#main-nav ul ul li:last-child>a {
border-bottom: 0
}
#main-nav ul ul ul {
border-bottom: 1px solid #252525;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: block !important;
left: 0 !important;
margin: 0;
top: 0 !important;
position: relative
}
#main-nav ul ul li:last-child ul {
border-top: 1px solid #252525;
border-bottom: 0
}
#main-nav ul ul ul a {
padding-left: 30px
}
#main-nav ul ul ul li:first-child a {
border-top: 1px solid #4c4c4c
}
#main {
border-bottom: 1px solid #efefef;
float: none;
margin-right: 0;
width: 100%
}
.image-gallery-slider {
margin-bottom: 10px
}
.extended-pricing-table .column {
margin-bottom: 20px
}
.extended-pricing-table .column.featured {
margin-bottom: 10px
}
.ss-slider.fully-loaded, .ss-slider.fully-loaded .slide-images-container {
}
.js .ss-slider .buttons-container {
display: none
}
.ss-slider .content-container, .ss-slider:hover .content-container {
display: none
}
.ss-slider .pagination-container a {
background-color: rgba(241,90,35,0.6);
background-image: url(https://grampixel.jp/img/slider-arrows-medium.png) !important;
bottom: 50% !important;
height: 49px !important;
margin: 0 0 -25px 0 !important;
filter: alpha(opacity=60) !important;
opacity: 1 !important;
right: auto !important;
top: auto !important;
width: 25px !important
}
.ss-slider .pagination-container .prev {
background-position: -7px center !important;
left: 0 !important;
right: auto !important
}
.ss-slider .pagination-container .next {
background-position: -46px center !important;
left: auto !important;
right: 0 !important
}
.ss-slider .pagination-container a:hover {
background-color: rgba(241,90,35,1);
filter: alpha(opacity=100)
}
.entry-image, .entry-video, .entry-audio {
margin-bottom: 10px
}
.single-image .entry-image, .image-gallery .entry-image, .iframe .entry-image {
margin-bottom: 0
}
.entry .entry-body {
float: none;
margin: 0;
width: 100%
}
.contact-form .input-block, .comments-form .input-block {
float: none;
margin: 0 0 20px 0
}
.contact-form input, .comments-form input, .contact-form textarea, .comments-form textarea {
width: 398px
}
#sidebar {
float: none;
margin-top: 40px;
width: 100%
}
.widget{
padding-top:20px;
}
.not-ie #footer .container:after {
top: -56px
}
.other-services-pack .jcarousel-prev{
visibility:hidden;
}
.other-services-pack .jcarousel-next{
visibility:hidden;
}
}
@media only screen and (min-width:480px) and (max-width:767px) {
.container {
width: 420px
}
.one-half, .one-third, .two-third, .one-fourth, .three-fourth {
float: none;
margin-right: 0
}
.one-half, #main .one-half {
width: 420px
}
.one-third, #main .one-third {
width: 420px
}
.two-third, #main .two-third {
width: 420px
}
.one-fourth, #main .one-fourth {
width: 420px
}
.three-fourth, #main .three-fourth {
width: 420px
}
.simple-pricing-table .column {
width: 418px
}
.simple-pricing-table .column.featured {
width: 408px
}
.simple-pricing-table.col2 .column {
width: 208px !important
}
.simple-pricing-table.col3 .column, .simple-pricing-table.col4 .column, .simple-pricing-table.col5 .column {
width: 204px !important
}
.extended-pricing-table .column {
width: 420px
}
.extended-pricing-table.col2 .column, .extended-pricing-table.col3 .column, .extended-pricing-table.col4 .column, .extended-pricing-table.col5 .column {
width: 210px
}
.projects-carousel>li, .post-carousel>li {
width: 200px
}
.post-carousel .entry-body {
width: 200px
}
.comment .comment-body, .comment .comment-meta {
width: 351px
}
.comment .children .comment-body, .comment .children .comment-meta {
width: 281px
}
#map {
height: 240px
}
.contact-info {
margin-bottom: 20px
}
.social-links li:nth-child(12n+1) {
margin-left: 0
}
.social-links li:nth-child(12n) {
margin-right: 15px
}
.other-services-pack .jcarousel-prev{
visibility:hidden;
}
.other-services-pack .jcarousel-next{
visibility:hidden;
}
}
@media only screen and (max-width:479px) {
#header {
border-bottom: 0
}
header p.menu-open{
float:right;
margin-top:-74px;
}
header p.menu-open a img{
height:auto;
width:auto;
display:block;
}
p.menu-open{
margin-top:18px;
}
div.global{
background:#1d1917;
color : #fff;
padding:12px;
border-top:1px solid #615e5d;
display:none;
}
div.global a{
color : #fff;
background:#444444;
display:block;
padding:8px;
text-decoration:none;
background-image: url("https://grampixel.jp/img/arrow-4.png");
background-repeat:no-repeat;
background-position:95% center;
background-size:auto 10px;
}
div.global .bt-current{
font-size:1.6em;
text-align:center;
margin:0 0 10px 0;
border:1px solid #615e5d;
}
div.global .bt-current a{
padding:10px;
}
div.global .t-area{
text-align:center;
font-family: 'Hiragino Mincho ProN', serif;
font-size:1.4em;
margin:0 0 5px 0;
}
div.global li{
border:1px solid #615e5d;
float:left;
width:48%;
font-size:1.2em;
}
div.global .bt-close{
font-size:1.4em;
text-align:center;
display:block;
}
div.global .bt-close a{
background: url("https://grampixel.jp/img/arrow-close.png") left center no-repeat;
background-size:15px auto;
padding:5px 0 5px 20px;
display:inline-block;
}
.global li.current{
margin:0 2% 0 0;
}
.global li.mobile-design{
border:none;
margin-left:3px;
}
.global li.mobile-design a{
border:1px solid #666;
}
ul.mobile-nav li.mobile-company {
margin:2% 0 0 0;
width:132px;
}
ul.mobile-nav li.mobile-company a{
border:none;
font-size:13px;
}
.global li.mobile-top{
/*margin-top:-102px;
*/border:none;
}
.global li.mobile-top a {
border:1px solid #666;
width:116px;
}
.global li.mobile-qa {
width:99.9%;
margin:2% 0 0 0;
}
.global li.mobile-qa a{
border:none;
font-size:13px;
}
.global li.mobile-flow {
width:99.9%;
margin:2% 0 0 0;
}
.global li.mobile-flow a{
border:none;
font-size:13px;
}
.global li.mobile-portfolio{
margin:0.9% 0 0 9px;
border:none;
/*margin-top:-18px;*/
}
.global li.mobile-portfolio a{
border:1px solid #666;
}
.global li.mobile-noborder{
width:132px;
margin:2% 0 0 0;
}
.mobile-design ul.mobile-nav li.mobile-noborder{
margin-bottom: 20px !important;
}
.mobile-contact{
margin-top: -39px !important;
}
.global li.mobile-noborder a{
border:none;
font-size:13px;
}
.global li.mobile-contact{
clear:both;
margin:1% 0 2% 0;
margin-top:-18px;
}
ul.mobile-nav{
margin-left:-1px;
margin-bottom: 0px !important;
}
.simple-pricing-table .column {
width: 298px !important
}
.simple-pricing-table .column.featured {
margin-top: 0;
width: 288px !important
}
.extended-pricing-table .column {
width: 300px !important
}
.extended-pricing-table .column.featured {
margin-bottom: 20px;
margin-top: 10px
}
.extended-pricing-table .features {
background: #3a3a3a !important
}
.extended-pricing-table .featured .features {
background: #fff !important
}
.extended-pricing-table .features li {
background: none !important;
border-bottom: 0;
border-top: 1px solid #fff;
float: left;
display: inline;
width: 129px
}
.extended-pricing-table .features li:nth-child(odd) {
border-right: 1px solid #fff
}
.extended-pricing-table .featured .features li:nth-child(odd) {
border-right: 1px solid #f6f6f6
}
.extended-pricing-table .features li:nth-child(4n-1), .extended-pricing-table .features li:nth-child(4n-4) {
background: #f0f0f0 !important
}
.extended-pricing-table .featured .features li:nth-child(4n-1), .extended-pricing-table .featured .features li:nth-child(4n-4) {
background: #f6f6f6 !important
}
.extended-pricing-table .footer {
border-top: 1px solid #fff;
clear: both;
padding: 12px 10px !important;
width: 279px
}
.projects-carousel>li, .post-carousel>li {
width: 300px
}
.post-carousel .entry-body {
width: 300px
}
.comment .avatar {
margin-bottom: 10px
}
.comment .comment-meta {
margin-top: 5px;
width: 231px
}
.comment .author, .comment .author a {
margin-top: 5px
}
.comment .comment-body {
clear: both;
float: none;
margin-left: 0;
margin-top: 20px;
width: 100%
}
.comment .children .comment-meta {
width: 161px
}
#map {
height: 140px
}
.contact-form input, .comments-form input, .contact-form textarea, .comments-form textarea {
width: 278px
}
#footer-nav li {
border-top: 1px dotted #4b4b4b;
padding: 5px 0;
width: 100%
}
#footer-nav li:first-child {
border-top: 0
}
#footer-nav li a {
border: 0;
padding: 0
}
.contact-info {
margin-bottom: 20px
}
.social-links li:nth-child(8n+1) {
margin-left: 0
}
.social-links li:nth-child(8n) {
margin-right: 15px
}
#main-nav{ display: none; }
li{margin-left:0;
}
.other-services-pack .jcarousel-prev{
visibility:hidden;
}
.other-services-pack .jcarousel-next{
visibility:hidden;
}
.contact-p{
margin:0 0 5px 0;
}
.contact-btn{
height:40px;
text-align:left;
width:100%;
position:relative
}
.mobile-nav{
margin-bottom: 0px;
}