/* Web Design Title */
section.web-design-title { background-image: url(../images/seo/background.png); background-position: center; background-size: cover; background-color: #fff5eb; text-align: center; padding: 40px 0 0px; }
section.web-design-title .top-image-wrapper { position: relative; font-size: 0; max-width: 600px; margin: auto; padding: 0;  margin-top: 40px; }
section.web-design-title figure {width: 100%; z-index: 2; position: relative; }
section.web-design-title figure.monitor-content { height: 98%; width: 96%; background-image: url(../images/web-design/monitor-content.jpg); position: absolute; bottom: 0; z-index: 0; left: 2%; background-size: 100%; }
section.web-design-title figure img { width: 100%; }
section.web-design-title h2 { font-family:"Montserrat Alternates", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; margin-bottom:30px; color:#333333; font-weight:700; font-size:35px; }
section.web-design-title p.main { margin-bottom: 16px; font-family:Helvetica, Arial, sans-serif; color:#666666; font-size:16px; line-height:24px; }
section.web-design-title a { padding: 10px 20px; background: #1dca00; color: #fff; border: none; font-family: "Montserrat Alternates", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; transition: 400ms; border-radius: 7px; display: inline-block; }
section.web-design-title a:hover { background: #00aeef; }

/* Web Design Detail */
section.web-design-detail { padding:0px 0 40px; overflow:hidden; perspective:2000px }
section.web-design-detail h2.title { font-family:"Montserrat Alternates", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; margin-bottom:20px; color:#333333; font-weight:700; font-size:40px; text-align:left; }
section.web-design-detail p.main { text-align:left; font-family:Helvetica, Arial, sans-serif; color:#666666; font-size:15px; margin-bottom:20px; line-height:24px; }
section.web-design-detail .text { width:45%; float:left; padding-right:60px; margin-top:100px; margin-right:5%; padding-top: 20px; }
section.web-design-detail .inspiren-home { width:45%; float:left; padding-right:60px; margin-top:100px; margin-left:5%; position: relative; }
section.web-design-detail .inspiren-home img { width: 100%; }
section.web-design-detail a.link { text-align: left; width: 130px; position: absolute; color: #999; font-size: 8px; top: 29px; right: 315px; }
section.web-design-detail figure { max-width: 450px; margin-left: auto; }

/* Web Design Responsive */
@-webkit-keyframes swap { 10%, 40% { opacity: 1; } 60%, 90% { opacity: 0; } }
@keyframes swap { 10%, 40% { opacity: 1; } 60%, 90% { opacity: 0; } }
section.web-design-responsive { padding:0px 0 80px; border-bottom:1px solid #ececec; overflow:hidden; perspective:2000px }
section.web-design-responsive h2.title { font-family:"Montserrat Alternates", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; margin-bottom:20px; color:#333333; font-weight:700; font-size:30px; text-align:right; }
section.web-design-responsive p.main { text-align:right; font-family:Helvetica, Arial, sans-serif; color:#666666; font-size:15px; margin-bottom:20px; line-height:24px; }
section.web-design-responsive a.link { margin-bottom:20px; text-align:right; width:130px; margin-left:auto; margin-right:0; display:block; }
section.web-design-responsive .text { width:45%; float:left; padding-right:60px; margin-top:100px; margin-left:5%; }
section.web-design-responsive .inspiren-home-responsive { width:45%; float:right; padding-right:60px; margin-top:100px; margin-left:5%; position: relative; }
section.web-design-responsive figure { padding-top: 20px; text-align: center; }
section.web-design-responsive .inspiren-home-responsive img:last-child { position: absolute; left: 0; bottom: 0; -webkit-animation: swap 8s infinite; animation: swap 8s infinite; }
section.web-design-responsive .inspiren-home-responsive img:first-child { -webkit-animation: swap 8s 4s infinite; animation: swap 8s 4s infinite; opacity: 0; }

/* Web Design Detail - Portfolio */
section.portfolio a { width: 100%; height: 100%; display: inline-block; }
section.portfolio h2 { font-family:"Montserrat Alternates", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; margin-bottom:50px; color:#ffe500; font-weight:700; font-size:35px; text-align:center; padding-top: 50px; }
section.portfolio { background-color: #000; }
section.portfolio .project-wrappers { padding: 0 2% 80px; font-size: 0; }
section.portfolio .project-wrapper { font-size: 16px; width: 33.333%; display: inline-block; position: relative; height: 200px; height: -webkit-calc( ( 100vw - 17px ) / 100 * 96 / 3 * 0.787096774); height: calc( ( 100vw - 17px ) / 100 * 96 / 3 * 0.787096774); }
section.portfolio .project-bg { background-position: center; background-size: cover; background-repeat: no-repeat; position: absolute; height: 80%; width: 80%; left: 10%; top: 10%; }
section.portfolio .project-bg img { position: absolute; z-index: 5; }
section.portfolio .project-wrapper.keko .project-bg { background-image: url(../images/web-design/portfolio-keko-bg.jpg); }
section.portfolio .project-wrapper.keko img { transform-origin: right bottom; -webkit-transform-origin: right bottom; transition-duration: .2s; -webkit-transition-duration: .2s; }
section.portfolio .project-wrapper.keko img.keko-logo { width: 27%; left: 5%; top: 5%; }
section.portfolio .project-wrapper.keko img.keko-lychee { width: 20%; left: -3%; top: 50%; z-index: 7; transform-origin: left bottom; -webkit-transform-origin: left bottom; }
section.portfolio .project-wrapper.keko img.keko-orange { width: 21%; left: 12%; top: 43%; z-index: 6; transform-origin: left bottom; -webkit-transform-origin: left bottom; }
section.portfolio .project-wrapper.keko img.keko-soy { width: 20%; left: 33%; top: 6%; z-index: 6; transform-origin: left bottom; -webkit-transform-origin: left bottom; }
section.portfolio .project-wrapper.keko img.keko-soy-red { width: 21%; left: 49%; top: -11%; z-index: 4; }
section.portfolio .project-wrapper.keko img.keko-blueberry { width: 21%; left: 49%; top: 46%; z-index: 7; }
section.portfolio .project-wrapper.keko img.keko-brown-herbal { width: 20%; left: 66%; top: -15%; }
section.portfolio .project-wrapper.keko img.keko-bird-nest { width: 20%; left: 83%; top: 45%; z-index: 4; }
section.portfolio .project-wrapper.keko img.keko-splash-1 { width: 80%; left: 10%; top: 0%; z-index: 3; opacity: 0; transform-origin: center bottom; -webkit-transform-origin: center bottom; }
section.portfolio .project-wrapper.keko img.keko-splash-2 { width: 80%; left: 10%; top: 37%; opacity: 0; transform-origin: center bottom; -webkit-transform-origin: center bottom; }
section.portfolio .project-wrapper.keko .project-bg:hover img.keko-logo { left: -5%; transition-duration: .2s; -webkit-transition-duration: .2s; }
section.portfolio .project-wrapper.keko .project-bg:hover img.keko-lychee { left: -6%; transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transition-duration: .5s; -webkit-transition-duration: .5s; }
section.portfolio .project-wrapper.keko .project-bg:hover img.keko-orange { left: 9%; transform: rotate(-8deg); -webkit-transform: rotate(-8deg); transition-duration: .4s; -webkit-transition-duration: .4s; }
section.portfolio .project-wrapper.keko .project-bg:hover img.keko-soy { left: 31%; transform: rotate(-4deg); -webkit-transform: rotate(-4deg); transition-duration: .2s; -webkit-transition-duration: .2s; }
section.portfolio .project-wrapper.keko .project-bg:hover img.keko-soy-red { left: 51%; transform: rotate(2deg); -webkit-transform: rotate(2deg); transition-duration: .2s; -webkit-transition-duration: .2s; }
section.portfolio .project-wrapper.keko .project-bg:hover img.keko-blueberry { left: 51%; transform: rotate(4deg); -webkit-transform: rotate(4deg); transition-duration: .2s; -webkit-transition-duration: .2s; }
section.portfolio .project-wrapper.keko .project-bg:hover img.keko-brown-herbal { left: 69%; transform: rotate(8deg); -webkit-transform: rotate(8deg); transition-duration: .3s; -webkit-transition-duration: .3s; }
section.portfolio .project-wrapper.keko .project-bg:hover img.keko-bird-nest { left: 86%; transform: rotate(10deg); -webkit-transform: rotate(10deg); transition-duration: .4s; -webkit-transition-duration: .4s; }
section.portfolio .project-wrapper.keko .project-bg:hover img.keko-splash-1 { transform: scale(1.3); -webkit-transform: scale(1.3); opacity: 1; transition-duration: .1s; -webkit-transition-duration: .1s; }
section.portfolio .project-wrapper.keko .project-bg:hover img.keko-splash-2 { transform: scale(1.5); -webkit-transform: scale(1.5); opacity: 1; transition-duration: .2s; -webkit-transition-duration: .2s; }
@keyframes spin_1 { 0% { clip-path: polygon(50% 50%, 50% -20%, 100% -20%, 100% 100%, 0% 100%, 0% -20%, 50% -20% ); -webkit-clip-path: polygon(50% 50%, 50% -20%, 100% -20%, 100% 100%, 0% 100%, 0% -20%, 50% -20% ); } 100% { clip-path: polygon(50% 50%, 100% -20%, 100% -20%, 100% 100%, 0% 100%, 0% -20%, 50% -20% ); -webkit-clip-path: polygon(50% 50%, 100% -20%, 100% -20%, 100% 100%, 0% 100%, 0% -20%, 50% -20% ); } }
@keyframes spin_2 { 0% { clip-path: polygon(50% 50%, 100% -20%, 100% -20%, 100% 100%, 0% 100%, 0% -20%, 50% -20% ); -webkit-clip-path: polygon(50% 50%, 100% -20%, 100% -20%, 100% 100%, 0% 100%, 0% -20%, 50% -20% ); } 100% { clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0% 100%, 0% -20%, 50% -20% ); -webkit-clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0% 100%, 0% -20%, 50% -20% ); } }
@keyframes spin_3 { 0% { clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0% 100%, 0% -20%, 50% -20% ); -webkit-clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0% 100%, 0% -20%, 50% -20% ); } 100% { clip-path: polygon(50% 50%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% -20%, 50% -20% ); -webkit-clip-path: polygon(50% 50%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% -20%, 50% -20% ); } }
@keyframes spin_4 { 0% { clip-path: polygon(50% 50%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% -20%, 50% -20% ); -webkit-clip-path: polygon(50% 50%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% -20%, 50% -20% ); } 100% { clip-path: polygon(50% 50%, 0% -20%, 0% -20%, 0% -20%, 0% -20%, 0% -20%, 50% -20% ); -webkit-clip-path: polygon(50% 50%, 0% -20%, 0% -20%, 0% -20%, 0% -20%, 0% -20%, 50% -20% ); } }
@keyframes spin_5 { 0% { clip-path: polygon(50% 50%, 0% -20%, 0% -20%, 0% -20%, 0% -20%, 0% -20%, 50% -20% ); -webkit-clip-path: polygon(50% 50%, 0% -20%, 0% -20%, 0% -20%, 0% -20%, 0% -20%, 50% -20% ); } 100% { clip-path: polygon(50% 50%, 50% -20%, 50% -20%, 50% -20%, 50% -20%, 50% -20%, 50% -20% ); -webkit-clip-path: polygon(50% 50%, 50% -20%, 50% -20%, 50% -20%, 50% -20%, 50% -20%, 50% -20% ); } }
@-webkit-keyframes spin_1 { 0% { -webkit-clip-path: polygon(50% 50%, 50% -20%, 100% -20%, 100% 100%, 0% 100%, 0% -20%, 50% -20% ); } 100% { -webkit-clip-path: polygon(50% 50%, 100% -20%, 100% -20%, 100% 100%, 0% 100%, 0% -20%, 50% -20% ); } }
@-webkit-keyframes spin_2 { 0% { -webkit-clip-path: polygon(50% 50%, 100% -20%, 100% -20%, 100% 100%, 0% 100%, 0% -20%, 50% -20% ); } 100% { -webkit-clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0% 100%, 0% -20%, 50% -20% ); } }
@-webkit-keyframes spin_3 { 0% { -webkit-clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0% 100%, 0% -20%, 50% -20% ); } 100% { clip-path: polygon(50% 50%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% -20%, 50% -20% ); -webkit-clip-path: polygon(50% 50%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% -20%, 50% -20% ); } }
@-webkit-keyframes spin_4 { 0% { -webkit-clip-path: polygon(50% 50%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% -20%, 50% -20% ); } 100% { -webkit-clip-path: polygon(50% 50%, 0% -20%, 0% -20%, 0% -20%, 0% -20%, 0% -20%, 50% -20% ); } }
@-webkit-keyframes spin_5 { 0% { -webkit-clip-path: polygon(50% 50%, 0% -20%, 0% -20%, 0% -20%, 0% -20%, 0% -20%, 50% -20% ); } 100% { -webkit-clip-path: polygon(50% 50%, 50% -20%, 50% -20%, 50% -20%, 50% -20%, 50% -20%, 50% -20% ); } }
section.portfolio .project-wrapper.one-80 .project-bg .page-1 { background-image: url(../images/web-design/portfolio-180-bg.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; height: 100%; position: absolute; width: 100%; z-index: 3; opacity: 1; transition: opacity .5s, z-index 0s, top 0s; -webkit-transition: opacity .5s, z-index 0s, top 0s; }
section.portfolio .project-wrapper.one-80 .project-bg .page-2 { background-color: #00a79d; height: 100%; position: absolute; width: 100%; z-index: 2; }
section.portfolio .project-wrapper.one-80 .project-bg .page-2 figure { overflow-y: hidden; height: 100%; width: 80%; position: absolute; left: 30%; transition: .5s; -webkit-transition: .5s; }
section.portfolio .project-wrapper.one-80 img.one-80-logo { width: 28%; top: 75%; left: 4%; transition: top .5s; -webkit-transition: top .5s; }
section.portfolio .project-wrapper.one-80 img.one-80-bg-2 { height: 100%; width: auto; left: 0; transform-origin: left center; -webkit-transform-origin: left center; transition: .5s; -webkit-transition: .5s; }
section.portfolio .project-wrapper.one-80 img.one-80-table { width: 78%; top: -18%; left: -1.2%; }
section.portfolio .project-wrapper.one-80 .project-bg:hover .page-1 { animation: spin_1 .3s .3s ease-in, spin_2 .2s .6s linear, spin_3 .1s .8s linear, spin_4 .2s .9s linear, spin_5 .3s 1.1s ease-out; -webkit-animation: spin_1 .3s .3s ease-in, spin_2 .2s .6s linear, spin_3 .1s .8s linear, spin_4 .2s .9s linear, spin_5 .3s 1.1s ease-out; z-index: 1; opacity: 0; transition: z-index 0s 1.4s, opacity 0s 1.4s; -webkit-transition: z-index 0s 1.4s, opacity 0s 1.4s; }
section.portfolio .project-wrapper.one-80 .project-bg:hover img.one-80-table { top: 0; transition: .3s; -webkit-transition: .3s; }
section.portfolio .project-wrapper.one-80 .project-bg:hover .page-2 figure { left: 37%; transition: .3s .7s; -webkit-transition: .3s .7s; }
section.portfolio .project-wrapper.one-80 .project-bg:hover img.one-80-logo { top: 10%; transition: .3s .7s; -webkit-transition: .3s .7s; }
section.portfolio .project-wrapper.one-80 .project-bg:hover img.one-80-bg-2 { transform: scale(1.14); -webkit-transform: scale(1.14); transition: 5s .4s linear; -webkit-transition: 5s .4s linear; }
section.portfolio .project-wrapper.one-80 img.one-80-table-shadow { width: 88%; top: 22%; left: 7%; }
section.portfolio .project-wrapper.one-80 .project-bg:hover img.one-80-table-shadow { top: 40%; transition: .3s; }
section.portfolio .project-wrapper.honda .project-bg { background-image: url(../images/web-design/portfolio-honda-bg.jpg); }
section.portfolio .project-wrapper.honda figure { position: absolute; left: 0; top: 0; width: 117%; height: 100%; overflow: hidden; }
section.portfolio .project-wrapper.honda img.honda-logo { width: 35%; top: 65%; left: 45%; transition: .3s; -webkit-transition: .3s; }
section.portfolio .project-wrapper.honda img.honda-crv { width: 90%; left: -30%; top: -3%; transition: top .3s cubic-bezier(0.72, -0.34, 0.87, 0.4), left .3s, transform .3s; -webkit-transition: top .3s cubic-bezier(0.72, -0.34, 0.87, 0.4), left .3s, transform .3s; }
section.portfolio .project-wrapper.honda .project-bg:hover img.honda-logo { left: 5%; transition: .5s; -webkit-transition: .5s; }
section.portfolio .project-wrapper.honda .project-bg:hover img.honda-crv { left: 10%; top: 5%; transition: top .5s cubic-bezier(0.4, 0.58, 0, 1.63), left .5s, transform .1s .4s; -webkit-transition: top .5s cubic-bezier(0.4, 0.58, 0, 1.63), left .5s, transform .1s .4s; }
section.portfolio .project-wrapper.sorganic .sky { background-image: url(../images/web-design/portfolio-sorganic-bg-3.jpg); width: 100%; height: 100%; background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: absolute; top: 0; left: 0; z-index: 1; }
section.portfolio .project-wrapper.sorganic .sky::before { background-image: url(../images/web-design/portfolio-sorganic-bg-2.gif); opacity: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: absolute; top: 0; left: 0; z-index: 2; content: ' '; transition: 1s; -webkit-transition: 1s; }
section.portfolio .project-wrapper.sorganic .grass { background-image: url(../images/web-design/portfolio-sorganic-bg.png); width: 100%; height: 100%; background-repeat: no-repeat; background-size: 100% auto; background-position: center bottom; position: absolute; top: 0; left: 0; z-index: 3; }
section.portfolio .project-wrapper.sorganic img { transition: .2s; -webkit-transition: .2s; }
section.portfolio .project-wrapper.sorganic img.sorganic-logo { width: 35%; top: 5%; left: 5%; }
section.portfolio .project-wrapper.sorganic img.sorganic-active { width: 32%; top: 17%; left: 57%; transform: rotate(22deg); -webkit-transform: rotate(22deg);  z-index: 6; }
section.portfolio .project-wrapper.sorganic img.sorganic-green { width: 42%; top: 35%; left: 50%; transform: rotate(-16deg); -webkit-transform: rotate(-16deg); }
section.portfolio .project-wrapper.sorganic img.sorganic-other { width: 87%; top: 44%; left: 13%; z-index: 4; }
section.portfolio .project-wrapper.sorganic img.sorganic-splash { width: 40%; top: 47%; left: 55%; opacity: 0; z-index: 3; transform-origin: center bottom; -webkit-transform-origin: center bottom; }
section.portfolio .project-wrapper.sorganic .project-bg:hover .sky::before { opacity: 1; transition: 1s; -webkit-transition: 1s; }
section.portfolio .project-wrapper.sorganic .project-bg:hover img.sorganic-logo { top: -8%; }
section.portfolio .project-wrapper.sorganic .project-bg:hover img.sorganic-active { transform: rotate(0deg); -webkit-transform: rotate(0deg); top: -7%; transition: .5s; -webkit-transition: .5s; }
section.portfolio .project-wrapper.sorganic .project-bg:hover img.sorganic-green { transform: rotate(0deg); -webkit-transform: rotate(0deg); top: 25%; transition: .3s; -webkit-transition: .3s; }
section.portfolio .project-wrapper.sorganic .project-bg:hover img.sorganic-splash { transform: scale(1.6); -webkit-transform: scale(1.6); opacity: 1; transition: .1s; -webkit-transition: .1s; }
section.portfolio .project-wrapper.ecc .project-bg { background-image: url(../images/web-design/portfolio-ecc-bg.jpg); background-size: 200% 200%; background-position: 0% 0%; transition: .4s; -webkit-transition: .4s; }
section.portfolio .project-wrapper.ecc .project-bg::before { position: absolute; content: ' '; background-color: rgba(0,0,0,.4); width: 100%; height: 100%; left: 0; top: 0; }
section.portfolio .project-wrapper.ecc img.ecc-logo { width: 20%; top: 1%; left: 1%; transition: .4s cubic-bezier(0.85, 0.01, 0.68, 2.74); -webkit-transition: .4s cubic-bezier(0.85, 0.01, 0.68, 2.74); }
section.portfolio .project-wrapper.ecc img.ecc-coffee-1 { width: 40%; top: 56%; left: 45%; opacity: 0; transform: scale(0); -webkit-transform: scale(0); transform-origin: -10% -10%; -webkit-transform-origin: -10% -10%; transition: transform 0s .2s cubic-bezier(0.16, 0.68, 0.27, 1.77), opacity .2s; -webkit-transition: transform 0s .2s cubic-bezier(0.16, 0.68, 0.27, 1.77), opacity .2s; }
section.portfolio .project-wrapper.ecc img.ecc-coffee-2 { width: 40%; top: 15%; left: 65%; opacity: 0; transform: scale(0);  -webkit-transform: scale(0);  transform-origin: -20% 30%; -webkit-transform-origin: -20% 30%; transition: transform 0s .2s cubic-bezier(0.16, 0.68, 0.27, 1.77), opacity .2s; -webkit-transition: transform 0s .2s cubic-bezier(0.16, 0.68, 0.27, 1.77), opacity .2s; }
section.portfolio .project-wrapper.ecc .project-bg:hover { background-size: 100% 100%; background-position: 0% 0%; transition: .4s; -webkit-transition: .4s; }
section.portfolio .project-wrapper.ecc .project-bg:hover img.ecc-logo { top: -1%; left: -1%; transform: scale(1.2); -webkit-transform: scale(1.2); }
section.portfolio .project-wrapper.ecc .project-bg:hover img.ecc-coffee-1 { opacity: 1; transform: scale(1);  -webkit-transform: scale(1);  transition: transform .4s cubic-bezier(0.16, 0.68, 0.27, 1.77), opacity 0s; -webkit-transition: transform .4s cubic-bezier(0.16, 0.68, 0.27, 1.77), opacity 0s; }
section.portfolio .project-wrapper.ecc .project-bg:hover img.ecc-coffee-2 { opacity: 1; transform: scale(1);  -webkit-transform: scale(1);  transition: transform .4s .2s cubic-bezier(0.16, 0.68, 0.27, 1.77), opacity 0s; -webkit-transition: transform .4s .2s cubic-bezier(0.16, 0.68, 0.27, 1.77), opacity 0s; }
section.portfolio .project-wrapper.labpark .project-bg { background-image: url(../images/web-design/portfolio-labpark-bg.jpg); background-position: left bottom; -webkit-transition: 1s linear; transition: 1s linear; }
section.portfolio .project-wrapper.labpark img.labpark-logo {  width: 50%; bottom: 6%; right: 5%;  }
section.portfolio .project-wrapper.labpark img.labpark-logo-glow { width: 50%; bottom: 6%; right: 5%; opacity: 0; }
section.portfolio .project-wrapper.labpark .project-bg:hover { background-position: center right; -webkit-transition: 8s linear; transition: 8s linear; }
section.portfolio .project-wrapper.labpark .project-bg:hover img.labpark-logo-glow { -webkit-animation: glow 3s infinite alternate; animation: glow 3s infinite alternate; }
@-webkit-keyframes glow { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes glow { 0% { opacity: 0; } 100% { opacity: 1; } }

/* Web Design Detail - Why Us */
section.web-design-detail-why-us { padding:40px 0; border-bottom:1px solid #ececec; }
section.web-design-detail-why-us h2 { font-family:"Montserrat Alternates", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; margin-bottom:30px; color:#333333; font-weight:700; font-size:30px; text-align:left; }
section.web-design-detail-why-us h3 { font-family:"Montserrat Alternates", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; margin-bottom:10px; color:#333333; font-size:20px; text-align:left; font-weight: 600; }
section.web-design-detail-why-us p { text-align:left; font-family:Helvetica, Arial, sans-serif; color:#777777; font-size:14px; line-height:20px; }
section.web-design-detail-why-us .facts-wrapper { max-width: 900px; margin: auto; }
section.web-design-detail-why-us .fact-wrapper { clear: both; margin: 30px 0; overflow: hidden; }
section.web-design-detail-why-us .fact-img { width: 30%; float: left; text-align: center; }
section.web-design-detail-why-us .fact-wrapper:nth-child(even) .fact-img { float: right; }
section.web-design-detail-why-us .fact-img img { width: 150px; }
section.web-design-detail-why-us .fact-detail { width: 60%; float: left; margin: 40px 10% 0 0; }
section.web-design-detail-why-us .fact-wrapper:nth-child(even) .fact-detail { margin: 40px 0% 0 10%; }
section.web-design-detail-why-us .fact-wrapper:nth-child(even) h3 { text-align: left; }
section.web-design-detail-why-us .fact-wrapper:nth-child(even) p { text-align: left; }

@media screen and (max-width:1200px) {
section.web-design-detail .tablet { right:120px; }
section.web-design-detail .mobile { left:180px; }
section.portfolio .web { height:215px; }
}

@media only screen and (max-width: 1199px) {
section.web-design-detail .desktop-side { margin-right: 13px; }
section.responsive-user-friendly { margin-top: 50px; }
section.responsive-user-friendly .responsive-user-friendly-detail { margin-top: 10px; width: 100%; }
section.responsive-user-friendly h2 { text-align: center; }
section.responsive-user-friendly p.main { text-align: center; }
section.seo-friendly .tablet-col { float: right; margin-right: 5%; }
section.seo-friendly .seo-friendly-detail { margin-left: 0; margin-right: 5%; }
section.seo-friendly .seo-friendly-detail h2 { text-align: right; }
section.seo-friendly .seo-friendly-detail p.main { text-align: right; }
}

@media screen and (max-width:991px) {
section.web-design-detail .text { padding-right: 0; }
section.web-design-detail .tablet { right:50px; }
section.web-design-detail .mobile { left:60px; }
section.portfolio .web { margin:30px 2.5% 0; width:45%; }
section.web-design-detail .desktop-side { margin-right: 0px; margin-left: 0; }
section.web-design-detail .slider-img-wrapper figure { width: 627px; }
section.web-design-detail h1 { text-align: center; }
section.web-design-detail p.main { text-align: center; }
section.seo-friendly .tablet-col { width: 100%; text-align: center; margin-right: 0; }
section.seo-friendly .tablet-col .seo-ui-wrapper { text-align: left; }
section.seo-friendly .seo-friendly-detail { margin-right: 0; width: 100%; margin-top: 0; margin-bottom: 40px; }
section.seo-friendly .seo-friendly-detail h2 { text-align: center; }
section.seo-friendly .seo-friendly-detail p.main { text-align: center; }
section.portfolio .project-bg { pointer-events: none; }
section.web-design-detail figure { max-width: 370px; margin: auto; }
section.web-design-detail a.link { font-size: 7px; top: 23px; right: 255px; }
section.web-design-detail .inspiren-home { width: 100%; padding-right: 0px; margin-left: 0%; }
section.web-design-detail .text { width: 100%; margin-top: 30px; margin-right: 0%; padding: 20px 50px 0; }
section.web-design-detail h2.title { text-align: center; }
}

@media screen and (max-width:767px) {
section.web-design-detail h1 { font-size:30px; }
section.web-design-detail h2 { font-size:24px; }
section.web-design-detail p.main { font-size:14px; line-height:20px; margin-bottom:10px; }
section.web-design-detail .monitor { display:none; }
section.web-design-detail .tablet { position:relative; left:50%; margin-left:-150px; margin-top:10px; bottom:0; }
section.web-design-detail .mobile { display:none !important; }
section.web-design-detail .flexslider2.desktop-size .flex-control-nav { display:none; }
section.web-design-detail .flexslider2.tablet-size .flex-control-nav { display:block; left:0; }
section.portfolio p.main { font-size:14px; line-height:20px; margin-bottom:0; }
section.web-design-banner { height: 200px; }
section.web-design-detail .desktop-side { width: 420px; height: 300px; margin-left: auto; margin-right: auto; }
section.web-design-detail .slider-img-wrapper { padding-top: 24px; margin-left: 21px; }
section.web-design-detail .slider-img-wrapper figure { width: 379px; }
section.web-design-detail .slider-img-wrapper img:last-child { width: 604px; top: 15px; }
section.responsive-user-friendly .device { height: 460px; }
section.responsive-user-friendly .monitor { display: none; }
section.responsive-user-friendly .tablet { left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); }
section.responsive-user-friendly .mobile { left: 75%; transform: translateX(-50%); -webkit-transform: translateX(-50%); }
section.portfolio .project-wrapper { width: 50%; height: -webkit-calc( ( 100vw - 17px ) / 100 * 96 / 2 * 0.787096774); height: calc( ( 100vw - 17px ) / 100 * 96 / 2 * 0.787096774); }
section.web-design-detail-why-us { padding-bottom:50px; }
section.web-design-detail-why-us .fact-img { width: 100%; float: none; }
section.web-design-detail-why-us .fact-detail { width: 100%; float: none; margin: 40px 0 0 0; }
section.web-design-detail-why-us h3 { text-align: center; }
section.web-design-detail-why-us p { text-align: center; }
section.web-design-detail-why-us .fact-wrapper:nth-child(even) .fact-detail { margin: 40px 0% 0 0%; }
section.web-design-detail-why-us .fact-wrapper:nth-child(even) .fact-img { float: none; }
section.web-design-detail-why-us .fact-wrapper:nth-child(even) h3 { text-align: center; }
section.web-design-detail-why-us .fact-wrapper:nth-child(even) p { text-align: center; }
section.web-design-responsive .text { width: 100%; padding-right: 0px; margin-top: 50px; padding: 0 50px; margin-left: 0%; }
section.web-design-responsive .inspiren-home-responsive { width: 100%; padding-right: 0px; margin-top: 0px; margin-left: 0%; }
section.web-design-responsive figure { max-width: 390px; padding-top: 20px; margin: auto; text-align: center; position: relative; }
section.web-design-responsive h2.title { text-align: center; }
section.web-design-responsive p.main { text-align: center; }
}

@media only screen and (max-width: 474px) {
section.web-design-detail { margin-top: 40px; }
section.web-design-detail .desktop-side { width: 240px; height: 150px; }
section.web-design-detail .slider-img-wrapper { padding-top: 12px; margin-left: 12px; }
section.web-design-detail .slider-img-wrapper figure { width: 217px; }
section.web-design-detail .slider-img-wrapper img:last-child { width: 302px; top: 8px; }
section.responsive-user-friendly .tablet { display: none; }
section.responsive-user-friendly .mobile { left: 50%; }
section.responsive-user-friendly .device { height: 320px; }
section.seo-friendly .tablet-col figure img { width: 100%; }
section.seo-friendly p.google-url.google-url-1 { top: 45px; }
section.seo-friendly p.google-url.google-url-2 { top: 61px; left: 118px; }
section.seo-friendly .sendkey { top: 86px; left: 90px; }
section.seo-friendly .before-sendkey { top: 150px; }
section.seo-friendly .after-sendkey { top: 148px; }
section.seo-friendly .after-sendkey h2 { font-size: 11px; }
section.seo-friendly .after-sendkey p.desc { font-size: 8px; }
section.seo-friendly .after-sendkey.show { left: 26px; }
section.seo-friendly { padding-top: 60px; }
section.portfolio .project-wrapper { width: 100%; height: calc( ( 100vw - 17px ) / 100 * 96 * 0.787096774); height: -webkit-calc( ( 100vw - 17px ) / 100 * 96 * 0.787096774); }
section.web-design-detail-why-us { padding-bottom: 20px; padding-top: 0; }
section.portfolio .project-wrapper.honda figure { width: 100%; }
@keyframes slide { 0%, 45% { right: -85px } 55%, 100% { right: 0; }}
@-webkit-keyframes slide { 0%, 45% { right: -85px } 55%, 100% { right: 0; }}
section.web-design-detail .inspiren-home { margin-top: 0; }
section.web-design-detail .text { padding: 20px 15px 0; }
section.web-design-responsive .inspiren-home-responsive img:last-child { display: none; }
section.web-design-responsive .inspiren-home-responsive img:first-child { -webkit-animation: none; animation: none; opacity: 1; }
section.web-design-responsive .text { padding: 0 15px; }
section.web-design-responsive { padding: 0px 0 40px; }
}

@media only screen and (min-width: 1440px) {
section.web-design-detail .container {width: 1410px; }
section.web-design-detail .web-design-detail-col {width: 48%;float: right; }
section.web-design-detail .desktop-side {width: 650px;margin-left: 0; }
section.responsive-user-friendly {margin-top: -30px; }
}