* { padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } body, html { overflow-x: hidden; } .btn { display: inline-block; -webkit-transition: all .4s; transition: all .4s; text-decoration: none; padding: 15px 25px; -webkit-appearance: none; background: transparent; color: #0060ff; border: 1px solid #0060ff; border-radius: 6px; font-size: 18px; text-transform: uppercase; letter-spacing: 2px; transition: all .4s; margin-top: 30px; } .btn:hover { cursor: pointer; color: #fff; background: #0060ff; opacity: .7; -webkit-transition: all .4s; transition: all .4s; } @media only screen and (max-width: 768px) { .btn { width: auto; display: block; } } .btn.inverted { border: 1px solid #0060ff; color: #fff; background: #0060ff; opacity: .7; -webkit-transition: all .4s; transition: all .4s; } .btn.inverted:hover { background: transparent; color: #0060ff; opacity: .7; -webkit-transition: all .4s; transition: all .4s; } .btnContainer { display: block; text-align: center; } @media only screen and (min-width: 768px) { .btnContainer a:nth-child(2) { margin-left: 30px; } .btnContainer.left-align { text-align: left; } } .container { position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; } .container.small { max-width: 576px; } .anim { opacity: 0; } @keyframes gradient-motion { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } to { background-position: 0% 50%; } } @-webkit-keyframes gradient-motion { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } to { background-position: 0% 50%; } } @keyframes promoFade { 0% { opacity: 0; -webkit-transform: translate3d(0,10%,0); transform: translate3d(0,10%,0); } to { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } } @-webkit-keyframes promoFade { 0% { opacity: 0; -webkit-transform: translate3d(0,10%,0); transform: translate3d(0,10%,0); } to { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } } @-webkit-keyframes promoPrice { 0% { opacity: 0; -webkit-transform: translate3d(0,30%,0); transform: translate3d(0,30%,0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes promoPrice { 0% { opacity: 0; -webkit-transform: translate3d(0,30%,0); transform: translate3d(0,30%,0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate(-35%,-55%) scale(1.5); transform: translate(-35%,-55%) scale(1.5); } to { -webkit-transform: translate(-50%,-55%) scale(1.5); transform: translate(-50%,-55%) scale(1.5); opacity: 1; } } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate(-35%,-55%) scale(1.5); transform: translate(-35%,-55%) scale(1.5); } to { -webkit-transform: translate(-50%,-55%) scale(1.5); transform: translate(-50%,-55%) scale(1.5); opacity: 1; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate(-65%,-55%) scale(1.5); transform: translate(-65%,-55%) scale(1.5); } to { -webkit-transform: translate(-50%,-55%) scale(1.5); transform: translate(-50%,-55%) scale(1.5); opacity: 1; } } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate(-65%,-55%) scale(1.5); transform: translate(-65%,-55%) scale(1.5); } to { -webkit-transform: translate(-50%,-55%) scale(1.5); transform: translate(-50%,-55%) scale(1.5); opacity: 1; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(50%); transform: translateY(50%); } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(50%); transform: translateY(50%); } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes rotateFade1 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes rotateFade1 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes fadeInOut { 0% { opacity: 1; } 25% { opacity: 1; } 50% { opacity: 0; } 75% { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeInOut { 0% { opacity: 1; } 25% { opacity: 1; } 50% { opacity: 0; } 75% { opacity: 0; } to { opacity: 1; } } @keyframes fadeOutIn { 0% { opacity: 0; } 25% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes fadeOutIn { 0% { opacity: 0; } 25% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes wiggle { 0% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 33% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 66% { -webkit-transform: rotate(6deg); transform: rotate(6deg); } to { -webkit-transform: rotate(5deg); transform: rotate(5deg); } } @keyframes wiggle { 0% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 33% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 66% { -webkit-transform: rotate(6deg); transform: rotate(6deg); } to { -webkit-transform: rotate(5deg); transform: rotate(5deg); } } @-webkit-keyframes float1 { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 33% { -webkit-transform: translateY(5px); transform: translateY(5px); } 66% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes float1 { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 33% { -webkit-transform: translateY(5px); transform: translateY(5px); } 66% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes float2 { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 33% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 66% { -webkit-transform: translateY(5px); transform: translateY(5px); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes float2 { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 33% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 66% { -webkit-transform: translateY(5px); transform: translateY(5px); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes fadeup { 0% { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeup { 0% { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @media only screen and (max-width: 767px) { section .container { padding: 40px 16px; } } nav { width: 100%; z-index: 20; position: relative; background: #fff; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.3); box-shadow: 0 1px 4px rgba(0,0,0,.3); } nav .navContainer { -webkit-transition: all .4s; transition: all .4s; background: rgba(255,255,255,0); display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; padding-top: 0; padding-bottom: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } nav .navContainer.small { max-width: 576px; } nav .navContainer svg { width: 150px; margin: 15px 0; -webkit-transition: all .4s; transition: all .4s; } nav .navContainer svg .st1 { fill: #000; -webkit-transition: all .4s; transition: all .4s; } nav .navContainer ul { -webkit-transition: all .4s; transition: all .4s; font-size: .8888888889em; } nav .navContainer ul li { display: inline-block; margin: 0 15px; font-size: 21px; cursor: pointer; } nav .navContainer ul li a { font-weight: 400; -webkit-transition: all .4s; transition: all .4s; } nav .navContainer ul li a.active { font-weight: 300; } nav .navContainer ul li a.jpnNavItem.active { font-weight: 900; color: #0060ff; } nav .navContainer ul li a:hover.jpnNavItem { color: #0060ff; } nav .navContainer ul li.orderBtn { margin-right: 0; } nav .navContainer ul li.orderBtn a { display: inline-block; -webkit-transition: all .4s; transition: all .4s; text-decoration: none; padding: 6px 14px; -webkit-appearance: none; background: #fff; color: #000; border: 1px solid #000; border-radius: 4px; } nav .navContainer ul li.orderBtn a:hover { cursor: pointer; color: #fff; background: #000; } @media only screen and (max-width: 768px) { nav .navContainer ul li.orderBtn a { width: auto; display: block; } } @media only screen and (max-width: 767px) { nav .navContainer ul li.orderBtn { display: none; } } nav .navContainer #responsive-navbar { position: absolute; display: none; top: 50px; right: 30px; -webkit-transition: all .4s; transition: all .4s; } nav .navContainer #responsive-navbar:hover { cursor: pointer; } nav .navContainer #responsive-navbar .bar1, nav .navContainer #responsive-navbar .bar2, nav .navContainer #responsive-navbar .bar3 { width: 35px; height: 5px; background-color: #000; margin: 6px 0; -webkit-transition: .4s; transition: .4s; } nav .navContainer #responsive-navbar.change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px,6px); transform: rotate(-45deg) translate(-9px,6px); } nav .navContainer #responsive-navbar.change .bar2 { opacity: 0; } nav .navContainer #responsive-navbar.change .bar3 { -webkit-transform: rotate(45deg) translate(-8px,-8px); transform: rotate(45deg) translate(-8px,-8px); } @media only screen and (max-width: 767px) { nav .navContainer #responsive-navbar { display: block; } } @media only screen and (max-width: 767px) { nav .navContainer { -ms-flex-wrap: wrap; flex-wrap: wrap; background: #fff; -webkit-transition: all 0s; transition: all 0s; } } nav.sticky { background: #fff; position: fixed; top: 0; height: 80px; -webkit-transition: all .4s,top 0s; transition: all .4s,top 0s; z-index: 999999; display: -webkit-box; display: -ms-flexbox; display: flex; } nav.sticky .navContainer { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: all .4s; transition: all .4s; } nav.sticky .navContainer .logo { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } nav.sticky .navContainer svg { margin: 5px 0; width: 170px; -webkit-transition: all .4s; transition: all .4s; } @media(-ms-high-contrast: active),(-ms-high-contrast: none) { nav.sticky .navContainer svg { height: 70px; } } nav.sticky .navContainer svg .st1 { fill: #000; -webkit-transition: all .4s; transition: all .4s; } nav.sticky .navContainer #dreamersiNav li:first-child { margin-left: 0; } nav.sticky .navContainer #dreamersiNav li:nth-child(2) { margin-left: 40px; } nav.sticky .navContainer ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } nav.sticky .navContainer ul li { color: #000; -webkit-transition: all .4s; transition: all .4s; position: relative; font-weight: 300!important; } nav.sticky .navContainer ul li.open:after { content: ""; position: absolute; width: calc(100% + 20px); height: 3px; background: #2e59e2; bottom: -28px; left: -10px; } nav.sticky .navContainer ul a { color: #000; -webkit-transition: all .4s; transition: all .4s; font-size: 21px; transition: all .4s; font-weight: 300!important; } nav.sticky .navContainer ul.mobile li:not(:first-child) { display: none; } nav.sticky .navContainer ul a:hover, nav.sticky .navContainer ul li:hover { color: #0697d4; -webkit-transition: all .4s; transition: all .4s; } nav.sticky .navContainer #responsive-navbar { top: 10px; -webkit-transition: all .4s; transition: all .4s; } nav.promoNav .navContainer svg .st1 { fill: #000; } @media only screen and (max-width: 1248px) { nav.promoNav .navContainer ul a { color: #000; text-shadow: 1px 1px #fff; } } @media only screen and (max-width: 767px) { nav .navContainer { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-transition: all .4s; transition: all .4s; } nav .navContainer svg { margin: 5px 0; width: 140px; -webkit-transition: all .4s; transition: all .4s; } nav .navContainer svg .st1 { fill: #000!important; } nav .navContainer ul li a { color: #000!important; } nav .navContainer ul li.orderBtn a { color: #fff!important; } nav .navContainer ul li.orderBtn a:hover { color: #0060ff!important; } nav .navContainer #responsive-navbar { top: 20px; -webkit-transition: all .4s; transition: all .4s; } } @media only screen and (min-width: 768px) { .navItem { position: relative; padding: 5px 0; outline: none; letter-spacing: 1px; color: #000; -webkit-transition: all .4s; transition: all .4s; } .navItem:hover { color: transparent; -webkit-transition: all .4s; transition: all .4s; } .navItem.active:before, .navItem:focus, .navItem:hover { outline: none; } .navItem.active:before, .navItem:before { position: absolute; top: 0; left: 0; overflow: hidden; padding: 5px 0; max-width: 0; border-bottom: 2px solid #0060ff; color: #0060ff; content: attr(data-hover); -webkit-transition: max-width .2s; transition: max-width .2s; max-height: 19px; } .navItem.active:before, .navItem:focus:before, .navItem:hover:before { max-width: 100%; } .jpnNavItem.active:before, .jpnNavItem:before { display: none; } .jpnNavItem.active:before, .jpnNavItem:hover { color: #0060ff; -webkit-transition: all .4s; transition: all .4s; } } .subNav { position: fixed; width: 100%; background: #fff; z-index: 99999; top: 80px; -webkit-box-shadow: 0 4px 4px rgba(0,0,0,.3); box-shadow: 0 4px 4px rgba(0,0,0,.3); border-top: 1px solid #e4e4e4; -webkit-transform: translateY(-125%); transform: translateY(-125%); -webkit-transition: all .25s; transition: all .25s; display: none; } .subNav.show { display: block; } .subNav.open { -webkit-transform: none; transform: none; -webkit-transition: all .25s; transition: all .25s; } .subNav .subNavContainer { position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; padding: 30px 16px; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .subNav .subNavContainer.small { max-width: 576px; } .subNav .subNavContainer .featuredService { display: inline-block; max-width: 520px; -ms-flex-preferred-size: calc(50% - 10px); flex-basis: calc(50% - 10px); -webkit-transform: none; transform: none; -webkit-transition: all .4s; transition: all .4s; } .subNav .subNavContainer .featuredService img { width: 100%; border-radius: 10px 10px 0 0; -webkit-filter: brightness(100%); filter: brightness(100%); -webkit-transition: all .4s; transition: all .4s; } .subNav .subNavContainer .featuredService i { color: #0697d4; margin-top: 24px; display: block; } .subNav .subNavContainer .featuredService i:after { content: ""; background: url("/img/arrow.png"); width: 24px; height: 10px; margin: 7px 0 0 10px; position: absolute; background-size: 100%; background-repeat: no-repeat; -webkit-transform: none; transform: none; -webkit-transition: all .4s; transition: all .4s; } .subNav .subNavContainer .featuredService:hover { -webkit-transform: translateY(-3px); transform: translateY(-3px); -webkit-transition: all .4s; transition: all .4s; } .subNav .subNavContainer .featuredService:hover img { -webkit-filter: brightness(108%); filter: brightness(108%); -webkit-transition: all .4s; transition: all .4s; } .subNav .subNavContainer .featuredService:hover i:after { -webkit-transform: translateX(6px); transform: translateX(6px); } .subNav .subNavContainer .subNavContentContainer { max-width: 520px; -ms-flex-preferred-size: calc(50% - 10px); flex-basis: calc(50% - 10px); } .subNav .subNavContainer .subNavContentContainer h2, .subNav .subNavContainer .subNavContentContainer h4 { border-bottom: 1px solid #c4c4c4; font-size: 21px; text-align: left; margin: 0; padding: 0; padding-bottom: 4px; } .subNav .subNavContainer .subNavContentContainer h2 a, .subNav .subNavContainer .subNavContentContainer h4 a { color: #000; -webkit-transition: all .4s; transition: all .4s; } .subNav .subNavContainer .subNavContentContainer h2 a:hover, .subNav .subNavContainer .subNavContentContainer h4 a:hover { color: #0697d4; -webkit-transition: all .4s; transition: all .4s; } .subNav .subNavContainer .subNavContentContainer ul { list-style: none; padding: 20px 0; } .subNav .subNavContainer .subNavContentContainer ul li { width: calc(50% - 10px); display: inline-block; vertical-align: top; margin-bottom: 5px; color: #000; -webkit-transition: all .4s; transition: all .4s; } @media only screen and (min-width: 768px) { .subNav .subNavContainer .subNavContentContainer ul li:nth-child(odd) { margin-right: 15px; } } .subNav .subNavContainer .subNavContentContainer ul li a { color: #888; margin: 5px 0; -webkit-transition: all .4s; transition: all .4s; } .subNav .subNavContainer .subNavContentContainer ul a:hover, .subNav .subNavContainer .subNavContentContainer ul li:hover { color: #0697d4; -webkit-transition: all .4s; transition: all .4s; } .mobileNav { display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: #222; padding: 30px; -webkit-transition: all .4s; transition: all .4s; z-index: 999999; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: all .2s; transition: all .2s; min-height: calc(100% + 80px); } .mobileNav ul { list-style: none; color: #fff; } .mobileNav .topLevel { -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: all .4s; transition: all .4s; } .mobileNav .topLevel ul { padding-top: 90px; } .mobileNav .topLevel ul li { font-size: 32px; margin-bottom: 20px; position: relative; cursor: pointer; } .mobileNav .topLevel ul li a { display: block; color: #fff; } .mobileNav .topLevel ul li:last-child { margin-bottom: 0; } .mobileNav .topLevel ul li:first-child:after, .mobileNav .topLevel ul li:nth-child(2):after { content: ""; background: url("/img/arrow(white).png"); width: 30px; height: 12px; background-repeat: no-repeat; background-size: 100%; position: absolute; right: 2px; margin-top: 12px; } .mobileNav .subLevel { -webkit-transform: translateX(-110%); transform: translateX(-110%); -webkit-transition: all .2s; transition: all .2s; position: fixed; top: 0; right: 0; left: 0; bottom: 0; background: #222; padding: 30px; overflow-y: scroll; padding-top: 100px; } .mobileNav .subLevel.subNavOpen { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: all .2s; transition: all .2s; } .mobileNav .subLevel .subNavClose { position: absolute; top: 50px; left: 30px; width: 42px; cursor: pointer; } .mobileNav .subLevel h2, .mobileNav .subLevel h4 { margin: 0; text-align: left; padding: 0; color: #fff; font-size: 24px; padding-bottom: 5px; border-bottom: 1px solid #fff; margin-bottom: 15px; } .mobileNav .subLevel h2 a, .mobileNav .subLevel h4 a { color: #fff; font-size: 24px; } .mobileNav .subLevel ul { margin-bottom: 40px; } .mobileNav .subLevel ul li { margin-bottom: 5px; } .mobileNav .subLevel ul li a { color: #fff; font-size: 21px; } .mobileNav.show { display: block; } .mobileNav.open { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: all .2s; transition: all .2s; z-index: 20000000000; } .mobileNav.open .topLevel { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: all .2s; transition: all .2s; } .mobileNav .mobileNavClose { width: 35px; position: fixed; top: 0; right: 0; cursor: pointer; } .mobileNav .subLevel .featuredService { display: inline-block; max-width: 520px; padding-bottom: 120px; } .mobileNav .subLevel .featuredService img { width: 100%; border-radius: 10px 10px 0 0; } .mobileNav .subLevel .featuredService i { color: #fff; margin-top: 5px; display: block; font-size: 14px; } .mobileNav .subLevel .featuredService i:after { content: ""; background: url("/img/arrow(white).png"); width: 20px; height: 10px; margin: 5px 0 0 10px; position: absolute; background-size: 100%; background-repeat: no-repeat; -webkit-transform: none; transform: none; -webkit-transition: all .4s; transition: all .4s; } @-webkit-keyframes pageSpinOne { 0% { bottom: -300px; -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } to { bottom: 250px; -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes pageSpinOne { 0% { bottom: -300px; -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } to { bottom: 250px; -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes pageSpinTwo { 0% { bottom: -300px; -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } to { bottom: 160px; -webkit-transform: rotate(8deg); transform: rotate(8deg); } } @keyframes pageSpinTwo { 0% { bottom: -300px; -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } to { bottom: 160px; -webkit-transform: rotate(8deg); transform: rotate(8deg); } } @-webkit-keyframes pageSpinThree { 0% { bottom: -300px; -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } to { bottom: -40px; -webkit-transform: rotate(-22deg); transform: rotate(-22deg); } } @keyframes pageSpinThree { 0% { bottom: -300px; -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } to { bottom: -40px; -webkit-transform: rotate(-22deg); transform: rotate(-22deg); } } header { background: url("/img/hero3.jpg") right/cover; background-size: cover; background-position: 100% 50%; } @media only screen and (max-width: 1024px) { header { background: url("/img/hero3.jpg") left/cover; background-position: 0% 0%; } } header .heroContainer { position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; text-align: left; padding: 150px 16px 80px; } header .heroContainer.small { max-width: 576px; } header .heroContainer h1, header .heroContainer p { color: #000; } header .heroContainer h1 { font-size: 58px; line-height: 100%; margin-bottom: 34px; } header .heroContainer p { font-size: 21px; max-width: 540px; } header .heroContainer .btn { margin: 10px 0 0; padding: 15px 25px; background: #506cf8; color: #fff; border: 1px solid #506cf8; } header .heroContainer .btn:hover { background: transparent; color: #506cf8; opacity: 1; } header .heroContainer .btn.btn-inverted { color: #506cf8; background: transparent; border: 1px solid #506cf8; } header .heroContainer .btn.btn-inverted:hover { background: #506cf8; color: #f4ccdb; opacity: 1; } header .heroContainer .btn.second { margin-left: 20px; } @media only screen and (max-width: 768px) { header .heroContainer { text-align: center; padding: 130px 15px 30px; } header .heroContainer h1 { font-size: 9vw; } header .heroContainer p { margin: auto; } header .heroContainer .btn { margin-top: 20px; } header .heroContainer .btn.second { margin-left: 0; } } header #header_video { position: absolute; top: 207px; right: 173px; max-height: 225px; z-index: 999; border-radius: 10px; } @media only screen and (max-width: 1024px) { header #header_video { display: none; } } header.hero { background: #007fb8; background: -webkit-gradient(linear,left top,right top,from(#007fb8),to(#01a1fd)); background: linear-gradient(90deg,#007fb8 0%,#01a1fd 100%); padding: 0 16px!important; overflow: hidden; } header.hero .heroInnerContainer { display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; padding: 100px 16px 40px; } header.hero .heroInnerContainer.small { max-width: 576px; } @media only screen and (max-width: 1024px) { header.hero .heroInnerContainer { -ms-flex-wrap: wrap; flex-wrap: wrap; padding-top: 60px; padding-bottom: 20px; } } header.hero .heroImage { position: absolute; right: 0; width: 600px; margin-top: -50px; } header.hero .heroImage .email, header.hero .heroImage .server { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation: float1 8s ease-in-out infinite; animation: float1 8s ease-in-out infinite; } header.hero .heroImage .app-development, header.hero .heroImage .web-design { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation: float2 7s ease-in-out infinite; animation: float2 7s ease-in-out infinite; } header.hero .heroImage .web-design { -webkit-transform-origin: 530px 215px; transform-origin: 530px 215px; -webkit-animation-delay: .4s; animation-delay: .4s; } header.hero .heroImage .email { -webkit-transform-origin: 385px 45px; transform-origin: 385px 45px; -webkit-animation-delay: .2s; animation-delay: .2s; } header.hero .heroImage .app-development { -webkit-transform-origin: 97px 107px; transform-origin: 97px 107px; -webkit-animation-delay: .6s; animation-delay: .6s; } header.hero .heroImage .server { -webkit-transform-origin: 45px 250px; transform-origin: 45px 250px; } @media only screen and (min-width: 1025px) { header.hero .heroImage .globe, header.hero .heroImage .screen { display: none; } } @media only screen and (max-width: 1024px) { header.hero .heroImage { position: relative; margin: 40px auto -10vw; width: 100%; max-width: 600px; } } @media only screen and (max-width: 768px) { header.hero .heroImage { margin-bottom: -15vw; } } header.hero .heroContainer { max-width: calc(100% - 620px); padding: 0!important; margin: 0 40px 0 0; } @media only screen and (max-width: 1024px) { header.hero .heroContainer { max-width: 100%; text-align: center; margin: 0; } header.hero .heroContainer p { margin: 20px auto; } } header.hero .heroContainer h1 { color: #fff; } header.hero .heroContainer p { color: #fff; } header.hero .heroContainer .button-container { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 30px; } @media only screen and (max-width: 1070px) { header.hero .heroContainer .button-container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } header.hero .heroContainer .button-container .btn { margin: 0; } header.hero .heroContainer .button-container a:not(.btn) { color: #fff; text-transform: uppercase; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all .3s; transition: all .3s; } header.hero .heroContainer .button-container a:not(.btn):hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-transition: all .3s; transition: all .3s; } header.hero .heroContainer .btn { color: #fff; border: 1px solid #fff; background: transparent; -webkit-transition: all .3s; transition: all .3s; } header.hero .heroContainer .btn:hover { color: #000; background: rgba(255,255,255,.7); -webkit-transition: all .3s; transition: all .3s; } header:not(.subPageHeader) { margin-top: 70px; overflow: visible; } header:not(.subPageHeader) .heroContainer { padding-top: 110px; } @media only screen and (max-width: 1130px) { header:not(.subPageHeader) .heroContainer { padding: 60px 15px 40px; } } @media only screen and (max-width: 560px) { header:not(.subPageHeader) { margin-bottom: -5px; } } header.subPageHeader { background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,.6))),url("/img/subpage-header.jpg") center/cover; background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url("/img/subpage-header.jpg") center/cover; } header.subPageHeader .heroContainer { text-align: center; } header.subPageHeader .heroContainer h1 { margin-bottom: 0; } header.subPageHeader .heroContainer h1, header.subPageHeader .heroContainer p { color: #fff; } .web-design header { background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,.6))),url("/img/headers/design.jpg") center/cover; background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url("/img/headers/design.jpg") center/cover; margin-top: 80px; } .web-design header .heroContainer { padding: 80px 20px; } @media only screen and (max-width: 768px) { .web-design header .heroContainer { padding: 40px 10px!important; } } .seattle-web-design header { background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,.6))),url("/img/promo/seattle-web-design-hero.jpg") center/cover; background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url("/img/promo/seattle-web-design-hero.jpg") center/cover; margin-top: 80px; } .seattle-web-design header .heroContainer { padding: 150px 20px; } @media only screen and (max-width: 768px) { .seattle-web-design header .heroContainer { padding: 40px!important; } } .bellevue-web-design header { background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,.6))),url("/img/promo/bellevue-web-design-hero.jpg") center/cover; background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url("/img/promo/bellevue-web-design-hero.jpg") center/cover; margin-top: 80px; } .bellevue-web-design header .heroContainer { padding: 150px 20px; } @media only screen and (max-width: 768px) { .bellevue-web-design header .heroContainer { padding: 40px!important; } } .san-diego-town-special header, .san-diego-web-design header { background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.4)),to(rgba(0,0,0,.4))),url("/img/promo/san-diego-web-design-hero.jpg") center/cover; background: linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),url("/img/promo/san-diego-web-design-hero.jpg") center/cover; margin-top: 80px; } .san-diego-town-special header .heroContainer, .san-diego-web-design header .heroContainer { padding: 150px 20px; } @media only screen and (max-width: 768px) { .san-diego-town-special header .heroContainer, .san-diego-web-design header .heroContainer { padding: 40px!important; } } .brand-design header { background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,.6))),url("/img/headers/graphic-design.jpg") center/cover; background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url("/img/headers/graphic-design.jpg") center/cover; margin-top: 80px; } .brand-design header .heroContainer { padding-top: 80px; } @media only screen and (max-width: 768px) { .brand-design header .heroContainer { padding: 40px 10px!important; } } .development header { background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,.6))),url("/img/headers/development.jpg") center/cover; background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url("/img/headers/development.jpg") center/cover; margin-top: 80px; } .development header .heroContainer { padding-top: 80px; } @media only screen and (max-width: 768px) { .development header .heroContainer { padding: 40px 10px!important; } } .support header { background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,.6))),url("/img/headers/support.jpg") center/cover; background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url("/img/headers/support.jpg") center/cover; margin-top: 80px; } .support header .heroContainer { padding-top: 80px; } @media only screen and (max-width: 768px) { .support header .heroContainer { padding: 40px 10px!important; } } .marketing header, .marketing-free-quote header, .marketing-special header { background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,.6))),url("/img/headers/marketing.jpg") center/cover; background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url("/img/headers/marketing.jpg") center/cover; margin-top: 80px; } .marketing header .heroContainer, .marketing-free-quote header .heroContainer, .marketing-special header .heroContainer { padding-top: 80px; } @media only screen and (max-width: 768px) { .marketing header .heroContainer, .marketing-free-quote header .heroContainer, .marketing-special header .heroContainer { padding: 40px 10px!important; } } .localization header { background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,.6))),url("/img/headers/localization.jpg") center/cover; background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url("/img/headers/localization.jpg") center/cover; margin-top: 80px; } .localization header .heroContainer { padding-top: 80px; } @media only screen and (max-width: 768px) { .localization header .heroContainer { padding: 40px 10px!important; } } .blog header { background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,.6))),url("/img/headers/blog.jpg") center/cover; background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url("/img/headers/blog.jpg") center/cover; margin-top: 80px; } .blog header .heroContainer { padding-top: 80px; } @media only screen and (max-width: 768px) { .blog header .heroContainer { padding: 40px 10px!important; } } .tools header { background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,.6))),url("/img/headers/tools.jpg") center/cover; background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url("/img/headers/tools.jpg") center/cover; margin-top: 80px; } .tools header .heroContainer { padding-top: 80px; } @media only screen and (max-width: 768px) { .tools header .heroContainer { padding: 40px 10px!important; } } .hosting header { background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,.6))),url("/img/headers/hosting.jpg") center/cover; background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url("/img/headers/hosting.jpg") center/cover; margin-top: 80px; } .hosting header .heroContainer { padding-top: 80px; } @media only screen and (max-width: 768px) { .hosting header .heroContainer { padding: 40px 10px!important; } } .community header { background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,.6))),url("/img/headers/community.jpg") center/cover; background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url("/img/headers/community.jpg") center/cover; margin-top: 80px; } .community header .heroContainer { padding-top: 80px; } @media only screen and (max-width: 768px) { .community header .heroContainer { padding: 40px 10px!important; } } .contact header { background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,.6))),url("/img/headers/contact.jpg") center/cover; background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url("/img/headers/contact.jpg") center/cover; margin-top: 80px; } .contact header .heroContainer { padding-top: 80px; } @media only screen and (max-width: 768px) { .contact header .heroContainer { padding: 40px 10px!important; } } .ecommerce header { background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,.6))),url("/img/headers/eCommerce.jpg") center/cover; background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url("/img/headers/eCommerce.jpg") center/cover; margin-top: 80px; } .ecommerce header .heroContainer { padding: 80px 20px; } @media only screen and (max-width: 768px) { .ecommerce header .heroContainer { padding: 40px 10px!important; } } .content-creation header { background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,.6))),url("/img/headers/content-creation.jpg") center/cover; background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url("/img/headers/content-creation.jpg") center/cover; margin-top: 80px; } .content-creation header .heroContainer { padding: 80px 20px; } @media only screen and (max-width: 768px) { .content-creation header .heroContainer { padding: 40px 10px!important; } } .vps header { background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,.6))),url("/img/headers/virtual-private-servers.jpg") center/cover; background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url("/img/headers/virtual-private-servers.jpg") center/cover; margin-top: 80px; } .vps header .heroContainer { padding: 80px 20px; } @media only screen and (max-width: 768px) { .vps header .heroContainer { padding: 40px 10px!important; } } .events header { background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,.6))),url("/img/headers/events.jpg") center/cover; background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url("/img/headers/events.jpg") center/cover; margin-top: 80px; } .events header .heroContainer { padding: 80px 20px; } @media only screen and (max-width: 768px) { .events header .heroContainer { padding: 40px 10px!important; } } footer { background: #ededed; width: 100%; padding: 20px 0; } footer a { color: #000!important; } @media only screen and (max-width: 560px) { footer { padding: 0; } } footer .tier01, footer .tier02, footer .tier03 { position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; display: -ms-flexbox; display: -webkit-box; display: flex; padding: 22px 16px; } footer .tier01.small, footer .tier02.small, footer .tier03.small { max-width: 576px; } @media only screen and (max-width: 560px) { footer .tier01, footer .tier02, footer .tier03 { -ms-flex-wrap: wrap; flex-wrap: wrap; } } footer .tier01, footer .tier02 { border-bottom: 1px solid #d7d7d7; } footer h3, footer h4 { text-transform: uppercase; font-size: 14px; margin-bottom: 20px; } @media only screen and (max-width: 560px) { footer h3, footer h4 { margin-top: 40px; } footer h3.sectionStart, footer h4.sectionStart { margin-top: 0; } } footer a, footer li, footer p { font-size: 14px; } footer ul { list-style: none; } footer li { margin-bottom: 8px; } footer li:last-child { margin-bottom: 0; } footer a:hover { text-decoration: underline; } footer .tier01 .newsletter { width: 60%; padding-right: 15px; } footer .tier01 .newsletter .sub button, footer .tier01 .newsletter .sub input { padding: 6px 12px; font-family: "Roboto",sans-serif; font-size: 16px; border-radius: 4px; font-weight: 300; } footer .tier01 .newsletter .sub input { width: calc(100% - 120px); border: none; background: #fff; color: #505557; margin-bottom: 20px; } footer .tier01 .newsletter .sub button { -webkit-transition: all .4s; transition: all .4s; background: #a9a9a9; border: 1px solid #a9a9a9; color: #fff; margin-left: 10px; } footer .tier01 .newsletter .sub button:hover { background: transparent; color: #000; border: 1px solid #000; cursor: pointer; -webkit-transition: all .4s; transition: all .4s; } @media only screen and (max-width: 560px) { footer .tier01 .newsletter { width: 100%; padding: 0; } } footer .tier01 .contact { width: 40%; padding-left: 15px; } footer .tier01 .contact #social-footer { margin-top: 20px; } footer .tier01 .contact .sn-icons { width: 40px; height: 40px; display: inline-block; cursor: pointer; margin: 0 5px 5px 0; background-size: 100%; -webkit-transition: all .2s; transition: all .2s; } footer .tier01 .contact .sn-icons a { width: 40px; height: 40px; display: block; } footer .tier01 .contact .sn-icons:hover { -webkit-transform: translateY(-3px); transform: translateY(-3px); -webkit-transition: all .2s; transition: all .2s; } @media only screen and (max-width: 400px) { footer .tier01 .contact .sn-icons { width: 11vw; height: 11vw; } footer .tier01 .contact .sn-icons a { width: 11vw; height: 11vw; } } footer .tier01 .contact #youtube { background-image: url(/img/icon_youtube.png); } footer .tier01 .contact #facebook { background-image: url(/img/icon_facebook.png); } footer .tier01 .contact #twitter { background-image: url(/img/icon_twitter.png); } footer .tier01 .contact #bloguru { background-image: url(/img/icon_bloguru.png); } footer .tier01 .contact #linkedin { background-image: url(/img/icon_linkedin.png); } footer .tier01 .contact #insta { background-image: url(/img/icon_instagram.png); } @media only screen and (max-width: 560px) { footer .tier01 .contact { width: 100%; padding: 0; } } footer .tier02 div { width: 25%; padding: 0 5px; } footer .tier02 div:first-child { padding-left: 0; } footer .tier02 div:last-child { padding-right: 0; } @media only screen and (max-width: 560px) { footer .tier02 div { width: 100%; padding: 0; } } footer .tier03 { text-align: center; } footer .tier03 .lang_sec { width: 100%; } footer .tier03 .lang_sec a#lang_eng, footer .tier03 .lang_sec a#lang_jpn { display: inline-block; padding: 4px 10px 4px 30px; margin-bottom: 10px; } footer .tier03 .lang_sec a#lang_jpn { background: url(/img/icon-jp.gif) no-repeat 0 transparent; } footer .tier03 .lang_sec a#lang_eng { background: url(/img/icon-us.gif) no-repeat 0 transparent; } footer .tier03 .lang_sec p a { text-decoration: underline; } footer .tier03 .lang_sec p a:hover { text-decoration: none; } .wpcc-banner.wpcc-bottom { z-index: 99999; } .anniversaryEmblem { position: absolute; width: 120px; right: 0; top: -34px; } .anniversaryEmblem img { width: 100%; } @media only screen and (max-width: 640px) { .anniversaryEmblem { width: 100px; display: inline-block; } } @media only screen and (max-width: 560px) { .anniversaryEmblem { position: relative; top: 24px; } } #contact_form { width: calc(50% - 20px); display: inline-block; margin-right: 15px; } @media only screen and (max-width: 640px) { #contact_form { width: 100%; margin: 20px auto; } } #contact_form, #partner_form, .emailIssuesForm, .generated-form, .newsletter_signup_form_container { max-width: 600px; } #contact_form :focus, #partner_form :focus, .emailIssuesForm :focus, .generated-form :focus, .newsletter_signup_form_container :focus { outline: none; } #contact_form p, #partner_form p, .emailIssuesForm p, .generated-form p, .newsletter_signup_form_container p { margin-bottom: 10px; text-align: center; } #contact_form .informakers-form, #contact_form .newsletterForm, #partner_form .informakers-form, #partner_form .newsletterForm, .emailIssuesForm .informakers-form, .emailIssuesForm .newsletterForm, .generated-form .informakers-form, .generated-form .newsletterForm, .newsletter_signup_form_container .informakers-form, .newsletter_signup_form_container .newsletterForm { color: #000; } #contact_form .informakers-form .error-message, #contact_form .newsletterForm .error-message, #partner_form .informakers-form .error-message, #partner_form .newsletterForm .error-message, .emailIssuesForm .informakers-form .error-message, .emailIssuesForm .newsletterForm .error-message, .generated-form .informakers-form .error-message, .generated-form .newsletterForm .error-message, .newsletter_signup_form_container .informakers-form .error-message, .newsletter_signup_form_container .newsletterForm .error-message { color: #d31f27; font-style: italic; font-size: 14px; font-weight: 300; margin-top: 5px; } #contact_form .informakers-form .input, #contact_form .newsletterForm .input, #partner_form .informakers-form .input, #partner_form .newsletterForm .input, .emailIssuesForm .informakers-form .input, .emailIssuesForm .newsletterForm .input, .generated-form .informakers-form .input, .generated-form .newsletterForm .input, .newsletter_signup_form_container .informakers-form .input, .newsletter_signup_form_container .newsletterForm .input { margin: 20px 0; position: relative; } #contact_form .informakers-form .input label, #contact_form .newsletterForm .input label, #partner_form .informakers-form .input label, #partner_form .newsletterForm .input label, .emailIssuesForm .informakers-form .input label, .emailIssuesForm .newsletterForm .input label, .generated-form .informakers-form .input label, .generated-form .newsletterForm .input label, .newsletter_signup_form_container .informakers-form .input label, .newsletter_signup_form_container .newsletterForm .input label { font-weight: 300; text-align: right; display: inline-block; width: calc(25% - 10px); margin: 7px 10px 7px 0; display: none; } #contact_form .informakers-form .input input, #contact_form .informakers-form .input textarea, #contact_form .newsletterForm .input input, #contact_form .newsletterForm .input textarea, #partner_form .informakers-form .input input, #partner_form .informakers-form .input textarea, #partner_form .newsletterForm .input input, #partner_form .newsletterForm .input textarea, .emailIssuesForm .informakers-form .input input, .emailIssuesForm .informakers-form .input textarea, .emailIssuesForm .newsletterForm .input input, .emailIssuesForm .newsletterForm .input textarea, .generated-form .informakers-form .input input, .generated-form .informakers-form .input textarea, .generated-form .newsletterForm .input input, .generated-form .newsletterForm .input textarea, .newsletter_signup_form_container .informakers-form .input input, .newsletter_signup_form_container .informakers-form .input textarea, .newsletter_signup_form_container .newsletterForm .input input, .newsletter_signup_form_container .newsletterForm .input textarea { border-radius: 4px; font-family: "Roboto",sans-serif; font-size: 18px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; border: 0; padding: 8px; border: 1px solid #a9aaab; } #contact_form .informakers-form .input input:focus, #contact_form .informakers-form .input textarea:focus, #contact_form .newsletterForm .input input:focus, #contact_form .newsletterForm .input textarea:focus, #partner_form .informakers-form .input input:focus, #partner_form .informakers-form .input textarea:focus, #partner_form .newsletterForm .input input:focus, #partner_form .newsletterForm .input textarea:focus, .emailIssuesForm .informakers-form .input input:focus, .emailIssuesForm .informakers-form .input textarea:focus, .emailIssuesForm .newsletterForm .input input:focus, .emailIssuesForm .newsletterForm .input textarea:focus, .generated-form .informakers-form .input input:focus, .generated-form .informakers-form .input textarea:focus, .generated-form .newsletterForm .input input:focus, .generated-form .newsletterForm .input textarea:focus, .newsletter_signup_form_container .informakers-form .input input:focus, .newsletter_signup_form_container .informakers-form .input textarea:focus, .newsletter_signup_form_container .newsletterForm .input input:focus, .newsletter_signup_form_container .newsletterForm .input textarea:focus { background: #fcfcfc; } #contact_form .informakers-form .input input::-webkit-input-placeholder, #contact_form .informakers-form .input textarea::-webkit-input-placeholder, #contact_form .newsletterForm .input input::-webkit-input-placeholder, #contact_form .newsletterForm .input textarea::-webkit-input-placeholder, #partner_form .informakers-form .input input::-webkit-input-placeholder, #partner_form .informakers-form .input textarea::-webkit-input-placeholder, #partner_form .newsletterForm .input input::-webkit-input-placeholder, #partner_form .newsletterForm .input textarea::-webkit-input-placeholder, .emailIssuesForm .informakers-form .input input::-webkit-input-placeholder, .emailIssuesForm .informakers-form .input textarea::-webkit-input-placeholder, .emailIssuesForm .newsletterForm .input input::-webkit-input-placeholder, .emailIssuesForm .newsletterForm .input textarea::-webkit-input-placeholder, .generated-form .informakers-form .input input::-webkit-input-placeholder, .generated-form .informakers-form .input textarea::-webkit-input-placeholder, .generated-form .newsletterForm .input input::-webkit-input-placeholder, .generated-form .newsletterForm .input textarea::-webkit-input-placeholder, .newsletter_signup_form_container .informakers-form .input input::-webkit-input-placeholder, .newsletter_signup_form_container .informakers-form .input textarea::-webkit-input-placeholder, .newsletter_signup_form_container .newsletterForm .input input::-webkit-input-placeholder, .newsletter_signup_form_container .newsletterForm .input textarea::-webkit-input-placeholder { color: #000; font-weight: 300; font-family: "Roboto",sans-serif; } #contact_form .informakers-form .input input::-moz-placeholder, #contact_form .informakers-form .input textarea::-moz-placeholder, #contact_form .newsletterForm .input input::-moz-placeholder, #contact_form .newsletterForm .input textarea::-moz-placeholder, #partner_form .informakers-form .input input::-moz-placeholder, #partner_form .informakers-form .input textarea::-moz-placeholder, #partner_form .newsletterForm .input input::-moz-placeholder, #partner_form .newsletterForm .input textarea::-moz-placeholder, .emailIssuesForm .informakers-form .input input::-moz-placeholder, .emailIssuesForm .informakers-form .input textarea::-moz-placeholder, .emailIssuesForm .newsletterForm .input input::-moz-placeholder, .emailIssuesForm .newsletterForm .input textarea::-moz-placeholder, .generated-form .informakers-form .input input::-moz-placeholder, .generated-form .informakers-form .input textarea::-moz-placeholder, .generated-form .newsletterForm .input input::-moz-placeholder, .generated-form .newsletterForm .input textarea::-moz-placeholder, .newsletter_signup_form_container .informakers-form .input input::-moz-placeholder, .newsletter_signup_form_container .informakers-form .input textarea::-moz-placeholder, .newsletter_signup_form_container .newsletterForm .input input::-moz-placeholder, .newsletter_signup_form_container .newsletterForm .input textarea::-moz-placeholder { color: #000; font-weight: 300; font-family: "Roboto",sans-serif; } #contact_form .informakers-form .input input:-ms-input-placeholder, #contact_form .informakers-form .input textarea:-ms-input-placeholder, #contact_form .newsletterForm .input input:-ms-input-placeholder, #contact_form .newsletterForm .input textarea:-ms-input-placeholder, #partner_form .informakers-form .input input:-ms-input-placeholder, #partner_form .informakers-form .input textarea:-ms-input-placeholder, #partner_form .newsletterForm .input input:-ms-input-placeholder, #partner_form .newsletterForm .input textarea:-ms-input-placeholder, .emailIssuesForm .informakers-form .input input:-ms-input-placeholder, .emailIssuesForm .informakers-form .input textarea:-ms-input-placeholder, .emailIssuesForm .newsletterForm .input input:-ms-input-placeholder, .emailIssuesForm .newsletterForm .input textarea:-ms-input-placeholder, .generated-form .informakers-form .input input:-ms-input-placeholder, .generated-form .informakers-form .input textarea:-ms-input-placeholder, .generated-form .newsletterForm .input input:-ms-input-placeholder, .generated-form .newsletterForm .input textarea:-ms-input-placeholder, .newsletter_signup_form_container .informakers-form .input input:-ms-input-placeholder, .newsletter_signup_form_container .informakers-form .input textarea:-ms-input-placeholder, .newsletter_signup_form_container .newsletterForm .input input:-ms-input-placeholder, .newsletter_signup_form_container .newsletterForm .input textarea:-ms-input-placeholder { color: #000; font-weight: 300; font-family: "Roboto",sans-serif; } #contact_form .informakers-form .input input::-ms-input-placeholder, #contact_form .informakers-form .input textarea::-ms-input-placeholder, #contact_form .newsletterForm .input input::-ms-input-placeholder, #contact_form .newsletterForm .input textarea::-ms-input-placeholder, #partner_form .informakers-form .input input::-ms-input-placeholder, #partner_form .informakers-form .input textarea::-ms-input-placeholder, #partner_form .newsletterForm .input input::-ms-input-placeholder, #partner_form .newsletterForm .input textarea::-ms-input-placeholder, .emailIssuesForm .informakers-form .input input::-ms-input-placeholder, .emailIssuesForm .informakers-form .input textarea::-ms-input-placeholder, .emailIssuesForm .newsletterForm .input input::-ms-input-placeholder, .emailIssuesForm .newsletterForm .input textarea::-ms-input-placeholder, .generated-form .informakers-form .input input::-ms-input-placeholder, .generated-form .informakers-form .input textarea::-ms-input-placeholder, .generated-form .newsletterForm .input input::-ms-input-placeholder, .generated-form .newsletterForm .input textarea::-ms-input-placeholder, .newsletter_signup_form_container .informakers-form .input input::-ms-input-placeholder, .newsletter_signup_form_container .informakers-form .input textarea::-ms-input-placeholder, .newsletter_signup_form_container .newsletterForm .input input::-ms-input-placeholder, .newsletter_signup_form_container .newsletterForm .input textarea::-ms-input-placeholder { color: #000; font-weight: 300; font-family: "Roboto",sans-serif; } #contact_form .informakers-form .input input::placeholder, #contact_form .informakers-form .input textarea::placeholder, #contact_form .newsletterForm .input input::placeholder, #contact_form .newsletterForm .input textarea::placeholder, #partner_form .informakers-form .input input::placeholder, #partner_form .informakers-form .input textarea::placeholder, #partner_form .newsletterForm .input input::placeholder, #partner_form .newsletterForm .input textarea::placeholder, .emailIssuesForm .informakers-form .input input::placeholder, .emailIssuesForm .informakers-form .input textarea::placeholder, .emailIssuesForm .newsletterForm .input input::placeholder, .emailIssuesForm .newsletterForm .input textarea::placeholder, .generated-form .informakers-form .input input::placeholder, .generated-form .informakers-form .input textarea::placeholder, .generated-form .newsletterForm .input input::placeholder, .generated-form .newsletterForm .input textarea::placeholder, .newsletter_signup_form_container .informakers-form .input input::placeholder, .newsletter_signup_form_container .informakers-form .input textarea::placeholder, .newsletter_signup_form_container .newsletterForm .input input::placeholder, .newsletter_signup_form_container .newsletterForm .input textarea::placeholder { color: #000; font-weight: 300; font-family: "Roboto",sans-serif; } #contact_form .informakers-form .input textarea, #contact_form .newsletterForm .input textarea, #partner_form .informakers-form .input textarea, #partner_form .newsletterForm .input textarea, .emailIssuesForm .informakers-form .input textarea, .emailIssuesForm .newsletterForm .input textarea, .generated-form .informakers-form .input textarea, .generated-form .newsletterForm .input textarea, .newsletter_signup_form_container .informakers-form .input textarea, .newsletter_signup_form_container .newsletterForm .input textarea { margin-bottom: 0; max-width: 100%; } #contact_form .informakers-form .input.select label, #contact_form .newsletterForm .input.select label, #partner_form .informakers-form .input.select label, #partner_form .newsletterForm .input.select label, .emailIssuesForm .informakers-form .input.select label, .emailIssuesForm .newsletterForm .input.select label, .generated-form .informakers-form .input.select label, .generated-form .newsletterForm .input.select label, .newsletter_signup_form_container .informakers-form .input.select label, .newsletter_signup_form_container .newsletterForm .input.select label { width: calc(50% - 14px); } #contact_form .informakers-form .input.select select, #contact_form .newsletterForm .input.select select, #partner_form .informakers-form .input.select select, #partner_form .newsletterForm .input.select select, .emailIssuesForm .informakers-form .input.select select, .emailIssuesForm .newsletterForm .input.select select, .generated-form .informakers-form .input.select select, .generated-form .newsletterForm .input.select select, .newsletter_signup_form_container .informakers-form .input.select select, .newsletter_signup_form_container .newsletterForm .input.select select { width: 100%; padding: 8px; padding-left: 4px; background: #fff; border: 1px solid #a9aaab; border-radius: 4px; font-family: "Roboto",sans-serif; font-size: 18px; color: #000; font-weight: 300; } #contact_form .informakers-form .input.select select:invalid, #contact_form .newsletterForm .input.select select:invalid, #partner_form .informakers-form .input.select select:invalid, #partner_form .newsletterForm .input.select select:invalid, .emailIssuesForm .informakers-form .input.select select:invalid, .emailIssuesForm .newsletterForm .input.select select:invalid, .generated-form .informakers-form .input.select select:invalid, .generated-form .newsletterForm .input.select select:invalid, .newsletter_signup_form_container .informakers-form .input.select select:invalid, .newsletter_signup_form_container .newsletterForm .input.select select:invalid { color: #999; } #contact_form .informakers-form .input.select select option, #contact_form .newsletterForm .input.select select option, #partner_form .informakers-form .input.select select option, #partner_form .newsletterForm .input.select select option, .emailIssuesForm .informakers-form .input.select select option, .emailIssuesForm .newsletterForm .input.select select option, .generated-form .informakers-form .input.select select option, .generated-form .newsletterForm .input.select select option, .newsletter_signup_form_container .informakers-form .input.select select option, .newsletter_signup_form_container .newsletterForm .input.select select option { color: #000; } #contact_form .informakers-form .input.checkbox-radio .form-label, #contact_form .newsletterForm .input.checkbox-radio .form-label, #partner_form .informakers-form .input.checkbox-radio .form-label, #partner_form .newsletterForm .input.checkbox-radio .form-label, .emailIssuesForm .informakers-form .input.checkbox-radio .form-label, .emailIssuesForm .newsletterForm .input.checkbox-radio .form-label, .generated-form .informakers-form .input.checkbox-radio .form-label, .generated-form .newsletterForm .input.checkbox-radio .form-label, .newsletter_signup_form_container .informakers-form .input.checkbox-radio .form-label, .newsletter_signup_form_container .newsletterForm .input.checkbox-radio .form-label { color: #000; font-weight: 300!important; font-family: "Roboto",sans-serif; font-size: 18px; display: block; margin-bottom: 10px; text-align: left; } #contact_form .informakers-form .input.checkbox-radio .form-label .requiredAsterisk, #contact_form .newsletterForm .input.checkbox-radio .form-label .requiredAsterisk, #partner_form .informakers-form .input.checkbox-radio .form-label .requiredAsterisk, #partner_form .newsletterForm .input.checkbox-radio .form-label .requiredAsterisk, .emailIssuesForm .informakers-form .input.checkbox-radio .form-label .requiredAsterisk, .emailIssuesForm .newsletterForm .input.checkbox-radio .form-label .requiredAsterisk, .generated-form .informakers-form .input.checkbox-radio .form-label .requiredAsterisk, .generated-form .newsletterForm .input.checkbox-radio .form-label .requiredAsterisk, .newsletter_signup_form_container .informakers-form .input.checkbox-radio .form-label .requiredAsterisk, .newsletter_signup_form_container .newsletterForm .input.checkbox-radio .form-label .requiredAsterisk { color: #000!important; margin-left: 3px; } #contact_form .informakers-form .input.checkbox-radio fieldset, #contact_form .newsletterForm .input.checkbox-radio fieldset, #partner_form .informakers-form .input.checkbox-radio fieldset, #partner_form .newsletterForm .input.checkbox-radio fieldset, .emailIssuesForm .informakers-form .input.checkbox-radio fieldset, .emailIssuesForm .newsletterForm .input.checkbox-radio fieldset, .generated-form .informakers-form .input.checkbox-radio fieldset, .generated-form .newsletterForm .input.checkbox-radio fieldset, .newsletter_signup_form_container .informakers-form .input.checkbox-radio fieldset, .newsletter_signup_form_container .newsletterForm .input.checkbox-radio fieldset { border: none; } #contact_form .informakers-form .input.checkbox-radio fieldset input, #contact_form .newsletterForm .input.checkbox-radio fieldset input, #partner_form .informakers-form .input.checkbox-radio fieldset input, #partner_form .newsletterForm .input.checkbox-radio fieldset input, .emailIssuesForm .informakers-form .input.checkbox-radio fieldset input, .emailIssuesForm .newsletterForm .input.checkbox-radio fieldset input, .generated-form .informakers-form .input.checkbox-radio fieldset input, .generated-form .newsletterForm .input.checkbox-radio fieldset input, .newsletter_signup_form_container .informakers-form .input.checkbox-radio fieldset input, .newsletter_signup_form_container .newsletterForm .input.checkbox-radio fieldset input { width: auto; } #contact_form .informakers-form .input.checkbox-radio fieldset label, #contact_form .newsletterForm .input.checkbox-radio fieldset label, #partner_form .informakers-form .input.checkbox-radio fieldset label, #partner_form .newsletterForm .input.checkbox-radio fieldset label, .emailIssuesForm .informakers-form .input.checkbox-radio fieldset label, .emailIssuesForm .newsletterForm .input.checkbox-radio fieldset label, .generated-form .informakers-form .input.checkbox-radio fieldset label, .generated-form .newsletterForm .input.checkbox-radio fieldset label, .newsletter_signup_form_container .informakers-form .input.checkbox-radio fieldset label, .newsletter_signup_form_container .newsletterForm .input.checkbox-radio fieldset label { display: inline-block; width: calc(100% - 45px); text-align: left; margin: 5px 10px 0 5px; color: #000; font-weight: 300; font-family: "Roboto",sans-serif; font-size: 18px; } #contact_form .informakers-form .input.fileupload, #contact_form .newsletterForm .input.fileupload, #partner_form .informakers-form .input.fileupload, #partner_form .newsletterForm .input.fileupload, .emailIssuesForm .informakers-form .input.fileupload, .emailIssuesForm .newsletterForm .input.fileupload, .generated-form .informakers-form .input.fileupload, .generated-form .newsletterForm .input.fileupload, .newsletter_signup_form_container .informakers-form .input.fileupload, .newsletter_signup_form_container .newsletterForm .input.fileupload { margin: 0; } #contact_form .informakers-form .input.fileupload label, #contact_form .newsletterForm .input.fileupload label, #partner_form .informakers-form .input.fileupload label, #partner_form .newsletterForm .input.fileupload label, .emailIssuesForm .informakers-form .input.fileupload label, .emailIssuesForm .newsletterForm .input.fileupload label, .generated-form .informakers-form .input.fileupload label, .generated-form .newsletterForm .input.fileupload label, .newsletter_signup_form_container .informakers-form .input.fileupload label, .newsletter_signup_form_container .newsletterForm .input.fileupload label { display: block; width: 100%; text-align: left; } #contact_form .informakers-form .input.fileupload input, #contact_form .newsletterForm .input.fileupload input, #partner_form .informakers-form .input.fileupload input, #partner_form .newsletterForm .input.fileupload input, .emailIssuesForm .informakers-form .input.fileupload input, .emailIssuesForm .newsletterForm .input.fileupload input, .generated-form .informakers-form .input.fileupload input, .generated-form .newsletterForm .input.fileupload input, .newsletter_signup_form_container .informakers-form .input.fileupload input, .newsletter_signup_form_container .newsletterForm .input.fileupload input { border: 0; } #contact_form .informakers-form .input input~.focus-border, #contact_form .informakers-form .input textarea~.focus-border, #contact_form .newsletterForm .input input~.focus-border, #contact_form .newsletterForm .input textarea~.focus-border, #partner_form .informakers-form .input input~.focus-border, #partner_form .informakers-form .input textarea~.focus-border, #partner_form .newsletterForm .input input~.focus-border, #partner_form .newsletterForm .input textarea~.focus-border, .emailIssuesForm .informakers-form .input input~.focus-border, .emailIssuesForm .informakers-form .input textarea~.focus-border, .emailIssuesForm .newsletterForm .input input~.focus-border, .emailIssuesForm .newsletterForm .input textarea~.focus-border, .generated-form .informakers-form .input input~.focus-border, .generated-form .informakers-form .input textarea~.focus-border, .generated-form .newsletterForm .input input~.focus-border, .generated-form .newsletterForm .input textarea~.focus-border, .newsletter_signup_form_container .informakers-form .input input~.focus-border, .newsletter_signup_form_container .informakers-form .input textarea~.focus-border, .newsletter_signup_form_container .newsletterForm .input input~.focus-border, .newsletter_signup_form_container .newsletterForm .input textarea~.focus-border { position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background-color: #0060ff; -webkit-transition: .4s; transition: .4s; } #contact_form .informakers-form .input textarea~.focus-border, #contact_form .newsletterForm .input textarea~.focus-border, #partner_form .informakers-form .input textarea~.focus-border, #partner_form .newsletterForm .input textarea~.focus-border, .emailIssuesForm .informakers-form .input textarea~.focus-border, .emailIssuesForm .newsletterForm .input textarea~.focus-border, .generated-form .informakers-form .input textarea~.focus-border, .generated-form .newsletterForm .input textarea~.focus-border, .newsletter_signup_form_container .informakers-form .input textarea~.focus-border, .newsletter_signup_form_container .newsletterForm .input textarea~.focus-border { bottom: 5px; } #contact_form .informakers-form .input input:focus~.focus-border, #contact_form .informakers-form .input textarea:focus~.focus-border, #contact_form .newsletterForm .input input:focus~.focus-border, #contact_form .newsletterForm .input textarea:focus~.focus-border, #partner_form .informakers-form .input input:focus~.focus-border, #partner_form .informakers-form .input textarea:focus~.focus-border, #partner_form .newsletterForm .input input:focus~.focus-border, #partner_form .newsletterForm .input textarea:focus~.focus-border, .emailIssuesForm .informakers-form .input input:focus~.focus-border, .emailIssuesForm .informakers-form .input textarea:focus~.focus-border, .emailIssuesForm .newsletterForm .input input:focus~.focus-border, .emailIssuesForm .newsletterForm .input textarea:focus~.focus-border, .generated-form .informakers-form .input input:focus~.focus-border, .generated-form .informakers-form .input textarea:focus~.focus-border, .generated-form .newsletterForm .input input:focus~.focus-border, .generated-form .newsletterForm .input textarea:focus~.focus-border, .newsletter_signup_form_container .informakers-form .input input:focus~.focus-border, .newsletter_signup_form_container .informakers-form .input textarea:focus~.focus-border, .newsletter_signup_form_container .newsletterForm .input input:focus~.focus-border, .newsletter_signup_form_container .newsletterForm .input textarea:focus~.focus-border { width: 99%; -webkit-transition: .4s; transition: .4s; left: 2px; } @media only screen and (max-width: 400px) { #contact_form .informakers-form .input label, #contact_form .newsletterForm .input label, #partner_form .informakers-form .input label, #partner_form .newsletterForm .input label, .emailIssuesForm .informakers-form .input label, .emailIssuesForm .newsletterForm .input label, .generated-form .informakers-form .input label, .generated-form .newsletterForm .input label, .newsletter_signup_form_container .informakers-form .input label, .newsletter_signup_form_container .newsletterForm .input label { width: 100%; text-align: left; margin-top: 15px; } #contact_form .informakers-form .input input, #contact_form .informakers-form .input textarea, #contact_form .newsletterForm .input input, #contact_form .newsletterForm .input textarea, #partner_form .informakers-form .input input, #partner_form .informakers-form .input textarea, #partner_form .newsletterForm .input input, #partner_form .newsletterForm .input textarea, .emailIssuesForm .informakers-form .input input, .emailIssuesForm .informakers-form .input textarea, .emailIssuesForm .newsletterForm .input input, .emailIssuesForm .newsletterForm .input textarea, .generated-form .informakers-form .input input, .generated-form .informakers-form .input textarea, .generated-form .newsletterForm .input input, .generated-form .newsletterForm .input textarea, .newsletter_signup_form_container .informakers-form .input input, .newsletter_signup_form_container .informakers-form .input textarea, .newsletter_signup_form_container .newsletterForm .input input, .newsletter_signup_form_container .newsletterForm .input textarea { width: 100%; max-width: 100%; } #contact_form .informakers-form .input.select label, #contact_form .newsletterForm .input.select label, #partner_form .informakers-form .input.select label, #partner_form .newsletterForm .input.select label, .emailIssuesForm .informakers-form .input.select label, .emailIssuesForm .newsletterForm .input.select label, .generated-form .informakers-form .input.select label, .generated-form .newsletterForm .input.select label, .newsletter_signup_form_container .informakers-form .input.select label, .newsletter_signup_form_container .newsletterForm .input.select label { width: 100%; text-align: left; } #contact_form .informakers-form .input.select select, #contact_form .newsletterForm .input.select select, #partner_form .informakers-form .input.select select, #partner_form .newsletterForm .input.select select, .emailIssuesForm .informakers-form .input.select select, .emailIssuesForm .newsletterForm .input.select select, .generated-form .informakers-form .input.select select, .generated-form .newsletterForm .input.select select, .newsletter_signup_form_container .informakers-form .input.select select, .newsletter_signup_form_container .newsletterForm .input.select select { width: 100%; } } #contact_form .informakers-form .input:not(.required) input::-webkit-input-placeholder:after, #contact_form .newsletterForm .input:not(.required) input::-webkit-input-placeholder:after, #partner_form .informakers-form .input:not(.required) input::-webkit-input-placeholder:after, #partner_form .newsletterForm .input:not(.required) input::-webkit-input-placeholder:after, .emailIssuesForm .informakers-form .input:not(.required) input::-webkit-input-placeholder:after, .emailIssuesForm .newsletterForm .input:not(.required) input::-webkit-input-placeholder:after, .generated-form .informakers-form .input:not(.required) input::-webkit-input-placeholder:after, .generated-form .newsletterForm .input:not(.required) input::-webkit-input-placeholder:after, .newsletter_signup_form_container .informakers-form .input:not(.required) input::-webkit-input-placeholder:after, .newsletter_signup_form_container .newsletterForm .input:not(.required) input::-webkit-input-placeholder:after { content: "- optional"; font-size: 14px; font-style: italic; } #contact_form .informakers-form .input:not(.required) input::-moz-placeholder:after, #contact_form .newsletterForm .input:not(.required) input::-moz-placeholder:after, #partner_form .informakers-form .input:not(.required) input::-moz-placeholder:after, #partner_form .newsletterForm .input:not(.required) input::-moz-placeholder:after, .emailIssuesForm .informakers-form .input:not(.required) input::-moz-placeholder:after, .emailIssuesForm .newsletterForm .input:not(.required) input::-moz-placeholder:after, .generated-form .informakers-form .input:not(.required) input::-moz-placeholder:after, .generated-form .newsletterForm .input:not(.required) input::-moz-placeholder:after, .newsletter_signup_form_container .informakers-form .input:not(.required) input::-moz-placeholder:after, .newsletter_signup_form_container .newsletterForm .input:not(.required) input::-moz-placeholder:after { content: "- optional"; font-size: 14px; font-style: italic; } #contact_form .informakers-form .input:not(.required) input:-ms-input-placeholder:after, #contact_form .newsletterForm .input:not(.required) input:-ms-input-placeholder:after, #partner_form .informakers-form .input:not(.required) input:-ms-input-placeholder:after, #partner_form .newsletterForm .input:not(.required) input:-ms-input-placeholder:after, .emailIssuesForm .informakers-form .input:not(.required) input:-ms-input-placeholder:after, .emailIssuesForm .newsletterForm .input:not(.required) input:-ms-input-placeholder:after, .generated-form .informakers-form .input:not(.required) input:-ms-input-placeholder:after, .generated-form .newsletterForm .input:not(.required) input:-ms-input-placeholder:after, .newsletter_signup_form_container .informakers-form .input:not(.required) input:-ms-input-placeholder:after, .newsletter_signup_form_container .newsletterForm .input:not(.required) input:-ms-input-placeholder:after { content: "- optional"; font-size: 14px; font-style: italic; } #contact_form .informakers-form .input:not(.required) input::-ms-input-placeholder:after, #contact_form .newsletterForm .input:not(.required) input::-ms-input-placeholder:after, #partner_form .informakers-form .input:not(.required) input::-ms-input-placeholder:after, #partner_form .newsletterForm .input:not(.required) input::-ms-input-placeholder:after, .emailIssuesForm .informakers-form .input:not(.required) input::-ms-input-placeholder:after, .emailIssuesForm .newsletterForm .input:not(.required) input::-ms-input-placeholder:after, .generated-form .informakers-form .input:not(.required) input::-ms-input-placeholder:after, .generated-form .newsletterForm .input:not(.required) input::-ms-input-placeholder:after, .newsletter_signup_form_container .informakers-form .input:not(.required) input::-ms-input-placeholder:after, .newsletter_signup_form_container .newsletterForm .input:not(.required) input::-ms-input-placeholder:after { content: "- optional"; font-size: 14px; font-style: italic; } #contact_form .informakers-form .input:not(.required) input::placeholder:after, #contact_form .newsletterForm .input:not(.required) input::placeholder:after, #partner_form .informakers-form .input:not(.required) input::placeholder:after, #partner_form .newsletterForm .input:not(.required) input::placeholder:after, .emailIssuesForm .informakers-form .input:not(.required) input::placeholder:after, .emailIssuesForm .newsletterForm .input:not(.required) input::placeholder:after, .generated-form .informakers-form .input:not(.required) input::placeholder:after, .generated-form .newsletterForm .input:not(.required) input::placeholder:after, .newsletter_signup_form_container .informakers-form .input:not(.required) input::placeholder:after, .newsletter_signup_form_container .newsletterForm .input:not(.required) input::placeholder:after { content: "- optional"; font-size: 14px; font-style: italic; } #contact_form .informakers-form .g-recaptcha, #contact_form .newsletterForm .g-recaptcha, #partner_form .informakers-form .g-recaptcha, #partner_form .newsletterForm .g-recaptcha, .emailIssuesForm .informakers-form .g-recaptcha, .emailIssuesForm .newsletterForm .g-recaptcha, .generated-form .informakers-form .g-recaptcha, .generated-form .newsletterForm .g-recaptcha, .newsletter_signup_form_container .informakers-form .g-recaptcha, .newsletter_signup_form_container .newsletterForm .g-recaptcha { width: 100%; } #contact_form .informakers-form .g-recaptcha div, #contact_form .newsletterForm .g-recaptcha div, #partner_form .informakers-form .g-recaptcha div, #partner_form .newsletterForm .g-recaptcha div, .emailIssuesForm .informakers-form .g-recaptcha div, .emailIssuesForm .newsletterForm .g-recaptcha div, .generated-form .informakers-form .g-recaptcha div, .generated-form .newsletterForm .g-recaptcha div, .newsletter_signup_form_container .informakers-form .g-recaptcha div, .newsletter_signup_form_container .newsletterForm .g-recaptcha div { margin: auto; } #contact_form .informakers-form .submit, #contact_form .newsletterForm .submit, #partner_form .informakers-form .submit, #partner_form .newsletterForm .submit, .emailIssuesForm .informakers-form .submit, .emailIssuesForm .newsletterForm .submit, .generated-form .informakers-form .submit, .generated-form .newsletterForm .submit, .newsletter_signup_form_container .informakers-form .submit, .newsletter_signup_form_container .newsletterForm .submit { display: inline-block; } #contact_form .informakers-form .submit input, #contact_form .newsletterForm .submit input, #partner_form .informakers-form .submit input, #partner_form .newsletterForm .submit input, .emailIssuesForm .informakers-form .submit input, .emailIssuesForm .newsletterForm .submit input, .generated-form .informakers-form .submit input, .generated-form .newsletterForm .submit input, .newsletter_signup_form_container .informakers-form .submit input, .newsletter_signup_form_container .newsletterForm .submit input { font-family: "Roboto",sans-serif; color: #fff; border: 1px solid #0060ff; background: #0060ff; -webkit-transition: all .4s; transition: all .4s; margin: 0 auto 40px; cursor: pointer; } #contact_form .informakers-form .submit input:hover, #contact_form .newsletterForm .submit input:hover, #partner_form .informakers-form .submit input:hover, #partner_form .newsletterForm .submit input:hover, .emailIssuesForm .informakers-form .submit input:hover, .emailIssuesForm .newsletterForm .submit input:hover, .generated-form .informakers-form .submit input:hover, .generated-form .newsletterForm .submit input:hover, .newsletter_signup_form_container .informakers-form .submit input:hover, .newsletter_signup_form_container .newsletterForm .submit input:hover { color: #0060ff; background: #fff; -webkit-transition: all .4s; transition: all .4s; } .cam-form .robotErr { text-align: center!important; } .cam-form #formSubmitButtonActive { margin: 20px 0 0 0; } #partner_form { margin: 0 auto; text-align: left; } #partner_form .g-recaptcha { width: inherit!important; } #partner_form #formSubmitButtonActive { margin: 20px 0 0 0; } #partner_form .thankYouMessage { margin: 50px 0 0 0; color: #1eaf0c; text-align: center; } .quoteContainer .generated-form { margin: auto; } .quoteContainer .generated-form .dependent { display: none; } .quoteContainer .g-recaptcha { margin: 20px auto; } .quoteContainer .submit { display: block!important; } .quoteContainer .submit input { display: block; margin: auto; } .quoteContainer fieldset input { margin-top: 9px; } .quoteContainer fieldset label { vertical-align: top; } .newsletter_signup_form_container { margin: auto; } .newsletter_signup_form_container .submit { display: block; text-align: center; width: 100%; } .newsletter_signup_form_container .submit button { margin: 5px auto 0; width: auto; } @media only screen and (max-width: 560px) { .submit { width: 100%; } .submit button, .submit input { width: 100%!important; } } .bloguru-paginator-link { text-decoration: none; color: #000; margin: .5em; color: #0697d4; } .bloguru-paginator-link.disabled { pointer-events: none; } .bloguru-paginator-link.current { font-weight: bold; color: #000; } .bloguru-paginator-container { text-align: center; margin-bottom: 2em; overflow: hidden; } @media only screen and (max-width: 400px) { .bloguru-paginator-container { font-size: 13px; } } .blogListing { max-width: 960px; } .blogListing .bloguru-post-container { margin: 30px auto; padding: 30px 0 0; border-top: 1px dashed #ccc; } .blogListing .bloguru-post-container:first-child { border-top: none; margin-top: 0; padding-top: 0; } .blogListing .bloguru-post-container .bloguru-post-listImage { float: left; max-width: 300px; margin: 0 20px 0 0; } .blogListing .bloguru-post-container .bloguru-post-listImage img { width: 100%; border-radius: 4px; } @media only screen and (max-width: 640px) { .blogListing .bloguru-post-container .bloguru-post-listImage { max-width: 100%; margin: 0 0 20px 0; float: none; } } .blogListing .bloguru-post-container .bloguru-post-text { max-width: calc(100% - 320px); float: right; } .blogListing .bloguru-post-container .bloguru-post-text .bloguru-post-date { font-style: italic; font-size: 14px; color: #ccc; } .blogListing .bloguru-post-container .bloguru-post-text .bloguru-post-title { margin: 2px 0 14px; } .blogListing .bloguru-post-container .bloguru-post-text .bloguru-post-excerpt { margin: 0; } @media only screen and (max-width: 640px) { .blogListing .bloguru-post-container .bloguru-post-text { max-width: 100%; float: none; } } .bloguru-post-body { max-width: 800px!important; margin: auto; } .bloguru-post-body .bloguru-post-date { font-size: 16px; font-style: italic; color: #ccc; margin-bottom: 10px; display: block; } .bloguru-post-body .bloguru-post-eyecatch-image-container { margin-bottom: 40px; } .bloguru-post-body .bloguru-post-eyecatch-image-container img { width: 100%; border-radius: 4px; } .bloguru-post-body ol, .bloguru-post-body ul { padding-left: 20px; } .bloguru-post-body img { max-width: 100%; } .bloguru-post-body h3, .bloguru-post-body h4, .bloguru-post-body h5, .bloguru-post-body h6 { margin-bottom: 10px; } #st-1 { top: 320px!important; } @media(max-width: 960px) { #st-1 { top: auto!important; } } body.jpnBody { font-family: "Roboto","Noto Sans JP",sans-serif; } body.jpnBody .service i:after { margin-top: 10px; } body.jpnBody .quoteContainer fieldset input { margin-top: 11px; } body.jpnBody .design .plansContainer .plan ul .fill { height: 24px; } @media only screen and (min-width: 961px) { body.jpnBody header.hero .heroContainer h1 { font-size: 52px; } } .productNav { list-style: none; position: fixed; top: 50%; left: -135px; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 9999; } .productNav li { text-transform: uppercase; -webkit-transition: all .4s; transition: all .4s; border: 1px solid #fff; left: 0; position: relative; } @media only screen and (min-width: 1131px) { .productNav li:hover { -webkit-transition: all .4s; transition: all .4s; left: 135px; } } .productNav li a { color: #fff; font-family: "Roboto",sans-serif; font-weight: 300; font-size: 19px; background: #a2cbe2; padding: 4px 8px; width: 180px; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .productNav li a:focus { color: #fff; } .productNav li a:hover { color: #fff!important; } .productNav li a img { width: 30px; margin-left: 10px; } .productNav li:first-child a { border-radius: 0 4px 0 0; } .productNav li:last-child a { border-radius: 0 0 4px 0; } @media only screen and (max-width: 1130px) { .productNav { -webkit-transform: none; transform: none; top: auto; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; max-width: 768px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .productNav li { left: auto; width: 20%; } .productNav li a { width: auto; display: block; text-align: center; padding: 42px 0 19px; font-size: 12px; } .productNav li a img { display: block; margin: auto; margin-top: -50px; } } @-webkit-keyframes toggleDrop { 0% { -webkit-transform: translateY(-36px); transform: translateY(-36px); } 85% { -webkit-transform: translateY(5px); transform: translateY(5px); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes toggleDrop { 0% { -webkit-transform: translateY(-36px); transform: translateY(-36px); } 85% { -webkit-transform: translateY(5px); transform: translateY(5px); } to { -webkit-transform: translateY(0); transform: translateY(0); } } .languageToggle { position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; padding: 0 16px; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 99998; } .languageToggle.small { max-width: 576px; } .languageToggle div { background: #fff; position: absolute; right: 16px; top: -40px; border: 1px solid #ccc; border-radius: 0 0 4px 4px; -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.2); box-shadow: 0 0 10px 0 rgba(0,0,0,.2); -webkit-transform: translateY(-36px); transform: translateY(-36px); -webkit-animation: toggleDrop .22s ease-in-out 1.1s forwards; animation: toggleDrop .22s ease-in-out 1.1s forwards; } .languageToggle div a { position: relative; display: block; float: right; padding: 5px 0 5px 30px; margin: 120px 6px 0 6px; font-size: 14px; color: #000; } .languageToggle div a.jpn { background: url(/img/icon-us.gif) no-repeat 0 transparent; } .languageToggle div a.eng { background: url(/img/icon-jp.gif) no-repeat 0 transparent; } body { color: #000; font-family: "Roboto",sans-serif; overflow-x: hidden; font-size: 18px; } body a, body a:focus { color: #0697d4; text-decoration: none; -webkit-transition: all .4s; transition: all .4s; } body a:focus:hover, body a:hover { color: #011b26; -webkit-transition: all .4s; transition: all .4s; } body p { font-weight: 300; line-height: 140%; margin-bottom: 14px; } body a, body li { line-height: initial; } body h2 { font-size: 32px; text-align: center; margin: 60px 0 20px; padding: 0 5px; } body .container h2 { padding: 0; } .promotion_container { position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; display: -ms-flexbox; display: -webkit-box; display: flex; height: auto; color: #fff; font-family: "Roboto",sans-serif; font-weight: 300; font-size: 13px; position: fixed; top: 0; z-index: 20; max-width: none; padding: 10px 15px; background: #d31f27; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .promotion_container.small { max-width: 576px; } .promotion_container span.code { color: #fff; font-weight: 900; } @media only screen and (max-width: 400px) { .promotion_container { font-size: 11px; } } .qr-disclaimer { display: block; padding: 10px; font-size: 12px!important; } section .container { position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px 0; margin: auto; } section .container.small { max-width: 576px; } section .container h1 { margin-bottom: 24px; } section .container h1.blue { color: #066aff; text-align: center; font-weight: 700; font-size: 1.7777777778em; } section .container p.centered { text-align: center; } @media only screen and (max-width: 767px) { section .container { padding: 40px 16px; } } section#timelineSection { background-color: #0060ff; background: radial-gradient(ellipse at bottom,#0060ff 0%,#002666 100%); } section#timelineSection .timeline_item { position: relative; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 646px; background-color: #fff; padding: 16px; margin: 32px auto; z-index: 1; opacity: 0; } section#timelineSection .timeline_item:first-child { margin-top: 0; } section#timelineSection .timeline_item:last-child { margin-bottom: 0; } section#timelineSection .timeline_item svg { width: 48px; margin-right: 16px; } section#timelineSection .timeline_item p { width: calc(100% - 48px); font-size: 1.1111111111em; } section#timelineSection .timeline_item.fade-in-element { animation: fadeInUp 2s forwards; -webkit-animation: fadeInUp 2s forwards; } section#timelineSection .dots2 { position: absolute; color: #fff; content: " "; background-color: transparent; height: 100%; position: absolute; top: 0; left: calc(50% - 2px); border-left: dotted 4px; -webkit-transition: all 7s; transition: all 7s; } section#timelineSection .dots2.hide { height: 0; } section.homepage.end { text-align: center; } section.homepage.end h1.year { text-align: center; font-size: 4em; color: #000; margin: 8px auto; } section.homepage.end p { margin: 8px auto; text-align: left; font-size: 1.1111111111em; } section.homepage.end p.today { text-align: center; font-size: 1em; } section.homepage.end svg { margin: 16px auto; } section.homepage.end a.btn { margin-top: 32px; display: inline-block; -webkit-transition: all .4s; transition: all .4s; text-decoration: none; padding: 6px 14px; -webkit-appearance: none; background: #fff; color: #000; border: 1px solid #000; border-radius: 4px; } section.homepage.end a.btn:hover { cursor: pointer; color: #fff; background: #000; } @media only screen and (max-width: 768px) { section.homepage.end a.btn { width: auto; display: block; } } section.homepage.end .dots3 { content: " "; background-color: transparent; height: 72px; position: absolute; top: 0; left: calc(50% - 2px); border-left: dotted 4px; } section.homepage.end .timeline_end.fade-in-element { animation: fadeInUp 2s forwards; -webkit-animation: fadeInUp 2s forwards; } section#order .container h1 { margin-bottom: 32px; } section#promotion p { font-size: 1.1111111111em; } section#promotion .container.list_container { padding: 40px 16px; max-width: 691px; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } section#promotion .container.list_container .item { -webkit-box-flex: 1; -ms-flex: 1 0 45%; flex: 1 0 45%; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 16px; } section#promotion .container.list_container .item svg { width: 38px; margin-right: 16px; } section#promotion .container.list_container .item p { display: inline-block; } section#promotion .container.graphic_container { max-width: 691px; padding: 40px 16px 24px; } section#promotion .container.graphic_container svg { width: 100%; } section#promotion .container.getting_started { padding: 24px 16px 48px; } section#promotion .container.getting_started p.bold { font-weight: 900; color: #000; margin: 32px 0 16px; } section#promotion .order_method_container { margin-top: 0; padding-bottom: 80px; } section .order_method_container { margin-top: 40px; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } section .order_method_container .method { width: 100%; max-width: 357px; margin: 0 16px; padding: 16px; border: solid #d6dae1; border-radius: 3px; } section .order_method_container .method p { margin: 8px 0; } section .order_method_container .method p.bold { color: #000; font-weight: 900; font-size: 1.1111111111em; } section .order_method_container .method p.time i { margin-right: 10px; } section .order_method_container .method p.phone_link { margin: 4px 0; } section .order_method_container .method p.phone_link a { display: inline-block; } section .order_method_container .method p.phone_link a:before { font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 10px; content: ""; } section .order_method_container .method a { color: #066aff; text-decoration: none; } section .order_method_container .method a span.underline { text-decoration: underline; } section .order_method_container .method a:hover span.underline { text-decoration: none; } @media only screen and (max-width: 768px) { section .order_method_container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } section .order_method_container .method { max-width: unset; margin: 16px auto; } } @media only screen and (max-width: 768px) { section .order_method_container.marketing { padding: 0 16px; } } section#development .slider_container { max-width: 564px; margin: auto; } section#development .slider_container .dev_slides p { font-size: .8888888889em; padding: 16px 0; text-align: center; } section#development .slider_container .dev_slides p a { text-decoration: underline; } section#development .slider_container .dev_slides img { border: solid 1px #d6dae1; width: 100%; cursor: -webkit-grab; cursor: grab; } section#development .slider_container .dev_slides .slick-arrow.slick-next:before, section#development .slider_container .dev_slides .slick-arrow.slick-prev:before { color: #505557; font-size: 30px; } section#development .slider_container .dev_slides .slick-arrow.slick-next:before:hover, section#development .slider_container .dev_slides .slick-arrow.slick-prev:before:hover { color: #e5e5e5; } section#development .slider_container .dev_slides .slick-arrow.slick-prev { left: -33px; } @media only screen and (max-width: 768px) { section#development .slider_container .dev_slides .slick-arrow { top: unset; bottom: -10%; } section#development .slider_container .dev_slides .slick-arrow.slick-prev { left: 0; } section#development .slider_container .dev_slides .slick-arrow.slick-next { right: 10px; } } .contactIntro { position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; max-width: 860px; padding-bottom: 0; } .contactIntro.small { max-width: 576px; } .contactIntro a { text-decoration: underline; } .contactIntro a:hover { text-decoration: none; } .contactIntro p { margin-bottom: 15px; } .contactIntro p:last-child { margin-bottom: 0; } .questionnaireIntro { position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; display: -ms-flexbox; display: -webkit-box; display: flex; padding-bottom: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .questionnaireIntro.small { max-width: 576px; } .questionnaireIntro img { max-width: 380px; float: left; margin-right: 30px; } .questionnaireIntro h1 { margin-bottom: 14px; } .questionnaireIntro p { font-size: 21px; } @media only screen and (max-width: 768px) { .questionnaireIntro { max-width: 600px; } .questionnaireIntro img { display: none; } } .questionnaireForm form { margin-top: 40px; } .questionnaireContainer { padding-top: 30px!important; } .contactForm, .emailIssuesForm { position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; max-width: 600px; } .contactForm.small, .emailIssuesForm.small { max-width: 576px; } .contactForm :focus, .emailIssuesForm :focus { outline: none; } .contactForm p, .emailIssuesForm p { margin-bottom: 10px; text-align: center; } .contactForm .generated-form, .emailIssuesForm .generated-form { color: #505557; } .contactForm .generated-form .error-message, .emailIssuesForm .generated-form .error-message { color: #d31f27; font-style: italic; font-size: 14px; font-weight: 300; margin-top: 5px; } .contactForm .generated-form .form-hint, .emailIssuesForm .generated-form .form-hint { font-size: 12px; font-style: italic; text-align: center; margin-bottom: 10px; display: block; } .contactForm .generated-form .input, .emailIssuesForm .generated-form .input { margin: 20px 0; position: relative; } .contactForm .generated-form .input label, .emailIssuesForm .generated-form .input label { font-weight: 300; text-align: right; display: inline-block; width: calc(25% - 10px); margin: 7px 10px 7px 0; display: none; } .contactForm .generated-form .input input, .contactForm .generated-form .input textarea, .emailIssuesForm .generated-form .input input, .emailIssuesForm .generated-form .input textarea { border-radius: 4px; font-family: "Roboto",sans-serif; font-size: 16px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; border: 0; padding: 8px; border: 1px solid #a9aaab; } .contactForm .generated-form .input input:focus, .contactForm .generated-form .input textarea:focus, .emailIssuesForm .generated-form .input input:focus, .emailIssuesForm .generated-form .input textarea:focus { background: #fcfcfc; } .contactForm .generated-form .input input::-webkit-input-placeholder, .contactForm .generated-form .input textarea::-webkit-input-placeholder, .emailIssuesForm .generated-form .input input::-webkit-input-placeholder, .emailIssuesForm .generated-form .input textarea::-webkit-input-placeholder { color: #505557; font-weight: 300; font-family: "Roboto",sans-serif; } .contactForm .generated-form .input input::-moz-placeholder, .contactForm .generated-form .input textarea::-moz-placeholder, .emailIssuesForm .generated-form .input input::-moz-placeholder, .emailIssuesForm .generated-form .input textarea::-moz-placeholder { color: #505557; font-weight: 300; font-family: "Roboto",sans-serif; } .contactForm .generated-form .input input:-ms-input-placeholder, .contactForm .generated-form .input textarea:-ms-input-placeholder, .emailIssuesForm .generated-form .input input:-ms-input-placeholder, .emailIssuesForm .generated-form .input textarea:-ms-input-placeholder { color: #505557; font-weight: 300; font-family: "Roboto",sans-serif; } .contactForm .generated-form .input input::-ms-input-placeholder, .contactForm .generated-form .input textarea::-ms-input-placeholder, .emailIssuesForm .generated-form .input input::-ms-input-placeholder, .emailIssuesForm .generated-form .input textarea::-ms-input-placeholder { color: #505557; font-weight: 300; font-family: "Roboto",sans-serif; } .contactForm .generated-form .input input::placeholder, .contactForm .generated-form .input textarea::placeholder, .emailIssuesForm .generated-form .input input::placeholder, .emailIssuesForm .generated-form .input textarea::placeholder { color: #505557; font-weight: 300; font-family: "Roboto",sans-serif; } .contactForm .generated-form .input textarea, .emailIssuesForm .generated-form .input textarea { margin-bottom: 0; max-width: 100%; } .contactForm .generated-form .input.select label, .emailIssuesForm .generated-form .input.select label { width: calc(50% - 14px); } .contactForm .generated-form .input.select select, .emailIssuesForm .generated-form .input.select select { width: 100%; padding: 8px; background: #fff; border: 1px solid #a9aaab; border-radius: 4px; font-family: "Roboto",sans-serif; font-size: 16px; color: #505557; font-weight: 300; } .contactForm .generated-form .input.select select:invalid, .emailIssuesForm .generated-form .input.select select:invalid { color: #999; } .contactForm .generated-form .input.select select option, .emailIssuesForm .generated-form .input.select select option { color: #000; } .contactForm .generated-form .input.radio .form-label, .emailIssuesForm .generated-form .input.radio .form-label { color: #505557; font-weight: 300!important; font-family: "Roboto",sans-serif; font-size: 16px; display: block; margin-bottom: 10px; } .contactForm .generated-form .input.radio .form-label .requiredAsterisk, .emailIssuesForm .generated-form .input.radio .form-label .requiredAsterisk { color: #505557!important; margin-left: 3px; } .contactForm .generated-form .input.radio fieldset, .emailIssuesForm .generated-form .input.radio fieldset { border: none; } .contactForm .generated-form .input.radio fieldset input, .emailIssuesForm .generated-form .input.radio fieldset input { width: auto; } .contactForm .generated-form .input.radio fieldset label, .emailIssuesForm .generated-form .input.radio fieldset label { display: inline-block; width: calc(100% - 45px); text-align: left; margin: 5px 10px 0 5px; color: #505557; font-weight: 300; font-family: "Roboto",sans-serif; font-size: 16px; } .contactForm .generated-form .input input~.focus-border, .contactForm .generated-form .input textarea~.focus-border, .emailIssuesForm .generated-form .input input~.focus-border, .emailIssuesForm .generated-form .input textarea~.focus-border { position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background-color: #0060ff; -webkit-transition: .4s; transition: .4s; } .contactForm .generated-form .input textarea~.focus-border, .emailIssuesForm .generated-form .input textarea~.focus-border { bottom: 4px; } .contactForm .generated-form .input input:focus~.focus-border, .contactForm .generated-form .input textarea:focus~.focus-border, .emailIssuesForm .generated-form .input input:focus~.focus-border, .emailIssuesForm .generated-form .input textarea:focus~.focus-border { width: 99%; -webkit-transition: .4s; transition: .4s; left: 2px; } @media only screen and (max-width: 400px) { .contactForm .generated-form .input label, .emailIssuesForm .generated-form .input label { width: 100%; text-align: left; margin-top: 15px; } .contactForm .generated-form .input input, .contactForm .generated-form .input textarea, .emailIssuesForm .generated-form .input input, .emailIssuesForm .generated-form .input textarea { width: 100%; max-width: 100%; } .contactForm .generated-form .input.select label, .emailIssuesForm .generated-form .input.select label { width: 100%; text-align: left; } .contactForm .generated-form .input.select select, .emailIssuesForm .generated-form .input.select select { width: 100%; } } .contactForm .generated-form .g-recaptcha, .emailIssuesForm .generated-form .g-recaptcha { width: 100%; } .contactForm .generated-form .g-recaptcha div, .emailIssuesForm .generated-form .g-recaptcha div { margin: auto; } .contactForm .generated-form .submit input, .emailIssuesForm .generated-form .submit input { padding: 6px 18px; font-family: "Roboto",sans-serif; color: #fff; border: 1px solid #0060ff; background: #0060ff; -webkit-transition: all .4s; transition: all .4s; font-size: 18px; border-radius: 4px; display: block; margin: 10px auto; font-weight: 300; cursor: pointer; clear: both; } .contactForm .generated-form .submit input:hover, .emailIssuesForm .generated-form .submit input:hover { color: #0060ff; background: #fff; -webkit-transition: all .4s; transition: all .4s; } .contactForm #map iframe, .emailIssuesForm #map iframe { width: 100%; } .emailSignUpContainer { position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; margin-bottom: 80px; } .emailSignUpContainer.small { max-width: 576px; } .emailSignUpContainer h1 { text-align: center; font-weight: 300; margin-bottom: 20px; } .emailSignUpContainer h1.fail { color: #0060ff; } .emailSignUpContainer h1.success { color: #008000; } .emailSignUpContainer p { text-align: center; font-weight: 300; } section.login { position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; max-width: 600px; } section.login.small { max-width: 576px; } section.login .lang-choice { text-align: center; } section.login .lang-choice ul { list-style: none; margin: 10px 0 40px; } section.login .lang-choice ul li { display: inline-block; margin: 4px; } section.login .lang-choice ul li a { padding: 6px 10px; border: 1px solid #0060ff; color: #0060ff; font-weight: 300; border-radius: 4px; } section.login .lang-choice ul li a.active-lang { background: #0060ff; color: #fff; } section.login .login .input { margin: 20px 0; position: relative; } section.login .login .input :focus { outline: none; } section.login .login .input label { font-weight: 300; text-align: right; display: inline-block; width: calc(25% - 10px); margin: 7px 10px 7px 0; display: none; } section.login .login .input input, section.login .login .input textarea { border-radius: 4px; font-family: "Roboto",sans-serif; font-size: 16px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; border: 0; padding: 8px; border: 1px solid #ccc; } section.login .login .input input:focus, section.login .login .input textarea:focus { background: #fcfcfc; } section.login .login .input input::-webkit-input-placeholder, section.login .login .input textarea::-webkit-input-placeholder { color: #999; font-weight: 300; font-family: "Roboto",sans-serif; } section.login .login .input input::-moz-placeholder, section.login .login .input textarea::-moz-placeholder { color: #999; font-weight: 300; font-family: "Roboto",sans-serif; } section.login .login .input input:-ms-input-placeholder, section.login .login .input textarea:-ms-input-placeholder { color: #999; font-weight: 300; font-family: "Roboto",sans-serif; } section.login .login .input input::-ms-input-placeholder, section.login .login .input textarea::-ms-input-placeholder { color: #999; font-weight: 300; font-family: "Roboto",sans-serif; } section.login .login .input input::placeholder, section.login .login .input textarea::placeholder { color: #999; font-weight: 300; font-family: "Roboto",sans-serif; } section.login .login .input textarea { margin-bottom: 0; max-width: 100%; } section.login .login .input.select label { width: calc(50% - 14px); } section.login .login .input.select select { width: 100%; padding: 8px; background: #fff; border: 1px solid #ccc; border-radius: 4px; font-family: "Roboto",sans-serif; font-size: 16px; color: #999; } section.login .login .input.select select:invalid { color: #999; } section.login .login .input.select select option { color: #000; } section.login .login .input input~.focus-border, section.login .login .input textarea~.focus-border { position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background-color: #0060ff; -webkit-transition: .4s; transition: .4s; } section.login .login .input textarea~.focus-border { bottom: 4px; } section.login .login .input input:focus~.focus-border, section.login .login .input textarea:focus~.focus-border { width: 99%; -webkit-transition: .4s; transition: .4s; left: 2px; } section.login .login .submit { width: 100%; text-align: center; } section.login .login .submit input { padding: 6px 18px; font-family: "Roboto",sans-serif; color: #fff; border: 1px solid #0060ff; background: #0060ff; -webkit-transition: all .4s; transition: all .4s; font-size: 18px; border-radius: 4px; display: block; margin: 10px auto; font-weight: 300; cursor: pointer; } section.login .login .submit input:hover { color: #0060ff; background: #fff; -webkit-transition: all .4s; transition: all .4s; } section.login .login .submit a { font-size: .8888888889em; font-style: italic; color: #505557; text-align: center; display: block; margin-bottom: 80px; } .supportContact h2, .supportContact h3 { color: #000; } .supportContact h2 { margin-bottom: 10px; font-weight: 300; } .supportContact h3 { font-weight: 300; margin: 15px 0 10px; } .supportContact span { display: block; margin: 5px 0; font-weight: 300; } .supportContact span.last-child { margin-bottom: 20px; } .supportContact p { margin-bottom: 15px; } .supportContact a { font-weight: 300; -webkit-transition: all .4s; transition: all .4s; text-decoration: underline; } .supportContact a:hover { color: #066aff; text-decoration: underline; } .supportResources { display: -ms-flexbox; display: -webkit-box; display: flex; position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 0; } .supportResources.small { max-width: 576px; } .supportResources .resourceSection { width: 33%; } .supportResources .resourceSection h3 { color: #000; font-weight: 300; margin-bottom: 15px; } .supportResources .resourceSection ul { list-style: none; font-weight: 300; } .supportResources .resourceSection ul li { color: #505557; line-height: 150%; } .supportResources .resourceSection ul li a { -webkit-transition: all .4s; transition: all .4s; } .supportResources .resourceSection ul li a:hover { color: #066aff; text-decoration: underline; } @media only screen and (max-width: 560px) { .supportResources { -ms-flex-wrap: wrap; flex-wrap: wrap; } .supportResources .resourceSection { margin-bottom: 1em; width: 100%; } } .help_nav { position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; padding-bottom: 0; } .help_nav.small { max-width: 576px; } .help_nav p { margin: 1em auto; color: #505557; font-weight: 900; } .help_nav p.go_to { color: #000; margin-bottom: .5em; } .help_nav ul { position: relative; width: 100%; } .help_nav ul li { font-size: 1em; list-style: none; margin-bottom: .5em; } .help_nav ul li a { -webkit-transition: all .4s; transition: all .4s; color: #343840; } .help_nav ul li a:hover { text-decoration: underline; color: #0060ff; } .help_nav ul li.go_to { margin-left: .5em; } .help_instructions_section { display: -ms-flexbox; display: -webkit-box; display: flex; position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; padding-top: 32px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .help_instructions_section.small { max-width: 576px; } .help_instructions_section h3, .help_instructions_section h4 { color: #000; font-weight: 900; } .help_instructions_section p.disclaimer { color: #d31f27; } .help_instructions_section .collapse h3 { margin-bottom: .75em; cursor: pointer; } .help_instructions_section .collapse ul { margin-left: 20px; display: none; } .help_instructions_section .collapse ul li { padding-top: 0; } .help_instructions_section ul { list-style: none; font-weight: 300; } .help_instructions_section ul .row { display: -ms-flexbox; display: -webkit-box; display: flex; position: relative; width: 100%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } @media only screen and (max-width: 768px) { .help_instructions_section ul .row { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .help_instructions_section ul .row .col li { margin-right: 20px; } .help_instructions_section ul .row .col li .bold { font-weight: 900; } .help_instructions_section ul li { line-height: 150%; padding: .5em 0 1em; } .help_instructions_section ul li a { -webkit-transition: all .4s; transition: all .4s; font-weight: 300; text-decoration: underline; } .help_instructions_section ul li a:hover { color: #0060ff; text-decoration: underline; } .help_instructions_section ul.setting p { padding-left: 1em; } .help_instructions_section ul.setting p.bold { color: #505557; font-weight: bold; padding-left: 0; } .help_instructions_section .support_image_container { width: 80%; margin: auto; } .help_instructions_section .support_image_container img { max-width: 100%; border: 2px solid #bcd6ff; } @media only screen and (max-width: 768px) { .help_instructions_section .support_image_container { width: 100%; } } .return_to_support_link { position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; padding-top: 0; line-height: 150%; margin: 0 auto; } .return_to_support_link.small { max-width: 576px; } .return_to_support_link a { -webkit-transition: all .4s; transition: all .4s; font-weight: 300; text-decoration: underline; } .return_to_support_link a:hover { color: #0060ff; text-decoration: underline; } .blogList { display: -ms-flexbox; display: -webkit-box; display: flex; position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; -ms-flex-wrap: wrap; flex-wrap: wrap; } .blogList.small { max-width: 576px; } .blogList .blog_list { list-style: none; width: 100%; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .blogList .blog_list .blog_link { width: calc(33% - 10px); border-radius: 10px; background: #d6dae1; margin-bottom: 40px; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-transition: all .4s; transition: all .4s; } .blogList .blog_list .blog_link .blog_entry .bimg { max-height: 320px; overflow-y: hidden; } .blogList .blog_list .blog_link .blog_entry .bimg img { width: 100%; border-radius: 10px 10px 0 0; -webkit-transition: all .4s; transition: all .4s; } .blogList .blog_list .blog_link .blog_entry .bcontent { padding: 15px; color: #505557; -webkit-transition: all .4s; transition: all .4s; } .blogList .blog_list .blog_link .blog_entry .bcontent .title_container .blog_title { margin-bottom: 5px; font-size: 18px; display: block; width: 100%; } .blogList .blog_list .blog_link .blog_entry .bcontent .title_container .date { margin-bottom: 10px; display: block; color: #999; font-size: 12px; } .blogList .blog_list .blog_link .blog_entry .bcontent .description { font-weight: 300; } .blogList .blog_list .blog_link:hover { -webkit-box-shadow: 0 10px 15px -10px rgba(0,0,0,.21),0 5px 40px -10px rgba(0,0,0,.1); box-shadow: 0 10px 15px -10px rgba(0,0,0,.21),0 5px 40px -10px rgba(0,0,0,.1); -webkit-transform: translateY(-3px); transform: translateY(-3px); -webkit-transition: all .4s; transition: all .4s; } .blogList .blog_list .blog_link:hover .blog_entry .bimg img { -webkit-filter: brightness(85%); filter: brightness(85%); -webkit-transition: all .4s; transition: all .4s; } .blogList .blog_list .blog_link:hover .blog_entry .bcontent { color: #000; -webkit-transition: all .4s; transition: all .4s; } @media only screen and (max-width: 560px) { .blogList .blog_list .blog_link { width: 100%; } } .blogList .post_container { width: 100%; } .blogList .post_container .post_img img { display: block; margin: auto; max-width: 100%; } .blogList .post_container .post_img span { text-align: center; display: block; margin: 5px 0 40px; font-size: 14px; color: #505557; font-style: italic; } .blogList .post_container h1 { font-family: "Roboto",sans-serif; font-weight: 300; color: #505557; margin-bottom: 5px; } .blogList .post_container .postDate { margin-bottom: 20px; color: #999; font-size: 12px; } .blogList .post_container .postContent { font-weight: 300; margin-bottom: 40px; } .blogList .pagination { text-align: center; width: 100%; margin-bottom: 60px; } .blogList .pagination a { color: #0060ff; font-size: 21px; font-weight: 300; line-height: 32px; -webkit-transition: all .4s; transition: all .4s; } .blogList .pagination a:hover { font-size: 22px; color: #3380ff; -webkit-transition: all .4s; transition: all .4s; } .knownIssuesContainer { position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; } .knownIssuesContainer.small { max-width: 576px; } .knownIssuesContainer h1 { font-family: "Roboto",sans-serif; font-weight: 300; color: #505557; margin-bottom: 40px; font-size: 18px; } .knownIssuesContainer .tab { position: relative; border: none; padding: 0; overflow: hidden; float: left; width: 100%; } .knownIssuesContainer .tab #tabList { list-style: none; } .knownIssuesContainer .tab #tabList li { cursor: pointer; margin: 0; text-decoration: none; } .knownIssuesContainer .tab #tabList li button { font-size: 18px; float: left; border: none; outline: none; padding: .8em; padding-top: .5em; padding-bottom: .6em; margin-right: 4px; background: #f1f1f1; cursor: pointer; margin: 0 3px; text-decoration: none; border-radius: 0; font-family: "Roboto",sans-serif; font-weight: 300; height: 45px; } .knownIssuesContainer .tab #tabList li button.active { background: #0060ff; color: #fff; } .knownIssuesContainer .tab #tabList li:first-child button { border-radius: 4px 4px 0 0; margin-left: 0; } .knownIssuesContainer .tab #tabList li.icon { display: none; border-top-right-radius: 4px; height: 45px; width: 50px; } .knownIssuesContainer .tab #tabList li.icon .fa { position: absolute; top: 50%; right: 50%; -webkit-transform: translate(50%,-50%); transform: translate(50%,-50%); display: inline-block; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media screen and (max-width: 870px) { .knownIssuesContainer .tab #tabList li.icon { border-top-right-radius: 4px; position: absolute; display: block; right: 0; padding: 1em; padding-top: .5em; padding-bottom: .5em; background: #505557!important; color: #fff; } .knownIssuesContainer .tab #tabList li button { margin: 0; } .knownIssuesContainer .tab #tabList li button:not(.active) { display: none; } .knownIssuesContainer .tab #tabList li button.active { width: 100%; border-radius: 4px 4px 0 0; } .knownIssuesContainer .tab.responsive { position: relative; } .knownIssuesContainer .tab.responsive #tabList .icon { border-top-right-radius: 4px; position: absolute; right: 0; top: 0; background: #505557!important; color: #fff; } .knownIssuesContainer .tab.responsive #tabList li button { float: none; width: 100%; display: block; text-align: left; } .knownIssuesContainer .tab.responsive #tabList li button.active { text-align: left; } } @media screen and (max-width: 600px) { .knownIssuesContainer .tab #tabList li button { text-align: left; } .knownIssuesContainer .tab #tabList li button.active { text-align: left; } } .knownIssuesContainer table { margin: 0 auto 80px; width: 100%; border-collapse: collapse; border-spacing: 0; } .knownIssuesContainer table tr td, .knownIssuesContainer table tr th { text-align: left; padding: 8px; vertical-align: middle; } .knownIssuesContainer table tr th { background: #0060ff; color: #fff; font-weight: 300; } .knownIssuesContainer table tr th#status { cursor: pointer; min-width: 120px; } .knownIssuesContainer table tr th.col3 { text-align: center; vertical-align: middle; } .knownIssuesContainer table tr th.description-head-mobile { display: none; } .knownIssuesContainer table tr td { padding: 4px; margin: 3px; border: 1px solid #ccc; } .knownIssuesContainer table tr td p { margin: 0; } .knownIssuesContainer table tr td p.description-text { font-weight: 300; } @media screen and (max-width: 600px) { .knownIssuesContainer table tr td { display: block; margin: 0; } .knownIssuesContainer table tr td p { width: 100%; margin: .5em; padding-right: 10px; } .knownIssuesContainer table tr td.col1 { border-top: none; border-bottom: none; } .knownIssuesContainer table tr td.col3 { border-top: none; text-align: left; vertical-align: middle; } .knownIssuesContainer table tr th.main-col { display: none; } .knownIssuesContainer table tr th.description-head-mobile { cursor: pointer; display: block; } .knownIssuesContainer table tr th.col1 { border-top: none; border-bottom: none; } .knownIssuesContainer table tr th.col3 { border-top: none; text-align: left; vertical-align: middle; } } .knownIssuesContainer #loading img { margin: 0 auto; display: table; padding-top: 100px; } @-webkit-keyframes newYears { 0% { right: -150px; opacity: 1; -webkit-transform: rotate(8deg); transform: rotate(8deg); } 85% { right: 130px; opacity: 1; -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } to { right: 120px; opacity: 1; -webkit-transform: rotate(8deg); transform: rotate(8deg); } } @keyframes newYears { 0% { right: -150px; opacity: 1; -webkit-transform: rotate(8deg); transform: rotate(8deg); } 85% { right: 130px; opacity: 1; -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } to { right: 120px; opacity: 1; -webkit-transform: rotate(8deg); transform: rotate(8deg); } } .newYears { position: absolute; right: 120px; bottom: 80px; width: 180px; -webkit-transform: rotate(8deg); transform: rotate(8deg); -webkit-animation: newYears .5s forwards; animation: newYears .5s forwards; -webkit-animation-delay: .7s; animation-delay: .7s; opacity: 0; } @media screen and (max-width: 767px) { .newYears { display: none; } } .bottomBorder { position: relative; width: 100%; height: auto; padding: 0; margin: 0 auto -5px; padding-top: 15px; } .domain-cta, .domainInnerContainer, .vps-cta { position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; display: -ms-flexbox; display: -webkit-box; display: flex; max-width: 840px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-top: 40px; } .domain-cta.small, .domainInnerContainer.small, .vps-cta.small { max-width: 576px; } .domain-cta div:first-child, .domainInnerContainer div:first-child, .vps-cta div:first-child { width: calc(100% - 238px); } .domain-cta div:last-child, .domainInnerContainer div:last-child, .vps-cta div:last-child { width: 208px; } .domain-cta h2, .domainInnerContainer h2, .vps-cta h2 { font-size: 50px; font-weight: 900; } .domain-cta p, .domainInnerContainer p, .vps-cta p { font-size: 21px; font-weight: 400; margin-bottom: 10px; } .domain-cta .btn, .domainInnerContainer .btn, .vps-cta .btn { padding: 12px 24px; border-radius: 10px; color: #004ec3; background: #fff; margin: 20px 0; border: 1px solid #004ec3; -webkit-transition: all .4s; transition: all .4s; display: inline-block; font-weight: bold; } .domain-cta .btn:hover, .domainInnerContainer .btn:hover, .vps-cta .btn:hover { color: #fff; background: #004ec3; -webkit-transition: all .4s; transition: all .4s; } @media only screen and (max-width: 820px) { .domain-cta, .domainInnerContainer, .vps-cta { -ms-flex-wrap: wrap; flex-wrap: wrap; } .domain-cta div, .domainInnerContainer div, .vps-cta div { width: 100%!important; text-align: center; } } @media only screen and (max-width: 640px) { .domain-cta p, .domainInnerContainer p, .vps-cta p { font-size: 3.5vw; } .domain-cta h2, .domainInnerContainer h2, .vps-cta h2 { font-size: 7.8vw; } } .domain-cta-alt { background: -webkit-gradient(linear,left top,right top,color-stop(70%,#eaf7fc),to(#a9d1ef)); background: linear-gradient(to right,#eaf7fc 70%,#a9d1ef); margin: 20px auto 80px; } .domain-cta-alt .domainInnerContainer { padding: 60px 16px; } .domain-cta-alt .domainInnerContainer .domainContent { width: calc(100% - 230px); display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .domain-cta-alt .domainInnerContainer .domainContent div { width: auto; } .domain-cta-alt .domainInnerContainer .domainContent div small { font-size: 11px; margin-right: 10px; } .domain-cta-alt .domainInnerContainer .domainContent div img { width: 80px; display: inline-block; margin-top: 10px; margin-bottom: -9px; } .domain-cta-alt .domainInnerContainer img { display: block; width: 200px; } @media only screen and (max-width: 820px) { .domain-cta-alt .domainInnerContainer img { display: none; } } .domain-cta-alt .domainInnerContainer a.btn, .domain-cta-alt .domainInnerContainer input[type=submit] { margin-bottom: 0; background: #004ec3; color: #fff; -webkit-transition: all .4s; transition: all .4s; } .domain-cta-alt .domainInnerContainer a.btn:hover, .domain-cta-alt .domainInnerContainer input[type=submit]:hover { background: transparent; color: #004ec3; -webkit-transition: all .4s; transition: all .4s; } .domain-cta-alt .domainInnerContainer input[type=submit] { padding: 8px; border-radius: 4px; font-family: "Roboto",sans-serif; font-size: 16px; border: 1px solid #004ec3; -webkit-transition: all .4s; transition: all .4s; } .domain-cta-alt .domainInnerContainer input[type=submit]:hover { color: #004ec3; background: transparent; -webkit-transition: all .4s; transition: all .4s; } .domain-cta-alt .domainInnerContainer input[type=text] { border-radius: 4px; font-family: "Roboto",sans-serif; font-size: 16px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 300px; border: 0; padding: 8px; border: 1px solid #a9aaab; margin-right: 4px; } .domain-cta-alt .domainInnerContainer input[type=text]:focus { background: #fcfcfc; outline: none; } .domain-cta-alt .domainInnerContainer input[type=text]::-webkit-input-placeholder { color: #505557; font-weight: 300; font-family: "Roboto",sans-serif; } .domain-cta-alt .domainInnerContainer input[type=text]::-moz-placeholder { color: #505557; font-weight: 300; font-family: "Roboto",sans-serif; } .domain-cta-alt .domainInnerContainer input[type=text]:-ms-input-placeholder { color: #505557; font-weight: 300; font-family: "Roboto",sans-serif; } .domain-cta-alt .domainInnerContainer input[type=text]::-ms-input-placeholder { color: #505557; font-weight: 300; font-family: "Roboto",sans-serif; } .domain-cta-alt .domainInnerContainer input[type=text]::placeholder { color: #505557; font-weight: 300; font-family: "Roboto",sans-serif; } .domain-cta div { z-index: 2; } .domain-cta h2 { font-size: 53px; margin-top: 10px; } .domain-cta:after { content: ""; background: url("/img/globe.png"); background-size: 100%; height: 180px; width: 180px; position: absolute; z-index: 1; left: 66%; top: 0; opacity: .7; } #vps h2 { font-size: 32px; margin-bottom: 10px; } body.promotion #navBar, body.promotion .topBar, body.promotion footer { display: none; } body.promotion { max-width: 1800px; margin: auto; } body.promotion header { background: url("/img/2021promo-header.jpg"); background-size: cover; background-position: center; } @media only screen and (max-width: 768px) { body.promotion header { background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.5))),url("/img/2021promo-header.jpg"); background: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url("/img/2021promo-header.jpg"); background-size: cover; background-position: center; } } .promoContainer { height: 38vw; max-height: 735px; } .promoContainer .headerInfo { position: absolute; margin: 40px 0 0 50px; } .promoContainer .headerInfo a { display: inline-block; } .promoContainer .headerInfo img { margin: 0; width: 16vw; max-width: 290px; } .promoContainer .headerInfo h1 { text-align: left; margin: 26px 0 15px; color: #fff; font-size: 5vw; line-height: 100%; } @media only screen and (min-width: 1801px) { .promoContainer .headerInfo h1 { font-size: 90px; } } .promoContainer .headerInfo p { font-weight: 300; color: #fff; font-size: 2.4vw; margin-bottom: 30px; } @media only screen and (min-width: 1801px) { .promoContainer .headerInfo p { font-size: 45px; } } .promoContainer .headerInfo .btn { display: inline-block; -webkit-transition: all .4s; transition: all .4s; text-decoration: none; padding: .5vw 1.5vw; -webkit-appearance: none; background: #fff; color: #000; border: 1px solid #fff; border-radius: 4px; font-weight: 300; font-size: 1.7vw; } @media only screen and (min-width: 1801px) { .promoContainer .headerInfo .btn { font-size: 30px; padding: 9px 27px; } } @media only screen and (max-width: 1248px) { .promoContainer .headerInfo .btn { font-size: 21px; padding: 6px 19px; } } .promoContainer .headerInfo .btn:hover { background: transparent; color: #fff; -webkit-transition: all .4s; transition: all .4s; } @media only screen and (max-width: 768px) { .promoContainer { min-height: 230px; } .promoContainer .headerInfo { width: 100%; margin: 0; padding: 25px 10px; text-align: center; } .promoContainer .headerInfo img { min-width: 100px; } .promoContainer .headerInfo h1 { text-align: center; margin: 15px 0 10px; } .promoContainer .headerInfo p { margin-bottom: 20px; } .promoContainer .headerInfo .btn { font-size: 16px; } } @media only screen and (max-width: 560px) { .promoContainer .headerInfo h1 { font-size: 21px; } .promoContainer .headerInfo p { font-size: 16px; } } body.promotion .bg-gradient { width: 100%; height: 460px; position: absolute; margin-top: -660px; } body.promotion .bg-gradient:after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(120deg,rgba(0,148,195,.46) 0%,rgba(179,0,195,.38) 100%); background-size: 170% 170%; -webkit-animation: gradient-motion 12s ease infinite; animation: gradient-motion 12s ease infinite; } @media only screen and (max-width: 1024px) { body.promotion .bg-gradient { display: none; } } body.promotion .features h2, body.promotion .pricing h2, body.promotion .testimonials h2, body.promotion .themes h2 { font-size: 56px; font-weight: bold; color: #4c4867; text-align: center; margin: 80px 0 -50px; } @media only screen and (max-width: 768px) { body.promotion .features h2, body.promotion .pricing h2, body.promotion .testimonials h2, body.promotion .themes h2 { font-size: 7.3vw; } } body.promotion .features h4, body.promotion .pricing h4, body.promotion .testimonials h4, body.promotion .themes h4 { font-weight: 300; font-size: 28px; color: #4c4867; text-align: center; margin: 54px 0 -50px; } @media only screen and (max-width: 768px) { body.promotion .features h4, body.promotion .pricing h4, body.promotion .testimonials h4, body.promotion .themes h4 { font-size: 21px; } } body.promotion .features .container, body.promotion .pricing .container, body.promotion .testimonials .container, body.promotion .themes .container { display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } body.promotion .features .feature, body.promotion .pricing .feature, body.promotion .testimonials .feature, body.promotion .themes .feature { width: 25%; padding: 20px; margin: 0 20px; text-align: center; } body.promotion .features .feature img, body.promotion .pricing .feature img, body.promotion .testimonials .feature img, body.promotion .themes .feature img { width: 150px; display: block; margin: auto; } body.promotion .features .feature p, body.promotion .pricing .feature p, body.promotion .testimonials .feature p, body.promotion .themes .feature p { font-size: 28px; font-weight: 300; color: #4c4867; margin-top: 30px; } body.promotion .features .feature:first-child, body.promotion .pricing .feature:first-child, body.promotion .testimonials .feature:first-child, body.promotion .themes .feature:first-child { margin-left: 0; } body.promotion .features .feature:last-child, body.promotion .pricing .feature:last-child, body.promotion .testimonials .feature:last-child, body.promotion .themes .feature:last-child { margin-right: 0; } body.promotion .features .themesContainer, body.promotion .pricing .themesContainer, body.promotion .testimonials .themesContainer, body.promotion .themes .themesContainer { display: -ms-flexbox; display: -webkit-box; display: flex; width: 100%; } body.promotion .features .themesContainer .theme, body.promotion .pricing .themesContainer .theme, body.promotion .testimonials .themesContainer .theme, body.promotion .themes .themesContainer .theme { z-index: 10; margin: 30px; -webkit-box-shadow: 0 0 65px 0 rgba(0,0,0,.1); box-shadow: 0 0 65px 0 rgba(0,0,0,.1); width: calc(33.3% - 40px); border-radius: 8px; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all .4s; transition: all .4s; cursor: pointer; } body.promotion .features .themesContainer .theme:first-child, body.promotion .pricing .themesContainer .theme:first-child, body.promotion .testimonials .themesContainer .theme:first-child, body.promotion .themes .themesContainer .theme:first-child { margin-left: 0; } body.promotion .features .themesContainer .theme:last-child, body.promotion .pricing .themesContainer .theme:last-child, body.promotion .testimonials .themesContainer .theme:last-child, body.promotion .themes .themesContainer .theme:last-child { margin-right: 0; } body.promotion .features .themesContainer .theme:hover, body.promotion .pricing .themesContainer .theme:hover, body.promotion .testimonials .themesContainer .theme:hover, body.promotion .themes .themesContainer .theme:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-transition: all .4s; transition: all .4s; -webkit-box-shadow: 0 20px 65px 0 rgba(0,0,0,.2); box-shadow: 0 20px 65px 0 rgba(0,0,0,.2); } @media only screen and (max-width: 1024px) { body.promotion .themes.desktop { display: none; } } body.promotion .themes.mobile { display: none; } body.promotion .themes.mobile .container { display: block; } body.promotion .themes.mobile .container .themesContainer { display: block; } body.promotion .themes.mobile .container .themesContainer .theme { -webkit-box-shadow: none; box-shadow: none; border-radius: 14px; margin: 0 20px; border: 1px solid #e9e9e9; } @media only screen and (max-width: 480px) { body.promotion .themes.mobile .container .themesContainer .theme { margin: 0; } } @media only screen and (max-width: 1024px) { body.promotion .themes.mobile { display: block; } } .themes .container { -ms-flex-wrap: wrap; flex-wrap: wrap; } @media only screen and (max-width: 1024px) { body.promotion .features .container { max-width: 840px; } body.promotion .features .container .feature img { max-width: 120px; } body.promotion .features .container .feature p { font-size: 21px; margin-top: 15px; } } @media only screen and (max-width: 910px) { body.promotion .features .container { -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 480px; } body.promotion .features .container .feature { width: 50%; margin: 0; } } body.promotion .testimonial { padding: 30px; margin: 0 30px; -webkit-box-shadow: 0 0 65px 0 rgba(9,9,9,.1); box-shadow: 0 0 65px 0 rgba(9,9,9,.1); border-radius: 8px; width: 33%; text-align: center; z-index: 10; background: #fff; opacity: 0; } body.promotion .testimonial.in-view { -webkit-animation: promoFade .6s ease-in both; animation: promoFade .6s ease-in both; } body.promotion .testimonial.in-view:nth-child(2) { -webkit-animation-delay: .08s; animation-delay: .08s; } body.promotion .testimonial.in-view:last-child { -webkit-animation-delay: .16s; animation-delay: .16s; } body.promotion .testimonial:first-child { margin-left: 0; } body.promotion .testimonial:last-child { margin-right: 0; } body.promotion .testimonial img { width: 60px; border-radius: 100%; display: block; margin: 0 auto 20px; } body.promotion .testimonial span { display: block; margin-bottom: 15px; color: #f2bd00; font-size: 24px; } body.promotion .testimonial span:after { content: ""; position: absolute; background: url("/img/quotes.png"); background-size: 100% 100%; width: 40px; height: 34px; opacity: .06; margin: 40px 0 0 -140px; } body.promotion .testimonial p { color: #4c4867; } body.promotion .testimonial p:nth-child(3) { margin-bottom: 15px; } @media only screen and (max-width: 1024px) { body.promotion .testimonial { padding: 20px 10px; margin: 0 10px; } } @media only screen and (max-width: 910px) { body.promotion .testimonials .container { display: block; } body.promotion .testimonials .container .testimonial { width: 100%; max-width: 350px; display: block; margin: 0 auto!important; } } @media only screen and (max-width: 910px) { body.promotion .testimonials.desktop .container { display: -webkit-box!important; display: -ms-flexbox!important; display: flex!important; } body.promotion .testimonials.desktop .container .testimonial { margin: 0 10px!important; } } @media only screen and (max-width: 768px) { body.promotion .testimonials.desktop .container { display: none!important; } } body.promotion .testimonials.mobile { display: none; } body.promotion .testimonials.mobile .testimonial { opacity: 1; } @media only screen and (max-width: 768px) { body.promotion .testimonials.mobile { display: block; } body.promotion .testimonials.mobile .testimonial { margin: 0 auto!important; } } @media only screen and (max-width: 910px) { body.promotion .testimonials.mobile .testimonial { margin: 0 20px!important; } } body.promotion .slider_container .testimonial { margin: 0!important; max-width: none!important; -webkit-box-shadow: none; box-shadow: none; border: 1px solid #e9e9e9; } @media only screen and (max-width: 820px) { body.promotion .slider_container .testimonial { margin: 60px 20px!important; } } body.promotion .signUp { text-align: center; margin-bottom: 30px; } body.promotion .signUp .btn { display: inline-block; -webkit-transition: all .4s; transition: all .4s; text-decoration: none; padding: 8px 24px; -webkit-appearance: none; background: #fff; color: #4c4867; border: 1px solid #4c4867; border-radius: 4px; font-weight: 300; font-size: 24px; position: relative; } body.promotion .signUp .btn:after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(120deg,rgba(0,148,195,.46) 0%,rgba(179,0,195,.38) 100%); -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; opacity: 0; background-size: 170% 170%; -webkit-animation: gradient-motion 4s ease infinite; animation: gradient-motion 4s ease infinite; z-index: -1; } body.promotion .signUp .btn:hover { color: #fff; border: 1px solid #fff; background: transparent; -webkit-transition: all .4s; transition: all .4s; } body.promotion .signUp .btn:hover:after { opacity: 1; -webkit-transition: all .4s; transition: all .4s; } body.promotion .pricing span { font-size: 42px; font-weight: 300; color: #4c4867; text-align: center; margin: 20px 0 -40px; opacity: 0; display: block; } body.promotion .pricing span strong { font-size: 92px; font-weight: 900; } body.promotion .pricing span.in-view { -webkit-animation: promoPrice .6s ease-in-out 0s forwards; animation: promoPrice .6s ease-in-out 0s forwards; -webkit-animation-delay: .4s; animation-delay: .4s; } .promotionFooter { background: #d6dae1; text-align: center; padding: 40px 15px; } .promotionFooter p { font-size: 14px; color: #aaa; } .servicesContainer .container { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 80px; padding: 80px 16px 20px; } @media only screen and (max-width: 767px) { .servicesContainer .container { margin-top: 0; } } .service { display: inline-block; max-width: 520px; -ms-flex-preferred-size: calc(50% - 10px); flex-basis: calc(50% - 10px); margin: 60px 0; -webkit-transform: none; transform: none; -webkit-transition: all .4s; transition: all .4s; color: #000; } .service:nth-child(odd) { -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: all .4s; transition: all .4s; } @media only screen and (max-width: 767px) { .service { -ms-flex-preferred-size: 100%; flex-basis: 100%; margin: 30px auto; } .service:nth-child(odd) { -webkit-transform: none; transform: none; } } .service img { width: 100%; border-radius: 10px 10px 0 0; -webkit-filter: brightness(100%); filter: brightness(100%); -webkit-transition: all .4s; transition: all .4s; } .service h3 { font-size: 21px; margin: 20px 0 10px; } .service i { color: #0697d4; margin-top: 10px; display: block; } .service i:after { content: ""; background: url("/img/arrow.png"); width: 24px; height: 10px; margin: 7px 0 0 10px; position: absolute; background-size: 100%; background-repeat: no-repeat; -webkit-transform: none; transform: none; -webkit-transition: all .4s; transition: all .4s; } .marketingServices .container { padding-bottom: 0; } .marketingServices .service:last-child, .marketingServices .service:nth-last-child(2) { margin-bottom: 0; } a.service:hover { -webkit-transform: translateY(-3px); transform: translateY(-3px); -webkit-transition: all .4s; transition: all .4s; color: #000; } a.service:hover img { -webkit-filter: brightness(108%); filter: brightness(108%); -webkit-transition: all .4s; transition: all .4s; } a.service:hover i:after { -webkit-transform: translateX(6px); transform: translateX(6px); } a.service:hover:nth-child(odd) { -webkit-transform: translateY(-103px); transform: translateY(-103px); -webkit-transition: all .4s; transition: all .4s; } @media only screen and (max-width: 767px) { a.service:hover:nth-child(odd) { -webkit-transform: translateY(-3px); transform: translateY(-3px); -webkit-transition: all .4s; transition: all .4s; } } .servicesHeader { margin: 60px 0 -60px; } #clients { text-align: center; } #clients .container { padding-top: 0; } #clients img { margin: 0 20px; } .ITfeatures, .PSPawards, .PSPfeatures, .businessTools, .designChoices, .devProcess, .localizationChoices, .logoProcess, .shopsiteFeatures { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: distribute; justify-content: space-around; text-align: center; margin: 30px auto; } .ITfeatures .column, .PSPawards .column, .PSPfeatures .column, .businessTools .column, .designChoices .column, .devProcess .column, .localizationChoices .column, .logoProcess .column, .shopsiteFeatures .column { padding: 12px; width: 100%; max-width: 420px; margin: 0 auto; } .ITfeatures img, .PSPawards img, .PSPfeatures img, .businessTools img, .designChoices img, .devProcess img, .localizationChoices img, .logoProcess img, .shopsiteFeatures img { width: 160px; margin: auto; } .ITfeatures h3, .PSPawards h3, .PSPfeatures h3, .businessTools h3, .designChoices h3, .devProcess h3, .localizationChoices h3, .logoProcess h3, .shopsiteFeatures h3 { text-transform: uppercase; font-weight: 300; margin: 10px 0; } .ITfeatures p, .PSPawards p, .PSPfeatures p, .businessTools p, .designChoices p, .devProcess p, .localizationChoices p, .logoProcess p, .shopsiteFeatures p { text-align: left; } .ITfeatures a, .PSPawards a, .PSPfeatures a, .businessTools a, .designChoices a, .devProcess a, .localizationChoices a, .logoProcess a, .shopsiteFeatures a { color: #0697d4; -webkit-transition: all .4s; transition: all .4s; display: block; } .ITfeatures a:hover, .PSPawards a:hover, .PSPfeatures a:hover, .businessTools a:hover, .designChoices a:hover, .devProcess a:hover, .localizationChoices a:hover, .logoProcess a:hover, .shopsiteFeatures a:hover { color: #011b26; -webkit-transition: all .4s; transition: all .4s; } @media only screen and (max-width: 767px) { .ITfeatures, .PSPawards, .PSPfeatures, .businessTools, .designChoices, .devProcess, .localizationChoices, .logoProcess, .shopsiteFeatures { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .localizationChoices { -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 890px; } .ITfeatures img, .shopsiteFeatures img { width: 100px; } .businessTools img { width: auto; max-width: 100%; } .PSPfeatures img { width: 90px; } .PSPawards img { height: 90px; width: auto; } @media only screen and (max-width: 767px) { .PSPawards { -ms-flex-wrap: wrap; flex-wrap: wrap; } .PSPawards .column { width: 50%; } } @media only screen and (max-width: 767px) { .PSPawards .column { width: 100%; } } .devSection.withBg { background: #f3f7ff; } .devSection .logo_title { display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 30px; } .devSection .logo_title img { display: block; margin-right: 20px; } @media only screen and (max-width: 767px) { .devSection .logo_title { text-align: center; display: block; } .devSection .logo_title img { margin: 0 auto 20px; } .devSection .logo_title .mobile_hide { display: none; } } .devSection.reve .logo_title { margin-top: 30px; } .devSection.reve .logo_title img { width: 160px; } .devSection .logoName { font-size: 32px; margin-right: 20px; } .devSection .devProjectFeatures { display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 40px 0 0; } .devSection .devProjectFeatures .feature { text-align: center; width: calc(25% - 40px); margin: 0 20px; max-width: 200px; } .devSection .devProjectFeatures .feature:first-child { margin-left: 0; } .devSection .devProjectFeatures .feature:last-child { margin-right: 0; } .devSection .devProjectFeatures .feature p { font-size: 14px; } .devSection .devProjectFeatures .feature img { max-width: 90px; } @media only screen and (max-width: 767px) { .devSection .devProjectFeatures .feature { width: calc(50% - 40px); max-width: none; } .devSection .devProjectFeatures .feature:nth-child(2) { margin-right: 0; } .devSection .devProjectFeatures .feature:nth-child(3) { margin-left: 0; } } @media only screen and (max-width: 400px) { .devSection .devProjectFeatures .feature { width: 100%; margin: 0; } } .devSection .embellishedTitle { margin: -30px 0 20px; position: relative; width: auto; display: inline-block; -webkit-transform: translateX(50%); transform: translateX(50%); z-index: 10; } .devSection .embellishedTitle:after { content: ""; position: absolute; height: 20px; width: calc(100% + 40px); background: #e4f2ff; left: -20px; bottom: -4px; z-index: -1; } @media only screen and (max-width: 1248px) { .devSection .embellishedTitle { -webkit-transform: none; transform: none; } } @media only screen and (max-width: 560px) { .devSection .embellishedTitle { font-size: 28px; } .devSection .embellishedTitle:after { display: none; } } @media only screen and (min-width: 1249px) { .devSection.reve .embellishedTitle { position: absolute; right: 50%; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } .devSection .logo_title p:not(.logoName) { margin: 30px 0 14px!important; } .devSection .logoName { margin: 0; } @media only screen and (min-width: 768px) { .devSection.hawaii .logo_title p:not(.logoName) { margin-left: 15px!important; margin-top: 20px!important; } } @media only screen and (min-width: 768px) { .devSection.nacalai .logo_title p:not(.logoName) { margin-top: 0!important; } } @media only screen and (min-width: 768px) { .devSection.dons .logo_title p:not(.logoName) { margin-left: 15px!important; margin-top: 20px!important; } } .devSection .donsMockup { display: block; margin: auto; max-width: 400px; } .leftAlign { text-align: left; } @media only screen and (min-width: 768px) { .leftAlignDesktop { text-align: left; } } .contentTranslation, .customWebApps, .onlineMarketing, .wdxDesign, .webDesignAndDev, .wordpressDesign { display: -ms-flexbox; display: -webkit-box; display: flex; border-top: #000 solid 1px; } @media only screen and (max-width: 910px) { .contentTranslation, .customWebApps, .onlineMarketing, .wdxDesign, .webDesignAndDev, .wordpressDesign { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .contentTranslation .text h2, .customWebApps .text h2, .onlineMarketing .text h2, .wdxDesign .text h2, .webDesignAndDev .text h2, .wordpressDesign .text h2 { text-align: left; margin-top: 40px; font-size: 28px; font-weight: 300; } .contentTranslation .image, .customWebApps .image, .onlineMarketing .image, .wdxDesign .image, .webDesignAndDev .image, .wordpressDesign .image { margin-left: 50px; } .contentTranslation .image img, .customWebApps .image img, .onlineMarketing .image img, .wdxDesign .image img, .webDesignAndDev .image img, .wordpressDesign .image img { max-width: 452px; margin-top: 20px; } .contentTranslation .image.noTop img, .customWebApps .image.noTop img, .onlineMarketing .image.noTop img, .wdxDesign .image.noTop img, .webDesignAndDev .image.noTop img, .wordpressDesign .image.noTop img { margin-top: 0; } .contentTranslation .image.leftAligned, .customWebApps .image.leftAligned, .onlineMarketing .image.leftAligned, .wdxDesign .image.leftAligned, .webDesignAndDev .image.leftAligned, .wordpressDesign .image.leftAligned { margin-left: 0; margin-right: 50px; } @media only screen and (max-width: 910px) { .contentTranslation .image, .customWebApps .image, .onlineMarketing .image, .wdxDesign .image, .webDesignAndDev .image, .wordpressDesign .image { margin: 0 auto!important; } .contentTranslation .image img, .customWebApps .image img, .onlineMarketing .image img, .wdxDesign .image img, .webDesignAndDev .image img, .wordpressDesign .image img { max-width: 100%; } } .contentTranslation:after, .customWebApps:after, .onlineMarketing:after, .wdxDesign:after, .webDesignAndDev:after, .wordpressDesign:after { content: " "; background-size: contain; background-position: bottom; background-repeat: no-repeat; position: absolute; height: 75px; width: 90px; top: 19px; z-index: -1; background: url("/img/wordpress-design.png"); background-size: 100%; background-repeat: no-repeat; } .design-options { background: #f3f7ff; margin: 80px 0; } .design-options .container h2 { margin-top: 0; } #customLogo { padding-top: 80px; background: #f3f7ff; } #customLogo .logoDesign { text-align: center; padding-top: 0; } #customLogo .logoDesign h2 { margin-top: 0; } #customLogo .logoDesign .priceDisclaimer { text-align: center; font-size: 13px; color: #505557; margin: 40px 0 0 0; } @media only screen and (max-width: 768px) { #customLogo .logoProcess { margin-bottom: 0; } } #customLogo .btnContainer { position: relative; } @media only screen and (max-width: 768px) { #customLogo .btnContainer .btn { margin-top: 0; } } #customLogo .starburst { position: absolute; top: -80px; right: 0; background-image: -webkit-gradient(linear,left bottom,right top,from(#04c6ad),color-stop(#09bba0),color-stop(#0db094),color-stop(#0fa688),to(#109b7c)); background-image: linear-gradient(to right top,#04c6ad,#09bba0,#0db094,#0fa688,#109b7c); color: #fff; width: 200px; font-size: 50px; padding-top: 55px; font-weight: bold; text-align: center; aspect-ratio: 1; clip-path: polygon(98.8% 60.91%,81.09% 71.85%,76.79% 92.22%,56.53% 87.43%,39.09% 98.8%,28.15% 81.09%,7.78% 76.79%,12.57% 56.53%,1.2% 39.09%,18.91% 28.15%,23.21% 7.78%,43.47% 12.57%,60.91% 1.2%,71.85% 18.91%,92.22% 23.21%,87.43% 43.47%); } @media only screen and (max-width: 768px) { #customLogo .starburst { position: relative; top: -30px; right: inherit; margin: 0 auto; } } #customLogo .starburst span { font-size: 14px; font-weight: normal; display: block; } #customLogo .starburst span:first-child { text-align: left; margin: 0 0 0 50px; } #customLogo .starburst span:last-child { position: relative; top: -5px; text-align: right; margin: 0 50px 0 0; } #businessCard { margin-top: 80px; } #businessCard h2 { margin-top: 0; } #businessCard .plansContainer .plan img { width: 75px; margin: 0 0 10px 0; } #businessCard .plansContainer .plan strong { margin-bottom: 5px; } #businessCard .plansContainer .plan ul { margin: 15px 0 0 0; } @media only screen and (max-width: 560px) { #businessCard .plansContainer .plan ul { max-width: 180px; margin: 10px auto; } } @media only screen and (max-width: 910px) { .contentTranslation .image, .onlineMarketing .image { margin-top: 50px!important; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } @media only screen and (max-width: 768px) { .contentTranslation .text, .contentTranslation h2, .onlineMarketing .text, .onlineMarketing h2 { text-align: center!important; } .contentTranslation .text p, .contentTranslation h2 p, .onlineMarketing .text p, .onlineMarketing h2 p { text-align: left; } } .wdxDesign:after { background: url("/img/wdx-design.png"); background-size: 100%; background-repeat: no-repeat; } .customWebApps:after { background: url("/img/custom-apps.png"); background-size: 100%; background-repeat: no-repeat; } .webDesignAndDev:after { background: url("/img/design-dev.png"); background-size: 100%; background-repeat: no-repeat; } .contentTranslation:after { background: url("/img/translation.png"); background-size: 100%; background-repeat: no-repeat; } .onlineMarketing:after { background: url("/img/online-marketing.png"); background-size: 100%; background-repeat: no-repeat; } .designEgg { position: absolute; height: 75px; width: 90px; top: 19px; } .slider_container { width: calc(100% - 50px); margin: 40px auto; } .slider_container img { height: auto; max-width: 100%; } .slider_container .slick-initialized .slick-slide { padding: 5px; } .lowKeyCTA { margin: 0 auto; position: relative; padding-bottom: 60px; max-width: 640px; } .lowKeyCTA p { text-align: center; font-size: 21px; } .lowKeyCTA:after { content: ""; height: 1px; width: 100%; background-color: #727272; margin: auto; max-width: 204px; margin: auto; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .lowKeyCTA.marketingCTA { margin-top: 60px; max-width: 820px; padding: 0 16px 60px; } .lowKeyCTA.callUs { margin-bottom: 60px; } .lowKeyCTA.callUs h2 { margin: 0; } .lowKeyCTA.callUs .btnContainer { margin-top: 15px; } .lowKeyCTA.callUs .btnContainer a { margin-top: 0; } .lowKeyCTA.callUs:after { max-width: 120px; } .CTAblock { position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; background: #eee; padding: 40px 16px; margin: 0 auto 80px; max-width: 960px; background: -webkit-gradient(linear,left top,right top,from(#fff),color-stop(20%,#fff),color-stop(21%,#dbecfb),to(#fff)); background: linear-gradient(to right,#fff,#fff 20%,#dbecfb 21%,#fff 100%); } .CTAblock.small { max-width: 576px; } .CTAblock .CTAcontainer { max-width: 760px; display: -ms-flexbox; display: -webkit-box; display: flex; margin: auto; } .CTAblock .CTAimage { position: relative; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } .CTAblock .CTAimage:after { content: ""; height: 240px; width: 240px; background: #fff; position: absolute; left: -40px; top: -60px; border-radius: 100%; } .CTAblock img { max-width: 160px; margin-right: 100px; z-index: 9999; position: relative; } .CTAblock .CTAinfo h2 { text-align: left; margin: 0 0 20px; font-size: 24px; } .CTAblock .CTAinfo .btn { margin-top: 0; } @media only screen and (max-width: 767px) { .CTAblock { background: -webkit-gradient(linear,left top,right top,from(#dbecfb),to(#fff)); background: linear-gradient(to right,#dbecfb,#fff); } .CTAblock .CTAcontainer { -ms-flex-wrap: wrap; flex-wrap: wrap; } .CTAblock .CTAinfo { width: 100%; text-align: center; } .CTAblock .CTAinfo h2 { text-align: center; } .CTAblock .CTAimage { width: 100%; text-align: center; margin-bottom: 20px; } .CTAblock .CTAimage img { margin: 0 auto; } .CTAblock .CTAimage:after { display: none; } } .infoBlock { position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; padding: 0; margin: 0 auto; } .infoBlock.small { max-width: 576px; } .infoBlock .infoContainer { padding: 20px; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid #bcd6ff; } .infoBlock .infoContainer .CTAimage { position: relative; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } @media only screen and (max-width: 400px) { .infoBlock .infoContainer .CTAimage { display: none; } } .infoBlock .infoContainer img { width: 160px; } .infoBlock .infoContainer .CTAinfo h2 { text-align: left; margin: 0 0 20px; font-size: 24px; } .infoBlock .infoContainer .CTAinfo p:last-child { margin-bottom: 0; } .support-banner { position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; width: 100%; height: 10.8vw; max-height: 200px; background-image: url("/img/support-banner-01.png"); background-position: center; background-size: 100% auto; background-repeat: no-repeat; position: relative; margin-bottom: 60px; -o-object-fit: contain; object-fit: contain; } .support-banner.small { max-width: 576px; } .support-banner p { width: 50%; max-width: 600px; position: absolute; right: 4.5%; bottom: 1vw; text-align: left; color: #fff; font-size: 1rem; padding: 0 10px; margin-left: 2%; } .support-banner h3 { position: absolute; left: 40%; top: 0; margin-top: 2vw; } @media(min-width: 1441px) { .support-banner h3 { top: .25vw; } .support-banner p { bottom: .4vw; } } @media(min-width: 1039px) and (max-width: 1299px) { .support-banner h3 { top: -3%; font-size: 1.52rem; } .support-banner p { font-size: .8rem; bottom: .2vw; width: 47.7%; } } @media(min-width: 926px) and (max-width: 1038px) { .support-banner h3 { top: 2vw; font-size: 1.52rem; } .support-banner p { font-size: .7rem; bottom: 2vw; } } @media(min-width: 480px) and (max-width: 925px) { .support-banner { width: 550px; height: 450px; max-height: 450px; background-image: url("/img/support-banner-02.png"); background-size: contain; margin: 0 auto; } .support-banner h3 { position: absolute; top: 50%; left: 27%; -webkit-transform: rotate(6deg); transform: rotate(6deg); font-size: 1.25rem; } .support-banner p { width: 55.5%; left: 6%; top: 68%; margin: 0 auto; bottom: 4.5vw; text-align: justify; line-height: 1.25; } } @media(max-width: 479px) { .support-banner { width: 100%; height: 390px; max-height: 500px; background-image: url("/img/support-banner-02.png"); background-size: 100% auto; } .support-banner h3 { position: absolute; top: 50%; left: 11%; -webkit-transform: rotate(5deg); transform: rotate(5deg); font-size: 1.5rem; } .support-banner p { width: 80%; left: 5.8%; margin: 0 auto; bottom: 4.9vw; text-align: justify; line-height: 1.3; font-size: .95rem; } } .blog_section { position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; text-align: center; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: distribute; justify-content: space-around; position: relative; font-family: "Roboto",sans-serif!important; } .blog_section.small { max-width: 576px; } .blog_section .text { display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-right: 1px solid #d2d2d2; width: 50%; padding: 0 30px; } .blog_section .blogfeed_support { width: 50%; padding: 0 30px; } .blog_section #Bloguru-Modern { text-align: left; } .blog_section #Bloguru-Modern .BloguruGroupRSS div { padding: 0!important; } .blog_section #Bloguru-Modern .BloguruGroupRSS div#postInfoContainer { padding: 10px 0!important; } .blog_section #Bloguru-Modern .date { font-weight: 300; font-size: 11px; color: #999; } .blog_section #Bloguru-Modern .author { font-size: 12px; color: #999; } .blog_section #Bloguru-Modern a { color: #0697d4!important; font-weight: 300; font-size: 18px; margin: 5px 0; display: block; } .blog_section #Bloguru-Modern a:hover { color: #5fccfa!important; } @media only screen and (max-width: 767px) { .blog_section { -ms-flex-wrap: wrap; flex-wrap: wrap; } .blog_section .blogfeed_support, .blog_section .text { width: 100%; border: 0; } } .stylizedHeader { position: relative; width: 100%; margin: 80px 0 40px; text-align: center; } .stylizedHeader h2 { display: inline-block; margin: 0; position: relative; z-index: 3; } .stylizedHeader h2:after { content: ""; width: calc(100% + 30px); position: absolute; margin: -36px 0 0 -15px; height: 34px; z-index: -1; display: block; background: #fff; } .stylizedHeader:after { content: ""; height: 1px; width: 100%; background: #000; display: block; margin-top: -17px; } #cd-timeline * { -webkit-box-sizing: border-box; box-sizing: border-box; } #cd-timeline { position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; position: relative; padding: 2em; margin-bottom: 2em; background: #f5f5f5; } #cd-timeline.small { max-width: 576px; } #cd-timeline .cd-date a { color: #000; display: inline-block; -webkit-transform: none; transform: none; -webkit-transition: all .4s; transition: all .4s; } #cd-timeline .cd-date a:hover { -webkit-transform: translateY(-3px); transform: translateY(-3px); -webkit-transition: all .4s; transition: all .4s; } #cd-timeline:before { content: ""; position: absolute; top: 0; left: 50%; height: 100%; width: 3px; margin-left: -1.5px; background: #ccc; } #cd-timeline .timeline_animation_element { content: ""; position: absolute; top: 0; left: 50%; height: 100%; width: 3px; margin-left: -1.5px; background: #000; } .cd-timeline-block { position: relative; margin: 8em 0; } .cd-timeline-block:after { content: ""; display: table; clear: both; } .cd-timeline-block:first-child { margin-top: 0; } .cd-timeline-block:last-child { margin-bottom: 0; } .cd-timeline-content .cd-date { position: absolute; width: 100%; left: 120%; top: -24px; font-family: "Montserrat",sans-serif; font-size: 58px!important; font-weight: 700; } .cd-timeline-block:nth-child(2n) .cd-timeline-content .cd-date { left: auto; right: 120%; text-align: right; } .cd-timeline-content h2 { margin-top: 0!important; padding-top: 0!important; } .cd-timeline-content { -webkit-transition: opacity .8s; transition: opacity .8s; position: relative; margin-left: 0; background: #fff none repeat scroll 0% 0%; border-radius: .25em; padding: 1.6em; width: 45%; -webkit-box-shadow: 0 3px 0 #ccc; box-shadow: 0 3px 0 #ccc; } .cd-timeline-content.hidden { opacity: 0; } .cd-timeline-content.fade-in-element { opacity: 1; } .cd-timeline-block:nth-child(2n) .cd-timeline-content { float: right; } .cd-timeline-content:before { content: ""; position: absolute; top: 12px; left: 100%; height: 0; width: 0; border: 7px solid transparent; border-left: 7px solid #fff; } .cd-timeline-block:nth-child(2n) .cd-timeline-content:before { left: auto; right: 100%; border-color: transparent #fff transparent transparent; } .cd-timeline-img { -webkit-transition: height .6s ease,width .6s ease,-webkit-box-shadow .8s ease; transition: height .6s ease,width .6s ease,-webkit-box-shadow .8s ease; transition: height .6s ease,width .6s ease,box-shadow .8s ease; transition: height .6s ease,width .6s ease,box-shadow .8s ease,-webkit-box-shadow .8s ease; position: absolute; width: 16px; height: 16px; left: 50%; -webkit-transform: translate(-50%,5px); transform: translate(-50%,5px); background: #000; border-radius: 50%; -webkit-box-shadow: 0; box-shadow: 0; } .cd-timeline-img.active { width: 22px; height: 22px; background: #f5f5f5; -webkit-box-shadow: 0 0 0 3px #000; box-shadow: 0 0 0 3px #000; } .historyvid { max-width: 800px; margin: 0 auto; } .cd-timeline-content h3 { font-family: "Montserrat",sans-serif; font-weight: 500; color: #020202; text-transform: uppercase; font-size: 24px!important; line-height: 100%; margin-bottom: 15px; } .cd-timeline-content p { font-family: "Montserrat",sans-serif; font-size: 16px!important; margin-bottom: 0; } .cd-timeline-block:nth-child(odd) h3, .cd-timeline-block:nth-child(odd) p { text-align: right; } @media screen and (max-width: 767px) { .cd-timeline-img { position: absolute; top: -5px; left: -5px; } .cd-timeline-block { margin: 5em 0; } .cd-timeline-content { position: relative; border-radius: .25em; padding: 1em; margin-left: 25px; width: auto; -webkit-transition: all 1.8s ease 0s; transition: all 1.8s ease 0s; } #cd-timeline:before { position: absolute; top: 0; left: 30px; } #cd-timeline .timeline_animation_element { position: absolute; top: 0; left: 30px; } #cd-timeline { padding: 2em 1em 2em 2em; } .cd-timeline-content .cd-date { float: none; padding: 10px 0 0 0; position: static; } #content .cd-timeline-content p:last-child { margin-bottom: 15px!important; } .cd-timeline-content:before { top: 10px; left: auto; right: 100%; border-right: 7px solid #fff; border-left: 0; } .cd-timeline-block:nth-child(2n) .cd-timeline-content:before { top: 10px; } .cd-timeline-block:nth-child(2n) .cd-timeline-content { float: none; } .cd-timeline-block:nth-child(odd) h3, .cd-timeline-block:nth-child(odd) p { text-align: left; } } .historyvid { max-width: 800px; margin: 40px auto; } .historyvid .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .historyvid .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .leaders, .main { width: calc(66.6666666667% - 15px); display: inline-block; } .leaders .leader, .main .leader { display: -ms-flexbox; display: -webkit-box; display: flex; margin-bottom: 40px; } .leaders .leader .headshot, .main .leader .headshot { max-width: 150px; margin-right: 20px; } .leaders .leader .headshot .socials, .main .leader .headshot .socials { display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 8px; } .leaders .leader .headshot .socials a, .main .leader .headshot .socials a { width: 30px; margin: 0 5px; } .leaders .leader .headshot .socials a img, .main .leader .headshot .socials a img { width: 100%; } .leaders .leader .leaderInfo h3, .main .leader .leaderInfo h3 { font-size: 30px; margin-top: 4px; } .leaders .leader .leaderInfo strong, .main .leader .leaderInfo strong { display: block; color: #1264b9; font-style: italic; font-weight: 300; margin-bottom: 15px; } .leaders ul, .main ul { list-style: none; } .leaders ul li, .main ul li { margin: 20px 0; } .leaders ul li:first-child, .main ul li:first-child { margin-top: 0; } .leaders ul li:last-child, .main ul li:last-child { margin-bottom: 0; } .leaders ul li div, .main ul li div { font-size: 14px; font-style: italic; } @media only screen and (max-width: 820px) { .leaders, .main { width: 100%!important; } .leaders .leader, .main .leader { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .aside { width: calc(33.3333333333% - 15px); float: right; border: 1px solid #bcd6ff; padding: 15px; } .aside h3 { margin-bottom: 20px; } .aside img { margin: auto; display: block; max-width: 100%; } .aside ul { padding-left: 20px; } .aside ul li { margin-bottom: 5px; } .aside ul li:last-child { margin-bottom: 0; } @media only screen and (max-width: 820px) { .aside { width: 100%!important; float: none; } } .aside.organizations { width: calc(40% - 15px); display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .aside.organizations a { -ms-flex-preferred-size: 50%; flex-basis: 50%; } .press-release h2 { margin-top: 0; } .press-release span { display: block; margin: 0 0 40px; color: #505557; font-size: 16px; font-style: italic; } .press-release ul { padding-left: 20px; margin-bottom: 20px; } .promoBlock { margin: 60px 0; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .promoBlock:first-child { margin-top: 0; } .promoBlock img { width: 200px; -webkit-transform: rotate(-10deg); transform: rotate(-10deg); margin-right: 40px; } .promoBlock .promoContent { width: calc(100% - 240px); } .promoBlock .promoContent .btn { margin-right: 20px; margin-top: 10px; } @media only screen and (max-width: 767px) { .promoBlock .promoContent .btn { text-align: center; margin-bottom: 10px; } } .promoBlock .promoContent h3 { margin-bottom: 20px; } @media only screen and (max-width: 767px) { .promoBlock .promoContent { width: 100%; margin-top: 20px; } } .promoBlock small { font-size: 12px; font-style: italic; line-height: 150%; margin-top: 20px; display: block; } .promoBlock:after { content: ""; height: 1px; width: 250px; display: block; margin: 60px auto 0; background: #ccc; } .promoBlock:last-child { margin-bottom: 0; } .promoBlock:last-child:after { display: none; } .jobPosting { border-top: 2px dotted #ccc; clear: both; padding: 40px 0; } .jobPosting ul { padding-left: 20px; } .jobPosting h3 { margin-bottom: 20px; font-size: 28px; } .jobPosting h4 { margin: 20px 0 10px; } .communityContainer { width: calc(60% - 15px); } .communityContainer .btn { margin: 10px 0 30px; text-align: center; } .communityContainer .childrensFoundation { width: 600px; max-width: 100%; display: block; margin: 20px auto; } .communityContainer .childrensFoundation img { width: 100%; } .privacyPolicy h3 { margin: 40px 0 15px; } .privacyPolicy ol { padding-left: 20px; } .smsPolicy li { margin: 0 0 20px 0; } .contactContainer .mapContainer { width: calc(50% - 20px); margin: 20px 0 0 20px; float: right; } .contactContainer .mapContainer iframe { width: 100%; } @media only screen and (max-width: 910px) { .contactContainer .mapContainer { margin-left: 0; width: 50%; } } @media only screen and (max-width: 640px) { .contactContainer .mapContainer { width: 100%; margin: 20px auto; float: none; } } .contactContainer .offices { display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 40px; } @media only screen and (max-width: 640px) { .contactContainer .offices { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .contactContainer .location { width: 33.3%; display: inline-block; margin: 0; text-align: center; } .contactContainer .location h2 { margin: 0; text-align: left; } .contactContainer .location p { margin: 0; } @media only screen and (max-width: 640px) { .contactContainer .location { width: 100%; margin: 10px 0; } .contactContainer .location h2 { text-align: center; } } .dreamersiWarning img { display: block; margin: auto; } .dreamersiWarning h2 { text-align: left; margin-top: 15px; } .vpsContainer h2 { margin-top: 0; } .vpsContainer small { text-align: center; display: block; margin-top: -30px; font-style: italic; font-size: 14px; color: #aaa; } @media only screen and (max-width: 767px) { .vpsContainer small { display: none; } } .vpsContainer .locations { margin: 80px 0 40px; } .vpsContainer .locations img { margin-top: 30px; width: 100%; } @media only screen and (max-width: 560px) { .vpsContainer .locations img { display: none; } } .vpsPlans { display: -ms-flexbox; display: -webkit-box; display: flex; margin: 60px 0; } @media only screen and (max-width: 767px) { .vpsPlans { display: none; } } .vpsPlans .planContainer { padding: 20px 10px; margin: 0 10px; -webkit-box-shadow: 0 0 65px 0 rgba(9,9,9,.1); box-shadow: 0 0 65px 0 rgba(9,9,9,.1); border-radius: 4px; width: 33%; text-align: center; z-index: 10; background: #fff; } .vpsPlans .planContainer:first-child { margin-left: 0; } .vpsPlans .planContainer:last-child { margin-right: 0; } .vpsPlans .planContainer img { max-width: 70px; display: block; margin: auto; } .vpsPlans .planContainer h4 { font-size: 24px; margin: 15px 0 25px; } .vpsPlans .planContainer p { text-align: center; margin-bottom: 0; font-size: 21px; } .vpsPlans .planContainer i { font-style: normal; color: #009a47; font-size: 18px; margin-bottom: 5px; } .vpsPlans .planContainer span { color: #999; display: block; text-align: center; font-style: italic; margin-bottom: 20px; font-size: 14px; } .vpsPlans .planContainer strong { font-weight: 900; font-size: 48px; display: block; margin-top: 15px; } .vpsPlans .planContainer strong span { font-size: 18px; color: #000; display: inline-block; } .vpsPlans .planContainer .btn { margin-top: 0; padding: 10px 15px; } .mobilePlans { display: none; width: 100%; background: #f5f5f5; border-radius: 4px; margin: 40px 0; padding-bottom: 10px; } .mobilePlans ul { display: -ms-flexbox; display: -webkit-box; display: flex; width: 100%; list-style: none; text-align: center; } .mobilePlans ul li { padding: 20px 14px; background: #666; color: #fff; width: 100%; border-bottom: 3px solid #fff; cursor: pointer; border-right: 2px solid #fff; } .mobilePlans ul li.active { color: #505557; background: #f5f5f5; border-bottom: 3px solid #f5f5f5; font-weight: 900; } .mobilePlans ul li:first-child { border-radius: 4px 0 0 0; } .mobilePlans ul li:last-child { border-radius: 0 4px 0 0; border-right: none; } .mobilePlans .advancedPlanDetails, .mobilePlans .enterprisePlanDetails, .mobilePlans .entryPlanDetails, .mobilePlans .standardPlanDetails { display: none; } .mobilePlans .advancedPlanDetails.active, .mobilePlans .enterprisePlanDetails.active, .mobilePlans .entryPlanDetails.active, .mobilePlans .standardPlanDetails.active { display: block; } .mobilePlans .advancedPlanDetails div, .mobilePlans .enterprisePlanDetails div, .mobilePlans .entryPlanDetails div, .mobilePlans .standardPlanDetails div { margin: 20px 5px; text-align: center; } .mobilePlans .advancedPlanDetails div strong, .mobilePlans .enterprisePlanDetails div strong, .mobilePlans .entryPlanDetails div strong, .mobilePlans .standardPlanDetails div strong { display: block; font-weight: 300; font-size: 21px; margin-bottom: 4px; } .mobilePlans .advancedPlanDetails div span, .mobilePlans .enterprisePlanDetails div span, .mobilePlans .entryPlanDetails div span, .mobilePlans .standardPlanDetails div span { font-size: 16px; } .mobilePlans .advancedPlanDetails div i, .mobilePlans .enterprisePlanDetails div i, .mobilePlans .entryPlanDetails div i, .mobilePlans .standardPlanDetails div i { margin-right: none; font-style: normal; color: #009a47; } .mobilePlans .advancedPlanDetails div i:before, .mobilePlans .enterprisePlanDetails div i:before, .mobilePlans .entryPlanDetails div i:before, .mobilePlans .standardPlanDetails div i:before { font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 10px; content: ""; } .mobilePlans .advancedPlanDetails div.price strong, .mobilePlans .enterprisePlanDetails div.price strong, .mobilePlans .entryPlanDetails div.price strong, .mobilePlans .standardPlanDetails div.price strong { font-size: 32px; font-weight: 900; margin-bottom: 10px; } .mobilePlans .advancedPlanDetails div.price span, .mobilePlans .enterprisePlanDetails div.price span, .mobilePlans .entryPlanDetails div.price span, .mobilePlans .standardPlanDetails div.price span { font-size: 16px; } .mobilePlans .advancedPlanDetails a, .mobilePlans .enterprisePlanDetails a, .mobilePlans .entryPlanDetails a, .mobilePlans .standardPlanDetails a { color: #0060ff; background: transparent; padding: 10px 18px; border: 1px solid #0060ff; font-size: 18px; font-weight: bold; text-decoration: none; -webkit-transition: all .4s; transition: all .4s; margin: 30px 20px 10px; position: relative; display: block; line-height: 100%; font-family: "Roboto",sans-serif; border-radius: 4px; text-align: center; } .mobilePlans .advancedPlanDetails a:hover, .mobilePlans .enterprisePlanDetails a:hover, .mobilePlans .entryPlanDetails a:hover, .mobilePlans .standardPlanDetails a:hover { background: #0060ff; color: #fff; -webkit-transition: all .4s; transition: all .4s; } @media only screen and (max-width: 767px) { .mobilePlans { display: block; } } #parked_domains { background: #fff; position: relative; } #parked_domains h2 { margin: 0 0 50px; } #parked_domains a { font-size: 1.3rem; } #parked_domains ul { max-width: 1350px; margin: 0 auto 20px auto; } #parked_domains ul li { width: 32%; padding: 10px 0; display: inline-block; word-break: break-all; } @media screen and (max-width: 1200px) { #parked_domains ul li { width: 49%; } } @media screen and (max-width: 800px) { #parked_domains ul li { width: 100%; } } .partner-program .container img { width: 100%; max-width: 800px; margin: 60px 0 0; } .partner-program .container h2 { margin: 20px 0; } .partner-program .container p { text-align: left; } #referAFriend { position: relative; text-align: center; padding: 0 0 60px 0; } #referAFriend p:last-child { margin: 0; } #referAFriend .refer-benefits { width: 100%; max-width: 700px; margin: 50px auto; background: #e1f9e1; padding: 20px; border: 5px solid #cde8cd; } #referAFriend .refer-benefits h3 { text-align: center; margin: 0 0 20px 0; } #referAFriend .refer-steps h3 { text-align: center; } #referAFriend .refer-steps .fancyList { list-style: none; max-width: 800px; margin: auto; } #referAFriend .refer-steps .fancyList li { text-align: left; z-index: 2; margin: 80px 0 0; font-size: 21px; } #referAFriend .refer-steps .fancyList li:before { content: "01"; font-size: 80px!important; font-weight: 900; opacity: .08; z-index: 1; padding-left: 15px; position: absolute; margin: -52px 0 0; } #referAFriend .refer-steps .fancyList li:first-child { margin: 50px 0 0; } #referAFriend .refer-steps .fancyList li:nth-child(2):before { content: "02"; } #referAFriend .refer-steps .fancyList li:nth-child(3):before { content: "03"; } #referAFriend:after { content: ""; height: 1px; width: 100%; background-color: #727272; margin: auto; max-width: 204px; margin: auto; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } #partnerInquiries { text-align: center; } .requiredAsterisk { display: none; } .notFound { text-align: center; } .notFound .fourohfour { display: block; margin: 40px auto 30px; max-width: 380px; width: 100%; } .notFound h2 { margin-top: 0; } .notFound .othersHeader { text-align: center; margin: 70px auto -30px; font-size: 21px; } .notFound .btn { margin-top: 5px; } .notFound .notFoundServices { display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .notFound .notFoundServices .service { -webkit-transform: none; transform: none; -ms-flex-preferred-size: calc(33% - 10px); flex-basis: calc(33% - 10px); text-align: left; } .notFound .notFoundServices .service:hover { -webkit-transform: translateY(-3px); transform: translateY(-3px); -webkit-transition: all .4s; transition: all .4s; } @media only screen and (max-width: 767px) { .notFound .notFoundServices { -ms-flex-wrap: wrap; flex-wrap: wrap; } .notFound .notFoundServices .service { -ms-flex-preferred-size: 100%; flex-basis: 100%; } .notFound .notFoundServices .service:first-child { margin-top: 80px; } } .aboutUsNav { display: block; margin: -20px auto 60px; } .aboutUsNav ul { padding-left: 40px; } @media only screen and (min-width: 641px) { .aboutUsNav ul { list-style: none; text-align: center; padding-left: 0; } .aboutUsNav ul li { margin-right: 20px; display: inline-block; line-height: 150%; font-size: 15px; } .aboutUsNav ul li:after { content: "|"; margin-left: 20px; } .aboutUsNav ul li:last-child:after { display: none; } } #yourHostAffiliate { background: #385c7c; margin: 120px auto 200px; } @media only screen and (max-width: 767px) { #yourHostAffiliate { margin-top: 180px; } } #yourHostAffiliate .container { padding-top: 25px; } #yourHostAffiliate .container .intro .hero { width: 43%; max-width: 520px; position: absolute; margin-top: -140px; } @media only screen and (max-width: 1024px) { #yourHostAffiliate .container .intro .hero { margin-top: 0; width: 38%; } } @media only screen and (max-width: 767px) { #yourHostAffiliate .container .intro .hero { margin-top: -200px; width: 100%; max-width: 300px; } } #yourHostAffiliate .container .intro .affiliateDetails { width: 64%; color: #fff; float: right; position: relative; } #yourHostAffiliate .container .intro .affiliateDetails img { max-width: 300px; display: inline-block; margin-left: -10px; } #yourHostAffiliate .container .intro .affiliateDetails h2 { display: inline-block; -webkit-transform: translateY(-34px); transform: translateY(-34px); margin-left: 10px; } @media only screen and (max-width: 1024px) { #yourHostAffiliate .container .intro .affiliateDetails img { width: 50%; } #yourHostAffiliate .container .intro .affiliateDetails h2 { font-size: 3.1vw; -webkit-transform: translateY(-3.2vw); transform: translateY(-3.2vw); } } @media only screen and (max-width: 767px) { #yourHostAffiliate .container .intro .affiliateDetails { width: 100%; } #yourHostAffiliate .container .intro .affiliateDetails img { width: 100%; display: block; margin: 0 auto; } #yourHostAffiliate .container .intro .affiliateDetails h2 { -webkit-transform: none; transform: none; margin: 5px 0 40px; width: 100%; font-size: 32px; } } @media only screen and (max-width: 480px) { #yourHostAffiliate .container .intro .affiliateDetails img { margin-top: 30px; } } #yourHostAffiliate .container h3 { clear: both; padding-top: 50px; text-align: center; color: #fff; } #yourHostAffiliate .container .steps { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: -166px; } @media only screen and (max-width: 767px) { #yourHostAffiliate .container .steps { -ms-flex-wrap: wrap; flex-wrap: wrap; } } #yourHostAffiliate .container .steps .step { background: #fff; padding: 25px; width: 33%; margin: 40px 40px 0; position: relative; -webkit-box-shadow: 0 0 60px rgba(0,0,0,.15); box-shadow: 0 0 60px rgba(0,0,0,.15); } #yourHostAffiliate .container .steps .step h4 { font-size: 21px; margin-top: 30px; position: relative; } #yourHostAffiliate .container .steps .step p { margin-top: 30px; } #yourHostAffiliate .container .steps .step .btn { width: 100%; text-align: center; background: #f28e01; border-radius: 3px; font-weight: 600; border: 1px solid #f28e01; color: #fff; position: relative; z-index: 999; } @media only screen and (max-width: 1248px) { #yourHostAffiliate .container .steps .step .btn { padding: 15px 10px; font-size: 14px; } } #yourHostAffiliate .container .steps .step .btn:hover { background: #fff; color: #f28e01; } #yourHostAffiliate .container .steps .step img { position: absolute; max-width: 230px; top: -26px; right: -50px; } @media only screen and (max-width: 1248px) { #yourHostAffiliate .container .steps .step img { max-width: 150px; right: 20px; top: -20px; } } @media only screen and (max-width: 767px) { #yourHostAffiliate .container .steps .step img { position: relative; display: block; margin: auto; right: auto; top: auto; margin-bottom: 20px; } } #yourHostAffiliate .container .steps .step:after { content: ""; background: url("/img/yourhost/arrow-white.png"); width: 90px; height: 60px; position: absolute; background-size: 100% 100%; right: -60px; top: 15px; } @media only screen and (max-width: 1248px) { #yourHostAffiliate .container .steps .step { margin: 40px 25px 0; } #yourHostAffiliate .container .steps .step:after { width: 60px; height: 45px; right: -38px; } } @media only screen and (max-width: 767px) { #yourHostAffiliate .container .steps .step { display: block; margin: 40px auto; width: 100%; max-width: 430px; } #yourHostAffiliate .container .steps .step h4 { text-align: center; margin-top: 10px; } #yourHostAffiliate .container .steps .step:first-child { margin-left: auto!important; } #yourHostAffiliate .container .steps .step:last-child { margin-right: auto!important; } #yourHostAffiliate .container .steps .step:after { -webkit-transform: rotate(90deg) translateY(-50%); transform: rotate(90deg) translateY(-50%); right: calc(50% - 15px); top: auto; bottom: -45px; width: 90px; height: 60px; } } #yourHostAffiliate .container .steps .step:first-child { margin-left: 0; } #yourHostAffiliate .container .steps .step:last-child { margin-right: 0; } #yourHostAffiliate .container .steps .step:last-child:after { display: none; } @media only screen and (max-width: 1130px) { .jpnBody #yourHostAffiliate .container .intro .affiliateDetails h2 { font-size: 2.4vw; } } @media only screen and (max-width: 767px) { .jpnBody #yourHostAffiliate .container .intro .affiliateDetails h2 { font-size: 26px; } } .customerSupportCTA { background: #ededed; margin: 20px 0 0; } .customerSupportCTA .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 80px 16px; padding: 0 15px; } .customerSupportCTA .container.small { max-width: 576px; } .customerSupportCTA .container img { max-width: 380px; margin: -40px 0 -20px 40px; } .customerSupportCTA .container p { margin: 5px 0 10px; } .customerSupportCTA .container h3 { font-size: 28px; } .customerSupportCTA .container .btn { margin-top: 0; } @media only screen and (max-width: 910px) { .customerSupportCTA .container img { max-width: 300px; margin: 20px 0 20px 20px; } } @media only screen and (max-width: 768px) { .customerSupportCTA .container .btn { display: inline-block; } } @media only screen and (max-width: 767px) { .customerSupportCTA .container h3 { font-size: 21px; } .customerSupportCTA .container img { max-width: 220px; } } @media only screen and (max-width: 560px) { .customerSupportCTA .container { -ms-flex-wrap: wrap; flex-wrap: wrap; } .customerSupportCTA .container img { max-width: 300px; margin: -80px 0 20px; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .customerSupportCTA .container div { text-align: center; padding: 0 10px 30px 10px; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .customerSupportCTA .container .btn { display: block; } } .customerSupportTeam .profiles { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 40px; } @media screen and (max-width: 475px) { .customerSupportTeam .profiles { margin: 0; } } .customerSupportTeam .profiles .teamMember { text-align: center; width: calc(50% - 80px); margin: 0 20px 80px; } @media screen and (max-width: 830px) { .customerSupportTeam .profiles .teamMember { width: 100%; } } .customerSupportTeam .profiles .teamMember h3 { padding: 5px 0; } .customerSupportTeam .profiles .teamMember p { text-align: left; } #requestaquoteCTA { background: #f0f9ff; } @media only screen and (max-width: 767px) { #requestaquoteCTA { margin-top: 80px; } } #requestaquoteCTA .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0 16px; max-width: 960px; } @media only screen and (max-width: 560px) { #requestaquoteCTA .container { -ms-flex-wrap: wrap; flex-wrap: wrap; } } #requestaquoteCTA .container div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 40px 0; color: #000; } #requestaquoteCTA .container div h2 { margin: 0 0 20px; border-bottom: 1px solid #1b514a; width: 100%; padding-bottom: 10px; margin-bottom: 10px; text-align: left; } @media only screen and (max-width: 560px) { #requestaquoteCTA .container div h2 { text-align: center; border-bottom: none; } } #requestaquoteCTA .container div p { margin: 0; font-size: 21px; } @media only screen and (max-width: 820px) { #requestaquoteCTA .container div p { font-size: 18px; } } @media only screen and (max-width: 560px) { #requestaquoteCTA .container div .btn { text-align: center; } } @media only screen and (max-width: 560px) { #requestaquoteCTA .container div { display: block; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; padding-top: 10px; } } #requestaquoteCTA .container img { width: 300px; margin: -120px 0 -90px 0; } @media only screen and (max-width: 560px) { #requestaquoteCTA .container img { display: block; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; margin: -80px auto 0; width: 200px; } } .googleLink img { display: inline-block; margin-right: 30px; } .madeAndHosted { display: inline-block; margin-top: 10px; } #st-el-10, #st-el-2, #st-el-3, #st-el-4, #st-el-5, #st-el-6, #st-el-7, #st-el-8, #st-el-9 { z-index: 9999999999!important; } .uchikuraForm .input.email { display: inline-block; width: calc(100% - 160px); margin: 0 0 15px; } .uchikuraForm .input input::-webkit-input-placeholder { color: #a9a9a9!important; font-size: 16px; } .uchikuraForm .input input::-moz-placeholder { color: #a9a9a9!important; font-size: 16px; } .uchikuraForm .input input:-ms-input-placeholder { color: #a9a9a9!important; font-size: 16px; } .uchikuraForm .input input::-ms-input-placeholder { color: #a9a9a9!important; font-size: 16px; } .uchikuraForm .input input::placeholder { color: #a9a9a9!important; font-size: 16px; } .uchikuraForm .submit { display: inline-block; width: 150px; } .uchikuraForm .submit button { padding: 10px 14px; font-size: 16px; } .uchikuraForm .email_form_validation_error { position: absolute; font-size: 14px; font-style: italic; margin-top: 4px; } .press-image { width: 100%; text-align: center; } .press-image img { width: 100%; max-width: 800px; margin: 40px auto; } .screenshot-gallery { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4,1fr); -ms-grid-rows: auto; grid-template-rows: auto; justify-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .screenshot-gallery>:first-child { -ms-grid-row: 1; -ms-grid-column: 1; } .screenshot-gallery>:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 2; } .screenshot-gallery>:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 3; } .screenshot-gallery>:nth-child(4) { -ms-grid-row: 1; -ms-grid-column: 4; } @media only screen and (max-width: 1400px) { .screenshot-gallery { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3,1fr); -ms-grid-rows: auto; grid-template-rows: auto; margin: 0; } .screenshot-gallery>:first-child { -ms-grid-row: 1; -ms-grid-column: 1; } .screenshot-gallery>:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 2; } .screenshot-gallery>:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 3; } } @media only screen and (max-width: 1024px) { .screenshot-gallery { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2,1fr); -ms-grid-rows: auto; grid-template-rows: auto; margin: 0; } .screenshot-gallery>:first-child { -ms-grid-row: 1; -ms-grid-column: 1; } .screenshot-gallery>:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 2; } } @media only screen and (max-width: 768px) { .screenshot-gallery { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media only screen and (max-width: 400px) { .screenshot-gallery { -ms-grid-columns: (1fr)[1]; grid-template-columns: repeat(1,1fr); -ms-grid-rows: auto; grid-template-rows: auto; margin: 0; } .screenshot-gallery>:first-child { -ms-grid-row: 1; -ms-grid-column: 1; } } .screenshot-gallery .showcase_item { padding-bottom: 10px; height: auto; max-width: 100%; margin: 10px 20px; } @media only screen and (max-width: 768px) { .screenshot-gallery .showcase_item { -webkit-box-flex: 0; -ms-flex: 0 0 47%; flex: 0 0 47%; } } .screenshot-gallery .showcase_item a { display: inline-block; -webkit-transition: all .2s ease; transition: all .2s ease; } .screenshot-gallery .showcase_item a:hover { -webkit-transition: all .2s ease; transition: all .2s ease; -webkit-transform: translateY(-8px); transform: translateY(-8px); } .screenshot-gallery .showcase_item img { max-width: 100%; height: auto; border: 1px solid #2e303e; -webkit-box-shadow: 8px 8px 0 #ccc; box-shadow: 8px 8px 0 #ccc; border-radius: 8px; } .screenshot-gallery .showcase_item img:hover { -webkit-transition: all .2s ease; transition: all .2s ease; border-color: #607095; } .download-release a { display: inline-block; padding: 15px 0 15px 50px; margin: 20px 0 0 0; background: url("/img/press/icon-download.png") no-repeat; } .download-release a:hover { background: url("/img/press/icon-download-hover.png") no-repeat; -webkit-transition: background .4s linear; transition: background .4s linear; } .development .logo_title { max-width: 800px; margin: 0 auto 30px; } .development p { max-width: 800px; margin: 0 auto 14px; } .devScreenshots { margin: 0 auto; display: block; width: 100%; } .devScreenshots.mobile { display: none; } @media only screen and (max-width: 560px) { .devScreenshots.desktop { display: none; } .devScreenshots.mobile { display: block; } } .devMockup { margin: 0 auto; width: 100%; display: block; max-width: 680px; } .wdxDesign, .wordpressDesign { display: block; } .wdxDesign h2, .wordpressDesign h2 { margin-top: 15px!important; } .wdxDesign b, .wordpressDesign b { text-align: center; display: block; font-size: 22px; margin: 40px 0 0 0; } .wdxDesign .designShowcase, .wordpressDesign .designShowcase { width: 100%; margin: 80px 0; } .wdxDesign .designShowcase.reve, .wordpressDesign .designShowcase.reve { background-image: linear-gradient(132deg,#450606,#aa0707); } .wdxDesign .designShowcase.paratex, .wordpressDesign .designShowcase.paratex { background-image: linear-gradient(-148deg,#fbad18,#946710); } .wdxDesign .designShowcase.equinox, .wordpressDesign .designShowcase.equinox { background-image: linear-gradient(-148deg,#063a43,#0c86d3); } .wdxDesign .designShowcase img, .wordpressDesign .designShowcase img { width: 100%; max-width: 800px; display: block; margin: 0 auto; } @media only screen and (max-width: 560px) { .wdxDesign .designShowcase, .wordpressDesign .designShowcase { width: calc(100% + 32px); margin-left: -16px; } .wdxDesign .designShowcase img, .wordpressDesign .designShowcase img { width: calc(100% + 40px); margin-left: -20px; } } .fullTestimonial { max-width: 850px; margin: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #cddbe8; border-radius: 20px; -webkit-box-shadow: 0 0 65px 0 rgba(9,9,9,.1); box-shadow: 0 0 65px 0 rgba(9,9,9,.1); margin-bottom: 10px; } .fullTestimonial div:first-child { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 160px; position: relative; } .fullTestimonial div:first-child img { width: 100px; height: 100px; border-radius: 100%; position: absolute; top: -50px; right: -50px; } .fullTestimonial h3 { font-weight: 400; font-size: 24px; margin-top: 10px; position: relative; z-index: 2; } .fullTestimonial h3:before { content: ""; height: 59px; width: 69px; background: url("/img/quote.png"); position: absolute; left: -48px; top: -24px; z-index: -1; } .fullTestimonial span { color: #b94bcc; display: block; margin: 5px 0 20px; } .fullTestimonial div:last-child { width: calc(100% - 160px); background: #fff; padding: 40px 30px 40px 80px; border-radius: 0 20px 20px 0; } @media only screen and (max-width: 910px) { .fullTestimonial { margin: 0 15px; } } @media only screen and (max-width: 640px) { .fullTestimonial { -ms-flex-wrap: wrap; flex-wrap: wrap; } .fullTestimonial div:first-child { width: 100%; height: 80px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .fullTestimonial div:first-child img { right: auto; top: auto; bottom: -50px; } .fullTestimonial h3:before { left: 15px; top: -38px; } .fullTestimonial div:last-child { width: 100%; border-radius: 0 0 20px 20px; padding: 60px 20px 20px; } } .testimonialContainer .btnContainer { margin-bottom: 80px; } @media only screen and (max-width: 767px) { .testimonialContainer .btnContainer { margin: 0 15px 80px; } } .bellevue-web-design .bracket-button, .brand-design .bracket-button, .content-creation .bracket-button, .marketing .bracket-button, .marketing-special .bracket-button, .san-diego-town-special .bracket-button, .san-diego-web-design .bracket-button, .seattle-web-design .bracket-button, .web-design .bracket-button { color: #fff; background: #0697d4; border-width: 2px; border-style: solid; border-color: #0697d4; position: relative; display: inline-block; padding: 14px 28px; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; text-decoration: none; font-size: 18px; font-weight: 700; text-transform: uppercase; font-family: "Raleway","Roboto",sans-serif; } .bellevue-web-design .bracket-button:after, .bellevue-web-design .bracket-button:before, .brand-design .bracket-button:after, .brand-design .bracket-button:before, .content-creation .bracket-button:after, .content-creation .bracket-button:before, .marketing .bracket-button:after, .marketing .bracket-button:before, .marketing-special .bracket-button:after, .marketing-special .bracket-button:before, .san-diego-town-special .bracket-button:after, .san-diego-town-special .bracket-button:before, .san-diego-web-design .bracket-button:after, .san-diego-web-design .bracket-button:before, .seattle-web-design .bracket-button:after, .seattle-web-design .bracket-button:before, .web-design .bracket-button:after, .web-design .bracket-button:before { content: ""; display: block; position: absolute; border-color: #0697d4; -webkit-box-sizing: border-box; box-sizing: border-box; border-style: solid; width: 1em; height: 1em; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .bellevue-web-design .bracket-button:before, .brand-design .bracket-button:before, .content-creation .bracket-button:before, .marketing .bracket-button:before, .marketing-special .bracket-button:before, .san-diego-town-special .bracket-button:before, .san-diego-web-design .bracket-button:before, .seattle-web-design .bracket-button:before, .web-design .bracket-button:before { top: -8px; right: -8px; border-width: 2px 2px 0 0; z-index: 5; } .bellevue-web-design .bracket-button:after, .brand-design .bracket-button:after, .content-creation .bracket-button:after, .marketing .bracket-button:after, .marketing-special .bracket-button:after, .san-diego-town-special .bracket-button:after, .san-diego-web-design .bracket-button:after, .seattle-web-design .bracket-button:after, .web-design .bracket-button:after { bottom: -8px; left: -8px; border-width: 0 0 2px 2px; } .bellevue-web-design .bracket-button:hover:after, .bellevue-web-design .bracket-button:hover:before, .brand-design .bracket-button:hover:after, .brand-design .bracket-button:hover:before, .content-creation .bracket-button:hover:after, .content-creation .bracket-button:hover:before, .marketing .bracket-button:hover:after, .marketing .bracket-button:hover:before, .marketing-special .bracket-button:hover:after, .marketing-special .bracket-button:hover:before, .san-diego-town-special .bracket-button:hover:after, .san-diego-town-special .bracket-button:hover:before, .san-diego-web-design .bracket-button:hover:after, .san-diego-web-design .bracket-button:hover:before, .seattle-web-design .bracket-button:hover:after, .seattle-web-design .bracket-button:hover:before, .web-design .bracket-button:hover:after, .web-design .bracket-button:hover:before { width: calc(100% + 16px); height: calc(100% + 16px); border-color: #0697d4; } .bellevue-web-design .bracket-button:hover, .brand-design .bracket-button:hover, .content-creation .bracket-button:hover, .marketing .bracket-button:hover, .marketing-special .bracket-button:hover, .san-diego-town-special .bracket-button:hover, .san-diego-web-design .bracket-button:hover, .seattle-web-design .bracket-button:hover, .web-design .bracket-button:hover { color: #fff; background-color: #0697d4; border-color: #0697d4; } @media only screen and (max-width: 768px) { .bellevue-web-design .bracket-button, .brand-design .bracket-button, .content-creation .bracket-button, .marketing .bracket-button, .marketing-special .bracket-button, .san-diego-town-special .bracket-button, .san-diego-web-design .bracket-button, .seattle-web-design .bracket-button, .web-design .bracket-button { background-color: #0697d4; border-color: #0697d4; margin: 0; color: #fff!important; } } .bellevue-web-design .bracket-button.feedback-cta, .brand-design .bracket-button.feedback-cta, .content-creation .bracket-button.feedback-cta, .marketing .bracket-button.feedback-cta, .marketing-special .bracket-button.feedback-cta, .san-diego-town-special .bracket-button.feedback-cta, .san-diego-web-design .bracket-button.feedback-cta, .seattle-web-design .bracket-button.feedback-cta, .web-design .bracket-button.feedback-cta { margin: 0; } @media only screen and (max-width: 768px) { .bellevue-web-design .bracket-button.feedback-cta, .brand-design .bracket-button.feedback-cta, .content-creation .bracket-button.feedback-cta, .marketing .bracket-button.feedback-cta, .marketing-special .bracket-button.feedback-cta, .san-diego-town-special .bracket-button.feedback-cta, .san-diego-web-design .bracket-button.feedback-cta, .seattle-web-design .bracket-button.feedback-cta, .web-design .bracket-button.feedback-cta { color: #0697d4; } } .bellevue-web-design .bracket-button.feedback-cta:hover, .brand-design .bracket-button.feedback-cta:hover, .content-creation .bracket-button.feedback-cta:hover, .marketing .bracket-button.feedback-cta:hover, .marketing-special .bracket-button.feedback-cta:hover, .san-diego-town-special .bracket-button.feedback-cta:hover, .san-diego-web-design .bracket-button.feedback-cta:hover, .seattle-web-design .bracket-button.feedback-cta:hover, .web-design .bracket-button.feedback-cta:hover { color: #fff; } @media only screen and (max-width: 767px) { .bellevue-web-design .bracket-button, .brand-design .bracket-button, .content-creation .bracket-button, .marketing .bracket-button, .marketing-special .bracket-button, .san-diego-town-special .bracket-button, .san-diego-web-design .bracket-button, .seattle-web-design .bracket-button, .web-design .bracket-button { width: 100%; } } .bellevue-web-design .plans .container, .brand-design .plans .container, .content-creation .plans .container, .marketing .plans .container, .marketing-special .plans .container, .san-diego-town-special .plans .container, .san-diego-web-design .plans .container, .seattle-web-design .plans .container, .web-design .plans .container { padding-top: 0; } .bellevue-web-design .plans .container h2, .brand-design .plans .container h2, .content-creation .plans .container h2, .marketing .plans .container h2, .marketing-special .plans .container h2, .san-diego-town-special .plans .container h2, .san-diego-web-design .plans .container h2, .seattle-web-design .plans .container h2, .web-design .plans .container h2 { margin-top: 0; } .bellevue-web-design .plans .container p, .brand-design .plans .container p, .content-creation .plans .container p, .marketing .plans .container p, .marketing-special .plans .container p, .san-diego-town-special .plans .container p, .san-diego-web-design .plans .container p, .seattle-web-design .plans .container p, .web-design .plans .container p { text-align: center; } .bellevue-web-design .plans .container .priceDisclaimer, .brand-design .plans .container .priceDisclaimer, .content-creation .plans .container .priceDisclaimer, .marketing .plans .container .priceDisclaimer, .marketing-special .plans .container .priceDisclaimer, .san-diego-town-special .plans .container .priceDisclaimer, .san-diego-web-design .plans .container .priceDisclaimer, .seattle-web-design .plans .container .priceDisclaimer, .web-design .plans .container .priceDisclaimer { text-align: center; font-size: 13px; color: #505557; } .bellevue-web-design .plansContainer, .brand-design .plansContainer, .content-creation .plansContainer, .marketing .plansContainer, .marketing-special .plansContainer, .san-diego-town-special .plansContainer, .san-diego-web-design .plansContainer, .seattle-web-design .plansContainer, .web-design .plansContainer { display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .bellevue-web-design .plansContainer .plan, .brand-design .plansContainer .plan, .content-creation .plansContainer .plan, .marketing .plansContainer .plan, .marketing-special .plansContainer .plan, .san-diego-town-special .plansContainer .plan, .san-diego-web-design .plansContainer .plan, .seattle-web-design .plansContainer .plan, .web-design .plansContainer .plan { width: calc(25% - 20px); border-right: 5px solid #b4b4b4; padding-right: 10px; margin: 30px 0; } .bellevue-web-design .plansContainer .plan p, .brand-design .plansContainer .plan p, .content-creation .plansContainer .plan p, .marketing .plansContainer .plan p, .marketing-special .plansContainer .plan p, .san-diego-town-special .plansContainer .plan p, .san-diego-web-design .plansContainer .plan p, .seattle-web-design .plansContainer .plan p, .web-design .plansContainer .plan p { text-align: left; } .bellevue-web-design .plansContainer .plan strong, .brand-design .plansContainer .plan strong, .content-creation .plansContainer .plan strong, .marketing .plansContainer .plan strong, .marketing-special .plansContainer .plan strong, .san-diego-town-special .plansContainer .plan strong, .san-diego-web-design .plansContainer .plan strong, .seattle-web-design .plansContainer .plan strong, .web-design .plansContainer .plan strong { font-weight: 400; font-size: 16px; display: block; margin-bottom: 15px; } .bellevue-web-design .plansContainer .plan:last-child, .brand-design .plansContainer .plan:last-child, .content-creation .plansContainer .plan:last-child, .marketing .plansContainer .plan:last-child, .marketing-special .plansContainer .plan:last-child, .san-diego-town-special .plansContainer .plan:last-child, .san-diego-web-design .plansContainer .plan:last-child, .seattle-web-design .plansContainer .plan:last-child, .web-design .plansContainer .plan:last-child { border-right: 5px solid #fff; } .bellevue-web-design .plansContainer .plan h4, .brand-design .plansContainer .plan h4, .content-creation .plansContainer .plan h4, .marketing .plansContainer .plan h4, .marketing-special .plansContainer .plan h4, .san-diego-town-special .plansContainer .plan h4, .san-diego-web-design .plansContainer .plan h4, .seattle-web-design .plansContainer .plan h4, .web-design .plansContainer .plan h4 { font-size: 24px; margin-bottom: 15px; } .bellevue-web-design .plansContainer .plan p, .brand-design .plansContainer .plan p, .content-creation .plansContainer .plan p, .marketing .plansContainer .plan p, .marketing-special .plansContainer .plan p, .san-diego-town-special .plansContainer .plan p, .san-diego-web-design .plansContainer .plan p, .seattle-web-design .plansContainer .plan p, .web-design .plansContainer .plan p { font-size: 14px; } .bellevue-web-design .plansContainer .plan ul, .brand-design .plansContainer .plan ul, .content-creation .plansContainer .plan ul, .marketing .plansContainer .plan ul, .marketing-special .plansContainer .plan ul, .san-diego-town-special .plansContainer .plan ul, .san-diego-web-design .plansContainer .plan ul, .seattle-web-design .plansContainer .plan ul, .web-design .plansContainer .plan ul { list-style: none; font-size: 14px; } .bellevue-web-design .plansContainer .plan ul li, .brand-design .plansContainer .plan ul li, .content-creation .plansContainer .plan ul li, .marketing .plansContainer .plan ul li, .marketing-special .plansContainer .plan ul li, .san-diego-town-special .plansContainer .plan ul li, .san-diego-web-design .plansContainer .plan ul li, .seattle-web-design .plansContainer .plan ul li, .web-design .plansContainer .plan ul li { margin-bottom: 4px; } .bellevue-web-design .plansContainer .plan ul li:before, .brand-design .plansContainer .plan ul li:before, .content-creation .plansContainer .plan ul li:before, .marketing .plansContainer .plan ul li:before, .marketing-special .plansContainer .plan ul li:before, .san-diego-town-special .plansContainer .plan ul li:before, .san-diego-web-design .plansContainer .plan ul li:before, .seattle-web-design .plansContainer .plan ul li:before, .web-design .plansContainer .plan ul li:before { font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 10px; content: ""; } .bellevue-web-design .plansContainer .plan ul li:before, .brand-design .plansContainer .plan ul li:before, .content-creation .plansContainer .plan ul li:before, .marketing .plansContainer .plan ul li:before, .marketing-special .plansContainer .plan ul li:before, .san-diego-town-special .plansContainer .plan ul li:before, .san-diego-web-design .plansContainer .plan ul li:before, .seattle-web-design .plansContainer .plan ul li:before, .web-design .plansContainer .plan ul li:before { color: #009a47; } .bellevue-web-design .plansContainer .plan ul li.no, .brand-design .plansContainer .plan ul li.no, .content-creation .plansContainer .plan ul li.no, .marketing .plansContainer .plan ul li.no, .marketing-special .plansContainer .plan ul li.no, .san-diego-town-special .plansContainer .plan ul li.no, .san-diego-web-design .plansContainer .plan ul li.no, .seattle-web-design .plansContainer .plan ul li.no, .web-design .plansContainer .plan ul li.no { color: #ccc; } .bellevue-web-design .plansContainer .plan ul li.no:before, .brand-design .plansContainer .plan ul li.no:before, .content-creation .plansContainer .plan ul li.no:before, .marketing .plansContainer .plan ul li.no:before, .marketing-special .plansContainer .plan ul li.no:before, .san-diego-town-special .plansContainer .plan ul li.no:before, .san-diego-web-design .plansContainer .plan ul li.no:before, .seattle-web-design .plansContainer .plan ul li.no:before, .web-design .plansContainer .plan ul li.no:before { color: #ccc; } .bellevue-web-design .plansContainer .plan ul .fill, .brand-design .plansContainer .plan ul .fill, .content-creation .plansContainer .plan ul .fill, .marketing .plansContainer .plan ul .fill, .marketing-special .plansContainer .plan ul .fill, .san-diego-town-special .plansContainer .plan ul .fill, .san-diego-web-design .plansContainer .plan ul .fill, .seattle-web-design .plansContainer .plan ul .fill, .web-design .plansContainer .plan ul .fill { height: 20px; width: 100%; display: block; } .bellevue-web-design .plansContainer .plan .btn, .brand-design .plansContainer .plan .btn, .content-creation .plansContainer .plan .btn, .marketing .plansContainer .plan .btn, .marketing-special .plansContainer .plan .btn, .san-diego-town-special .plansContainer .plan .btn, .san-diego-web-design .plansContainer .plan .btn, .seattle-web-design .plansContainer .plan .btn, .web-design .plansContainer .plan .btn { background: #0697d4; color: #fff; width: calc(100% - 15px); border-radius: 4px; text-align: center; border: 1px solid #0697d4; } .bellevue-web-design .plansContainer .plan .btn:hover, .brand-design .plansContainer .plan .btn:hover, .content-creation .plansContainer .plan .btn:hover, .marketing .plansContainer .plan .btn:hover, .marketing-special .plansContainer .plan .btn:hover, .san-diego-town-special .plansContainer .plan .btn:hover, .san-diego-web-design .plansContainer .plan .btn:hover, .seattle-web-design .plansContainer .plan .btn:hover, .web-design .plansContainer .plan .btn:hover { background: transparent; color: #0697d4; border: 1px solid #0697d4; } @media only screen and (max-width: 910px) { .bellevue-web-design .plansContainer, .brand-design .plansContainer, .content-creation .plansContainer, .marketing .plansContainer, .marketing-special .plansContainer, .san-diego-town-special .plansContainer, .san-diego-web-design .plansContainer, .seattle-web-design .plansContainer, .web-design .plansContainer { -ms-flex-wrap: wrap; flex-wrap: wrap; } .bellevue-web-design .plansContainer .plan, .brand-design .plansContainer .plan, .content-creation .plansContainer .plan, .marketing .plansContainer .plan, .marketing-special .plansContainer .plan, .san-diego-town-special .plansContainer .plan, .san-diego-web-design .plansContainer .plan, .seattle-web-design .plansContainer .plan, .web-design .plansContainer .plan { width: calc(50% - 20px); } .bellevue-web-design .plansContainer .plan:nth-child(2), .brand-design .plansContainer .plan:nth-child(2), .content-creation .plansContainer .plan:nth-child(2), .marketing .plansContainer .plan:nth-child(2), .marketing-special .plansContainer .plan:nth-child(2), .san-diego-town-special .plansContainer .plan:nth-child(2), .san-diego-web-design .plansContainer .plan:nth-child(2), .seattle-web-design .plansContainer .plan:nth-child(2), .web-design .plansContainer .plan:nth-child(2) { border-right: none; } } @media only screen and (max-width: 560px) { .bellevue-web-design .plansContainer .plan, .brand-design .plansContainer .plan, .content-creation .plansContainer .plan, .marketing .plansContainer .plan, .marketing-special .plansContainer .plan, .san-diego-town-special .plansContainer .plan, .san-diego-web-design .plansContainer .plan, .seattle-web-design .plansContainer .plan, .web-design .plansContainer .plan { width: 100%; border-right: none; } .bellevue-web-design .plansContainer .plan p, .bellevue-web-design .plansContainer .plan strong, .brand-design .plansContainer .plan p, .brand-design .plansContainer .plan strong, .content-creation .plansContainer .plan p, .content-creation .plansContainer .plan strong, .marketing .plansContainer .plan p, .marketing .plansContainer .plan strong, .marketing-special .plansContainer .plan p, .marketing-special .plansContainer .plan strong, .san-diego-town-special .plansContainer .plan p, .san-diego-town-special .plansContainer .plan strong, .san-diego-web-design .plansContainer .plan p, .san-diego-web-design .plansContainer .plan strong, .seattle-web-design .plansContainer .plan p, .seattle-web-design .plansContainer .plan strong, .web-design .plansContainer .plan p, .web-design .plansContainer .plan strong { text-align: center; font-size: 18px; } .bellevue-web-design .plansContainer .plan .btn, .brand-design .plansContainer .plan .btn, .content-creation .plansContainer .plan .btn, .marketing .plansContainer .plan .btn, .marketing-special .plansContainer .plan .btn, .san-diego-town-special .plansContainer .plan .btn, .san-diego-web-design .plansContainer .plan .btn, .seattle-web-design .plansContainer .plan .btn, .web-design .plansContainer .plan .btn { width: 100%; } .bellevue-web-design .plansContainer .plan img, .brand-design .plansContainer .plan img, .content-creation .plansContainer .plan img, .marketing .plansContainer .plan img, .marketing-special .plansContainer .plan img, .san-diego-town-special .plansContainer .plan img, .san-diego-web-design .plansContainer .plan img, .seattle-web-design .plansContainer .plan img, .web-design .plansContainer .plan img { display: block; margin: auto; } .bellevue-web-design .plansContainer .plan h4, .brand-design .plansContainer .plan h4, .content-creation .plansContainer .plan h4, .marketing .plansContainer .plan h4, .marketing-special .plansContainer .plan h4, .san-diego-town-special .plansContainer .plan h4, .san-diego-web-design .plansContainer .plan h4, .seattle-web-design .plansContainer .plan h4, .web-design .plansContainer .plan h4 { text-align: center; } .bellevue-web-design .plansContainer .plan ul, .brand-design .plansContainer .plan ul, .content-creation .plansContainer .plan ul, .marketing .plansContainer .plan ul, .marketing-special .plansContainer .plan ul, .san-diego-town-special .plansContainer .plan ul, .san-diego-web-design .plansContainer .plan ul, .seattle-web-design .plansContainer .plan ul, .web-design .plansContainer .plan ul { font-size: 18px; max-width: 380px; margin: auto; } } @media only screen and (min-width: 1301px) { .bellevue-web-design .plansContainer.wide, .brand-design .plansContainer.wide, .content-creation .plansContainer.wide, .marketing .plansContainer.wide, .marketing-special .plansContainer.wide, .san-diego-town-special .plansContainer.wide, .san-diego-web-design .plansContainer.wide, .seattle-web-design .plansContainer.wide, .web-design .plansContainer.wide { width: calc(100% + 120px); margin-left: -50px; } .bellevue-web-design .plansContainer.wide .plan:last-child, .brand-design .plansContainer.wide .plan:last-child, .content-creation .plansContainer.wide .plan:last-child, .marketing .plansContainer.wide .plan:last-child, .marketing-special .plansContainer.wide .plan:last-child, .san-diego-town-special .plansContainer.wide .plan:last-child, .san-diego-web-design .plansContainer.wide .plan:last-child, .seattle-web-design .plansContainer.wide .plan:last-child, .web-design .plansContainer.wide .plan:last-child { padding-right: 0; } } @media only screen and (min-width: 911px) and (max-width: 1299px) { .bellevue-web-design .plansContainer.wide, .brand-design .plansContainer.wide, .content-creation .plansContainer.wide, .marketing .plansContainer.wide, .marketing-special .plansContainer.wide, .san-diego-town-special .plansContainer.wide, .san-diego-web-design .plansContainer.wide, .seattle-web-design .plansContainer.wide, .web-design .plansContainer.wide { -ms-flex-wrap: wrap; flex-wrap: wrap; } .bellevue-web-design .plansContainer.wide .plan, .brand-design .plansContainer.wide .plan, .content-creation .plansContainer.wide .plan, .marketing .plansContainer.wide .plan, .marketing-special .plansContainer.wide .plan, .san-diego-town-special .plansContainer.wide .plan, .san-diego-web-design .plansContainer.wide .plan, .seattle-web-design .plansContainer.wide .plan, .web-design .plansContainer.wide .plan { width: calc(50% - 20px); } .bellevue-web-design .plansContainer.wide .plan:nth-child(2), .brand-design .plansContainer.wide .plan:nth-child(2), .content-creation .plansContainer.wide .plan:nth-child(2), .marketing .plansContainer.wide .plan:nth-child(2), .marketing-special .plansContainer.wide .plan:nth-child(2), .san-diego-town-special .plansContainer.wide .plan:nth-child(2), .san-diego-web-design .plansContainer.wide .plan:nth-child(2), .seattle-web-design .plansContainer.wide .plan:nth-child(2), .web-design .plansContainer.wide .plan:nth-child(2) { border-right: none; } } .bellevue-web-design .plansContainer.flex .plan, .brand-design .plansContainer.flex .plan, .content-creation .plansContainer.flex .plan, .marketing .plansContainer.flex .plan, .marketing-special .plansContainer.flex .plan, .san-diego-town-special .plansContainer.flex .plan, .san-diego-web-design .plansContainer.flex .plan, .seattle-web-design .plansContainer.flex .plan, .web-design .plansContainer.flex .plan { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .bellevue-web-design .add-ons .container, .brand-design .add-ons .container, .content-creation .add-ons .container, .marketing .add-ons .container, .marketing-special .add-ons .container, .san-diego-town-special .add-ons .container, .san-diego-web-design .add-ons .container, .seattle-web-design .add-ons .container, .web-design .add-ons .container { background: -webkit-gradient(linear,left top,right top,color-stop(23.13%,rgba(255,255,255,.2)),to(rgba(6,151,212,.2))); background: linear-gradient(90deg,rgba(255,255,255,.2) 23.13%,rgba(6,151,212,.2) 100%); display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-size: 16px; padding: 20px; } .bellevue-web-design .add-ons .container h4, .brand-design .add-ons .container h4, .content-creation .add-ons .container h4, .marketing .add-ons .container h4, .marketing-special .add-ons .container h4, .san-diego-town-special .add-ons .container h4, .san-diego-web-design .add-ons .container h4, .seattle-web-design .add-ons .container h4, .web-design .add-ons .container h4 { font-size: 24px; margin-bottom: 15px; } .bellevue-web-design .add-ons .container div, .brand-design .add-ons .container div, .content-creation .add-ons .container div, .marketing .add-ons .container div, .marketing-special .add-ons .container div, .san-diego-town-special .add-ons .container div, .san-diego-web-design .add-ons .container div, .seattle-web-design .add-ons .container div, .web-design .add-ons .container div { width: calc(25% - 10px); } .bellevue-web-design .add-ons .container div ul, .brand-design .add-ons .container div ul, .content-creation .add-ons .container div ul, .marketing .add-ons .container div ul, .marketing-special .add-ons .container div ul, .san-diego-town-special .add-ons .container div ul, .san-diego-web-design .add-ons .container div ul, .seattle-web-design .add-ons .container div ul, .web-design .add-ons .container div ul { list-style: none; font-size: 14px; margin-top: 50px; } .bellevue-web-design .add-ons .container div ul li, .brand-design .add-ons .container div ul li, .content-creation .add-ons .container div ul li, .marketing .add-ons .container div ul li, .marketing-special .add-ons .container div ul li, .san-diego-town-special .add-ons .container div ul li, .san-diego-web-design .add-ons .container div ul li, .seattle-web-design .add-ons .container div ul li, .web-design .add-ons .container div ul li { margin-bottom: 4px; } .bellevue-web-design .add-ons .container div ul li:before, .brand-design .add-ons .container div ul li:before, .content-creation .add-ons .container div ul li:before, .marketing .add-ons .container div ul li:before, .marketing-special .add-ons .container div ul li:before, .san-diego-town-special .add-ons .container div ul li:before, .san-diego-web-design .add-ons .container div ul li:before, .seattle-web-design .add-ons .container div ul li:before, .web-design .add-ons .container div ul li:before { font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 10px; content: ""; } .bellevue-web-design .add-ons .container div ul li:before, .brand-design .add-ons .container div ul li:before, .content-creation .add-ons .container div ul li:before, .marketing .add-ons .container div ul li:before, .marketing-special .add-ons .container div ul li:before, .san-diego-town-special .add-ons .container div ul li:before, .san-diego-web-design .add-ons .container div ul li:before, .seattle-web-design .add-ons .container div ul li:before, .web-design .add-ons .container div ul li:before { color: #009a47; } @media only screen and (max-width: 910px) { .bellevue-web-design .add-ons .container, .brand-design .add-ons .container, .content-creation .add-ons .container, .marketing .add-ons .container, .marketing-special .add-ons .container, .san-diego-town-special .add-ons .container, .san-diego-web-design .add-ons .container, .seattle-web-design .add-ons .container, .web-design .add-ons .container { -ms-flex-wrap: wrap; flex-wrap: wrap; } .bellevue-web-design .add-ons .container div, .brand-design .add-ons .container div, .content-creation .add-ons .container div, .marketing .add-ons .container div, .marketing-special .add-ons .container div, .san-diego-town-special .add-ons .container div, .san-diego-web-design .add-ons .container div, .seattle-web-design .add-ons .container div, .web-design .add-ons .container div { width: calc(50% - 10px); } .bellevue-web-design .add-ons .container div ul, .brand-design .add-ons .container div ul, .content-creation .add-ons .container div ul, .marketing .add-ons .container div ul, .marketing-special .add-ons .container div ul, .san-diego-town-special .add-ons .container div ul, .san-diego-web-design .add-ons .container div ul, .seattle-web-design .add-ons .container div ul, .web-design .add-ons .container div ul { margin-top: 0; } .bellevue-web-design .add-ons .container div:nth-child(2), .brand-design .add-ons .container div:nth-child(2), .content-creation .add-ons .container div:nth-child(2), .marketing .add-ons .container div:nth-child(2), .marketing-special .add-ons .container div:nth-child(2), .san-diego-town-special .add-ons .container div:nth-child(2), .san-diego-web-design .add-ons .container div:nth-child(2), .seattle-web-design .add-ons .container div:nth-child(2), .web-design .add-ons .container div:nth-child(2) { -ms-flex-item-align: end; align-self: flex-end; } } @media only screen and (max-width: 560px) { .bellevue-web-design .add-ons .container, .brand-design .add-ons .container, .content-creation .add-ons .container, .marketing .add-ons .container, .marketing-special .add-ons .container, .san-diego-town-special .add-ons .container, .san-diego-web-design .add-ons .container, .seattle-web-design .add-ons .container, .web-design .add-ons .container { text-align: center; } .bellevue-web-design .add-ons .container div, .brand-design .add-ons .container div, .content-creation .add-ons .container div, .marketing .add-ons .container div, .marketing-special .add-ons .container div, .san-diego-town-special .add-ons .container div, .san-diego-web-design .add-ons .container div, .seattle-web-design .add-ons .container div, .web-design .add-ons .container div { width: 100%; } .bellevue-web-design .add-ons .container p, .brand-design .add-ons .container p, .content-creation .add-ons .container p, .marketing .add-ons .container p, .marketing-special .add-ons .container p, .san-diego-town-special .add-ons .container p, .san-diego-web-design .add-ons .container p, .seattle-web-design .add-ons .container p, .web-design .add-ons .container p { font-size: 18px; } .bellevue-web-design .add-ons .container ul, .brand-design .add-ons .container ul, .content-creation .add-ons .container ul, .marketing .add-ons .container ul, .marketing-special .add-ons .container ul, .san-diego-town-special .add-ons .container ul, .san-diego-web-design .add-ons .container ul, .seattle-web-design .add-ons .container ul, .web-design .add-ons .container ul { font-size: 18px!important; max-width: 380px; margin: auto; text-align: left; } } .bellevue-web-design .examples, .brand-design .examples, .content-creation .examples, .marketing .examples, .marketing-special .examples, .san-diego-town-special .examples, .san-diego-web-design .examples, .seattle-web-design .examples, .web-design .examples { position: relative; } .bellevue-web-design .examples .gradientBg, .brand-design .examples .gradientBg, .content-creation .examples .gradientBg, .marketing .examples .gradientBg, .marketing-special .examples .gradientBg, .san-diego-town-special .examples .gradientBg, .san-diego-web-design .examples .gradientBg, .seattle-web-design .examples .gradientBg, .web-design .examples .gradientBg { background: linear-gradient(264.87deg,#54d8c8 -.32%,#d7ffe2 100%); position: absolute; width: 100%; left: 0; z-index: -1; height: 30vw; top: 20vw; } .bellevue-web-design .examples .container, .brand-design .examples .container, .content-creation .examples .container, .marketing .examples .container, .marketing-special .examples .container, .san-diego-town-special .examples .container, .san-diego-web-design .examples .container, .seattle-web-design .examples .container, .web-design .examples .container { padding-bottom: 0; } .bellevue-web-design .examples a, .brand-design .examples a, .content-creation .examples a, .marketing .examples a, .marketing-special .examples a, .san-diego-town-special .examples a, .san-diego-web-design .examples a, .seattle-web-design .examples a, .web-design .examples a { overflow: visible; } .bellevue-web-design .examples a img, .brand-design .examples a img, .content-creation .examples a img, .marketing .examples a img, .marketing-special .examples a img, .san-diego-town-special .examples a img, .san-diego-web-design .examples a img, .seattle-web-design .examples a img, .web-design .examples a img { border-radius: 5px; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: .3s; transition: .3s; } .bellevue-web-design .examples a:hover img, .brand-design .examples a:hover img, .content-creation .examples a:hover img, .marketing .examples a:hover img, .marketing-special .examples a:hover img, .san-diego-town-special .examples a:hover img, .san-diego-web-design .examples a:hover img, .seattle-web-design .examples a:hover img, .web-design .examples a:hover img { -webkit-transform: translateY(-3px); transform: translateY(-3px); -webkit-transition: .3s; transition: .3s; } .bellevue-web-design .examples .slick-list, .brand-design .examples .slick-list, .content-creation .examples .slick-list, .marketing .examples .slick-list, .marketing-special .examples .slick-list, .san-diego-town-special .examples .slick-list, .san-diego-web-design .examples .slick-list, .seattle-web-design .examples .slick-list, .web-design .examples .slick-list { overflow: visible!important; } .bellevue-web-design .examples .slick-list .slick-slide img, .brand-design .examples .slick-list .slick-slide img, .content-creation .examples .slick-list .slick-slide img, .marketing .examples .slick-list .slick-slide img, .marketing-special .examples .slick-list .slick-slide img, .san-diego-town-special .examples .slick-list .slick-slide img, .san-diego-web-design .examples .slick-list .slick-slide img, .seattle-web-design .examples .slick-list .slick-slide img, .web-design .examples .slick-list .slick-slide img { -webkit-box-shadow: 0 0 20px -5px rgba(0,0,0,.5); box-shadow: 0 0 20px -5px rgba(0,0,0,.5); } .bellevue-web-design .examples button, .brand-design .examples button, .content-creation .examples button, .marketing .examples button, .marketing-special .examples button, .san-diego-town-special .examples button, .san-diego-web-design .examples button, .seattle-web-design .examples button, .web-design .examples button { display: none!important; } .bellevue-web-design .examples .slider_container.mobile, .brand-design .examples .slider_container.mobile, .content-creation .examples .slider_container.mobile, .marketing .examples .slider_container.mobile, .marketing-special .examples .slider_container.mobile, .san-diego-town-special .examples .slider_container.mobile, .san-diego-web-design .examples .slider_container.mobile, .seattle-web-design .examples .slider_container.mobile, .web-design .examples .slider_container.mobile { display: none; } @media only screen and (min-width: 1131px) { .bellevue-web-design .examples .gradientBg, .brand-design .examples .gradientBg, .content-creation .examples .gradientBg, .marketing .examples .gradientBg, .marketing-special .examples .gradientBg, .san-diego-town-special .examples .gradientBg, .san-diego-web-design .examples .gradientBg, .seattle-web-design .examples .gradientBg, .web-design .examples .gradientBg { top: 110px; height: 340px; border-radius: 5px; } .bellevue-web-design .examples .container, .brand-design .examples .container, .content-creation .examples .container, .marketing .examples .container, .marketing-special .examples .container, .san-diego-town-special .examples .container, .san-diego-web-design .examples .container, .seattle-web-design .examples .container, .web-design .examples .container { overflow: hidden; padding-top: 0; } .bellevue-web-design .examples .container .slider_container, .brand-design .examples .container .slider_container, .content-creation .examples .container .slider_container, .marketing .examples .container .slider_container, .marketing-special .examples .container .slider_container, .san-diego-town-special .examples .container .slider_container, .san-diego-web-design .examples .container .slider_container, .seattle-web-design .examples .container .slider_container, .web-design .examples .container .slider_container { margin: 40px 0; width: 100%; } .bellevue-web-design .examples .slick-list, .brand-design .examples .slick-list, .content-creation .examples .slick-list, .marketing .examples .slick-list, .marketing-special .examples .slick-list, .san-diego-town-special .examples .slick-list, .san-diego-web-design .examples .slick-list, .seattle-web-design .examples .slick-list, .web-design .examples .slick-list { overflow: hidden!important; margin: 0; } .bellevue-web-design .examples .slick-list .slick-slide, .brand-design .examples .slick-list .slick-slide, .content-creation .examples .slick-list .slick-slide, .marketing .examples .slick-list .slick-slide, .marketing-special .examples .slick-list .slick-slide, .san-diego-town-special .examples .slick-list .slick-slide, .san-diego-web-design .examples .slick-list .slick-slide, .seattle-web-design .examples .slick-list .slick-slide, .web-design .examples .slick-list .slick-slide { padding: 20px; } .bellevue-web-design .examples .slick-list .slick-slide:not(.slick-active) img, .brand-design .examples .slick-list .slick-slide:not(.slick-active) img, .content-creation .examples .slick-list .slick-slide:not(.slick-active) img, .marketing .examples .slick-list .slick-slide:not(.slick-active) img, .marketing-special .examples .slick-list .slick-slide:not(.slick-active) img, .san-diego-town-special .examples .slick-list .slick-slide:not(.slick-active) img, .san-diego-web-design .examples .slick-list .slick-slide:not(.slick-active) img, .seattle-web-design .examples .slick-list .slick-slide:not(.slick-active) img, .web-design .examples .slick-list .slick-slide:not(.slick-active) img { -webkit-box-shadow: none; box-shadow: none; } } @media only screen and (max-width: 1130px) { .bellevue-web-design .examples .container, .brand-design .examples .container, .content-creation .examples .container, .marketing .examples .container, .marketing-special .examples .container, .san-diego-town-special .examples .container, .san-diego-web-design .examples .container, .seattle-web-design .examples .container, .web-design .examples .container { padding-top: 20px; } .bellevue-web-design .examples .gradientBg, .brand-design .examples .gradientBg, .content-creation .examples .gradientBg, .marketing .examples .gradientBg, .marketing-special .examples .gradientBg, .san-diego-town-special .examples .gradientBg, .san-diego-web-design .examples .gradientBg, .seattle-web-design .examples .gradientBg, .web-design .examples .gradientBg { top: 9vw; height: 28vw; } } @media only screen and (max-width: 960px) { .bellevue-web-design .examples .gradientBg, .brand-design .examples .gradientBg, .content-creation .examples .gradientBg, .marketing .examples .gradientBg, .marketing-special .examples .gradientBg, .san-diego-town-special .examples .gradientBg, .san-diego-web-design .examples .gradientBg, .seattle-web-design .examples .gradientBg, .web-design .examples .gradientBg { top: 12vw; height: 30vw; } } @media only screen and (max-width: 640px) { .bellevue-web-design .examples .gradientBg, .brand-design .examples .gradientBg, .content-creation .examples .gradientBg, .marketing .examples .gradientBg, .marketing-special .examples .gradientBg, .san-diego-town-special .examples .gradientBg, .san-diego-web-design .examples .gradientBg, .seattle-web-design .examples .gradientBg, .web-design .examples .gradientBg { height: 60vw; top: 16vw; } .bellevue-web-design .examples .slider_container .slick-initialized .slick-slide, .brand-design .examples .slider_container .slick-initialized .slick-slide, .content-creation .examples .slider_container .slick-initialized .slick-slide, .marketing .examples .slider_container .slick-initialized .slick-slide, .marketing-special .examples .slider_container .slick-initialized .slick-slide, .san-diego-town-special .examples .slider_container .slick-initialized .slick-slide, .san-diego-web-design .examples .slider_container .slick-initialized .slick-slide, .seattle-web-design .examples .slider_container .slick-initialized .slick-slide, .web-design .examples .slider_container .slick-initialized .slick-slide { padding: 15px!important; } } @media only screen and (max-width: 768px) { .bellevue-web-design .examples .slider_container.mobile, .brand-design .examples .slider_container.mobile, .content-creation .examples .slider_container.mobile, .marketing .examples .slider_container.mobile, .marketing-special .examples .slider_container.mobile, .san-diego-town-special .examples .slider_container.mobile, .san-diego-web-design .examples .slider_container.mobile, .seattle-web-design .examples .slider_container.mobile, .web-design .examples .slider_container.mobile { display: block; } .bellevue-web-design .examples .slider_container.desktop, .brand-design .examples .slider_container.desktop, .content-creation .examples .slider_container.desktop, .marketing .examples .slider_container.desktop, .marketing-special .examples .slider_container.desktop, .san-diego-town-special .examples .slider_container.desktop, .san-diego-web-design .examples .slider_container.desktop, .seattle-web-design .examples .slider_container.desktop, .web-design .examples .slider_container.desktop { display: none; } } .bellevue-web-design .ppccta, .brand-design .ppccta, .content-creation .ppccta, .marketing .ppccta, .marketing-special .ppccta, .san-diego-town-special .ppccta, .san-diego-web-design .ppccta, .seattle-web-design .ppccta, .web-design .ppccta { background: #c7faf7; } .bellevue-web-design .ppccta .container, .brand-design .ppccta .container, .content-creation .ppccta .container, .marketing .ppccta .container, .marketing-special .ppccta .container, .san-diego-town-special .ppccta .container, .san-diego-web-design .ppccta .container, .seattle-web-design .ppccta .container, .web-design .ppccta .container { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bellevue-web-design .ppccta h2, .brand-design .ppccta h2, .content-creation .ppccta h2, .marketing .ppccta h2, .marketing-special .ppccta h2, .san-diego-town-special .ppccta h2, .san-diego-web-design .ppccta h2, .seattle-web-design .ppccta h2, .web-design .ppccta h2 { margin: 0; font-size: 30px; } .bellevue-web-design .ppccta .bracket-button, .brand-design .ppccta .bracket-button, .content-creation .ppccta .bracket-button, .marketing .ppccta .bracket-button, .marketing-special .ppccta .bracket-button, .san-diego-town-special .ppccta .bracket-button, .san-diego-web-design .ppccta .bracket-button, .seattle-web-design .ppccta .bracket-button, .web-design .ppccta .bracket-button { margin-left: 40px; } @media only screen and (max-width: 768px) { .bellevue-web-design .ppccta .container, .bellevue-web-design .ppccta h2, .brand-design .ppccta .container, .brand-design .ppccta h2, .content-creation .ppccta .container, .content-creation .ppccta h2, .marketing .ppccta .container, .marketing .ppccta h2, .marketing-special .ppccta .container, .marketing-special .ppccta h2, .san-diego-town-special .ppccta .container, .san-diego-town-special .ppccta h2, .san-diego-web-design .ppccta .container, .san-diego-web-design .ppccta h2, .seattle-web-design .ppccta .container, .seattle-web-design .ppccta h2, .web-design .ppccta .container, .web-design .ppccta h2 { display: block; } .bellevue-web-design .ppccta .bracket-button, .brand-design .ppccta .bracket-button, .content-creation .ppccta .bracket-button, .marketing .ppccta .bracket-button, .marketing-special .ppccta .bracket-button, .san-diego-town-special .ppccta .bracket-button, .san-diego-web-design .ppccta .bracket-button, .seattle-web-design .ppccta .bracket-button, .web-design .ppccta .bracket-button { margin: 40px 0 0 0; } } .bellevue-web-design #lightboxOverlay, .brand-design #lightboxOverlay, .content-creation #lightboxOverlay, .marketing #lightboxOverlay, .marketing-special #lightboxOverlay, .san-diego-town-special #lightboxOverlay, .san-diego-web-design #lightboxOverlay, .seattle-web-design #lightboxOverlay, .web-design #lightboxOverlay { opacity: .9!important; } .bellevue-web-design .lightbox .lb-outerContainer, .brand-design .lightbox .lb-outerContainer, .content-creation .lightbox .lb-outerContainer, .marketing .lightbox .lb-outerContainer, .marketing-special .lightbox .lb-outerContainer, .san-diego-town-special .lightbox .lb-outerContainer, .san-diego-web-design .lightbox .lb-outerContainer, .seattle-web-design .lightbox .lb-outerContainer, .web-design .lightbox .lb-outerContainer { background-color: transparent!important; } .bellevue-web-design .lightbox .lb-outerContainer .lb-image, .brand-design .lightbox .lb-outerContainer .lb-image, .content-creation .lightbox .lb-outerContainer .lb-image, .marketing .lightbox .lb-outerContainer .lb-image, .marketing-special .lightbox .lb-outerContainer .lb-image, .san-diego-town-special .lightbox .lb-outerContainer .lb-image, .san-diego-web-design .lightbox .lb-outerContainer .lb-image, .seattle-web-design .lightbox .lb-outerContainer .lb-image, .web-design .lightbox .lb-outerContainer .lb-image { border: none!important; } .bellevue-web-design #customWDX .devScreenshots, .brand-design #customWDX .devScreenshots, .content-creation #customWDX .devScreenshots, .marketing #customWDX .devScreenshots, .marketing-special #customWDX .devScreenshots, .san-diego-town-special #customWDX .devScreenshots, .san-diego-web-design #customWDX .devScreenshots, .seattle-web-design #customWDX .devScreenshots, .web-design #customWDX .devScreenshots { max-width: 800px; } @media only screen and (min-width: 768px) { .web-design .btnContainer a:nth-child(2) { margin-left: 20px; margin-right: 20px; } } .web-design .testimonialContainer .fullTestimonial { background: #ff9040; margin-top: 80px; } .web-design .testimonialContainer .fullTestimonial h3 { font-weight: bold; } .web-design .testimonialContainer .fullTestimonial h3:before { display: none; } .web-design .testimonialContainer .fullTestimonial span { color: #4d5e80; } .web-design .testimonialContainer .btn { color: #000; border-color: #000; } .web-design .testimonialContainer .btn:hover { opacity: 1; background: #000; color: #fff; } .marketing .lowKeyCTA, .marketing-special .lowKeyCTA, .san-diego-town-special .lowKeyCTA { margin: 0 auto 80px; } .marketing .plansContainer .plan, .marketing-special .plansContainer .plan, .san-diego-town-special .plansContainer .plan { width: calc(33.33% - 20px); } .marketing .plansContainer .plan strong .fees, .marketing-special .plansContainer .plan strong .fees, .san-diego-town-special .plansContainer .plan strong .fees { font-size: 14px; color: #5b5b5b; } .marketing .plansContainer .plan img, .marketing-special .plansContainer .plan img, .san-diego-town-special .plansContainer .plan img { height: 50px; } @media only screen and (max-width: 910px) { .marketing .plansContainer .plan, .marketing-special .plansContainer .plan, .san-diego-town-special .plansContainer .plan { width: calc(50% - 13px); } .marketing .plansContainer .plan:last-child, .marketing-special .plansContainer .plan:last-child, .san-diego-town-special .plansContainer .plan:last-child { margin-left: auto; margin-right: auto; padding-right: 0; } } @media only screen and (max-width: 560px) { .marketing .plansContainer .plan, .marketing-special .plansContainer .plan, .san-diego-town-special .plansContainer .plan { width: 100%; border-right: none; padding-right: 0; } } .marketing .add-ons .container div img, .marketing-special .add-ons .container div img, .san-diego-town-special .add-ons .container div img { width: 90px; } .marketing .add-ons .container div ul, .marketing-special .add-ons .container div ul, .san-diego-town-special .add-ons .container div ul { font-size: 16px; } .marketing .add-ons .container div ul li#by-estimate, .marketing-special .add-ons .container div ul li#by-estimate, .san-diego-town-special .add-ons .container div ul li#by-estimate { font-size: 20px; font-weight: 700; margin: 20px 0 0 0; } .marketing .add-ons .container div ul li#by-estimate:before, .marketing-special .add-ons .container div ul li#by-estimate:before, .san-diego-town-special .add-ons .container div ul li#by-estimate:before { content: ""; margin: 0; } .marketing .servicesContainer .container, .marketing-special .servicesContainer .container, .san-diego-town-special .servicesContainer .container { padding-top: 20px; } @media only screen and (max-width: 640px) { .marketing .servicesContainer .container, .marketing-special .servicesContainer .container, .san-diego-town-special .servicesContainer .container { padding-top: 0; } } .marketing .servicesContainer h2, .marketing-special .servicesContainer h2, .san-diego-town-special .servicesContainer h2 { position: relative; top: -72px; width: 100%; } @media only screen and (max-width: 640px) { .marketing .servicesContainer h2, .marketing-special .servicesContainer h2, .san-diego-town-special .servicesContainer h2 { top: 0; margin-top: 0; } } .website-evaluation-tool header.subPageHeader { background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,.6))),url("/img/headers/website-evaluation-tool.jpg") center/cover; background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url("/img/headers/website-evaluation-tool.jpg") center/cover; } .website-evaluation-tool section .container { padding: 2em 1em; } .website-evaluation-tool .lowKeyCTA { padding-bottom: 0; } .website-evaluation-tool .lowKeyCTA:after { display: none; } .marketing .marketing-emblem.desktop { position: absolute; right: 16px; bottom: -80px; -webkit-animation: .3s forwards promoFade; animation: .3s forwards promoFade; -webkit-animation-delay: .4s; animation-delay: .4s; opacity: 0; -webkit-transform: translate3d(0,10%,0); transform: translate3d(0,10%,0); } .marketing .marketing-emblem.desktop img { -webkit-transform: rotate(5deg); transform: rotate(5deg); } .marketing .marketing-emblem.desktop img:hover { -webkit-animation: .3s ease wiggle; animation: .3s ease wiggle; } @media only screen and (max-width: 768px) { .marketing .marketing-emblem.desktop { display: none; } } .marketing .marketing-emblem.mobile { display: none; width: 100%; position: absolute; bottom: -20px; } .marketing .marketing-emblem.mobile img { width: 100%; max-width: 350px; margin: 0 auto; display: block; } @media only screen and (max-width: 768px) { .marketing .marketing-emblem.mobile { display: block; } } .marketing .lowKeyCTA { max-width: 840px; } .marketing .plansContainer .plan { position: relative; } .marketing .plansContainer .plan .emblem { height: 100px; position: absolute; right: 20px; top: 0; -webkit-transform: rotate(5deg); transform: rotate(5deg); } @media only screen and (max-width: 560px) { .marketing .plansContainer .plan .emblem { right: 0; } } .marketing .plansContainer .plan .highlight { font-size: 14px; margin: -10px 0 20px; display: block; font-weight: bold; color: #0697d4; } @media only screen and (max-width: 560px) { .marketing .plansContainer .plan .highlight { text-align: center; font-size: 18px; margin: -10px 0 25px; } } @media only screen and (max-width: 768px) { .marketing header .heroContainer { padding-bottom: 60px!important; } .marketing .lowKeyCTA h2 { margin-top: 40px; } } .marketing-signup-form h2 { text-wrap: balance; } .marketing-signup-form h2 i { font-weight: bold; font-style: italic; } .marketing-signup-form .generated-form { max-width: 600px; margin: 40px auto; padding: 0 20px; } .marketing-signup-form .submit { text-align: center; width: 100%; } .marketing-signup-form .thankYouMessage { display: block; margin: 40px auto; font-size: 24px; font-weight: bold; color: #0697d4; text-wrap: balance; text-align: center; } .content-creation .intro, .ecommerce .intro { text-align: center; } .content-creation .intro li, .content-creation .intro p, .content-creation .intro strong, .ecommerce .intro li, .ecommerce .intro p, .ecommerce .intro strong { font-size: 21px; } .content-creation .intro span, .ecommerce .intro span { font-weight: 500; } .content-creation .intro strong, .ecommerce .intro strong { margin: 40px auto 20px; display: block; } .content-creation .intro ul, .ecommerce .intro ul { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 30px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 400px; margin: 20px auto 0; } .content-creation .intro ul li, .ecommerce .intro ul li { text-align: left; } @media only screen and (max-width: 640px) { .content-creation .intro ul, .ecommerce .intro ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 15px; max-width: 200px; } } .content-creation ul.fancy, .ecommerce ul.fancy { list-style: none; } .content-creation ul.fancy li, .ecommerce ul.fancy li { position: relative; padding-left: 40px; line-height: 30px; } .content-creation ul.fancy li:before, .ecommerce ul.fancy li:before { content: ""; height: 30px; width: 30px; position: absolute; left: 0; background: url("/img/fancy-checkmark.svg"); background-size: cover; } .content-creation .ecommercePlansContainer, .ecommerce .ecommercePlansContainer { margin-bottom: 80px; } .content-creation .ecommercePlansContainer h2, .ecommerce .ecommercePlansContainer h2 { margin: 0 0 -10px; } .content-creation .ecommercePlansContainer .container, .ecommerce .ecommercePlansContainer .container { display: -ms-flexbox; display: -webkit-box; display: flex; } .content-creation .ecommercePlansContainer .container .planContainer, .ecommerce .ecommercePlansContainer .container .planContainer { padding: 20px; margin: 0 20px; -webkit-box-shadow: 0 0 65px 0 rgba(9,9,9,.1); box-shadow: 0 0 65px 0 rgba(9,9,9,.1); border-radius: 20px; width: 33%; text-align: center; z-index: 10; background: #fff; } .content-creation .ecommercePlansContainer .container .planContainer:first-child, .ecommerce .ecommercePlansContainer .container .planContainer:first-child { margin-left: 0; margin-top: 0; } .content-creation .ecommercePlansContainer .container .planContainer:last-child, .ecommerce .ecommercePlansContainer .container .planContainer:last-child { margin-right: 0; margin-bottom: 0; } .content-creation .ecommercePlansContainer .container .planContainer img, .ecommerce .ecommercePlansContainer .container .planContainer img { max-width: 150px; display: block; margin: 20px auto; } .content-creation .ecommercePlansContainer .container .planContainer h4, .ecommerce .ecommercePlansContainer .container .planContainer h4 { font-size: 24px; margin: 5px 0 10px; } .content-creation .ecommercePlansContainer .container .planContainer .btn, .ecommerce .ecommercePlansContainer .container .planContainer .btn { margin: 20px auto; width: 100%; max-width: 275px; font-size: 21px; border: 1px solid #0060ff; color: #fff; background: #0060ff; opacity: .7; -webkit-transition: all .4s; transition: all .4s; } .content-creation .ecommercePlansContainer .container .planContainer .btn:hover, .ecommerce .ecommercePlansContainer .container .planContainer .btn:hover { background: transparent; color: #0060ff; opacity: .7; -webkit-transition: all .4s; transition: all .4s; } .content-creation .ecommercePlansContainer .container .planContainer ul, .ecommerce .ecommercePlansContainer .container .planContainer ul { list-style: none; text-align: left; max-width: 275px; margin: 0 auto 15px; font-weight: 300; font-size: 16px; } .content-creation .ecommercePlansContainer .container .planContainer ul li, .ecommerce .ecommercePlansContainer .container .planContainer ul li { padding: 8px 0; border-bottom: 1px solid #cfcfcf; } .content-creation .ecommercePlansContainer .container .planContainer ul li span, .ecommerce .ecommercePlansContainer .container .planContainer ul li span { font-weight: 900; } .content-creation .ecommercePlansContainer .container .planContainer ul li:last-child, .ecommerce .ecommercePlansContainer .container .planContainer ul li:last-child { border-bottom: none; padding-bottom: 0; } .content-creation .ecommercePlansContainer .container .planContainer ul li:not(:first-child,:nth-child(2)), .ecommerce .ecommercePlansContainer .container .planContainer ul li:not(:first-child,:nth-child(2)) { padding-left: 18px; } .content-creation .ecommercePlansContainer .container .planContainer ul li:not(:first-child,:nth-child(2)):before, .ecommerce .ecommercePlansContainer .container .planContainer ul li:not(:first-child,:nth-child(2)):before { content: "✓"; color: #00a84f; font-weight: bold; position: absolute; margin-left: -18px; } @media only screen and (max-width: 1024px) { .content-creation .ecommercePlansContainer .container .planContainer, .ecommerce .ecommercePlansContainer .container .planContainer { padding: 20px 10px; margin: 0 10px; } } @media only screen and (max-width: 910px) { .content-creation .ecommercePlansContainer .container, .ecommerce .ecommercePlansContainer .container { display: block; } .content-creation .ecommercePlansContainer .container .planContainer, .ecommerce .ecommercePlansContainer .container .planContainer { width: 100%; max-width: 450px; display: block; margin: 60px auto!important; } .content-creation .ecommercePlansContainer .container .planContainer:first-child, .ecommerce .ecommercePlansContainer .container .planContainer:first-child { margin-top: 0!important; } .content-creation .ecommercePlansContainer .container .planContainer:last-child, .ecommerce .ecommercePlansContainer .container .planContainer:last-child { margin-bottom: 0!important; } } .content-creation .ecommercePlansContainer .bg-gradient, .ecommerce .ecommercePlansContainer .bg-gradient { width: 100%; height: 420px; position: absolute; margin-top: -560px; background: linear-gradient(162.41deg,#eee 8.27%,rgba(203,203,203,0) 85.66%); } @media only screen and (max-width: 910px) { .content-creation .ecommercePlansContainer .bg-gradient, .ecommerce .ecommercePlansContainer .bg-gradient { display: none; } } .content-creation .finePrint, .ecommerce .finePrint { text-align: center; margin-top: -30px; z-index: 999; position: relative; } .content-creation .finePrint small, .ecommerce .finePrint small { font-style: italic; color: #aaa; display: block; } .content-creation .devCTA .container, .ecommerce .devCTA .container { padding-top: 0; } .content-creation .devCTA .container h2, .ecommerce .devCTA .container h2 { margin-top: 0; } .content-creation .devCTA .container p, .ecommerce .devCTA .container p { text-align: center; text-wrap: balance; } .content-creation .moreInfo .container, .ecommerce .moreInfo .container { max-width: 750px; } .content-creation .moreInfo .container .inner-container, .ecommerce .moreInfo .container .inner-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 20px; } .content-creation .moreInfo .container .inner-container:not(:last-child), .ecommerce .moreInfo .container .inner-container:not(:last-child) { margin-bottom: 80px; } .content-creation .moreInfo .container .inner-container div h2, .ecommerce .moreInfo .container .inner-container div h2 { margin: 0 0 10px 0; text-align: left; } .content-creation .moreInfo .container .inner-container div p, .ecommerce .moreInfo .container .inner-container div p { margin-bottom: 0; } .content-creation .moreInfo .container .inner-container div .secondaryBtn, .ecommerce .moreInfo .container .inner-container div .secondaryBtn { display: block; margin: 20px 0 0; } @media only screen and (max-width: 767px) { .content-creation .moreInfo .container .inner-container, .ecommerce .moreInfo .container .inner-container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .content-creation .moreInfo .container .inner-container:not(:last-child), .ecommerce .moreInfo .container .inner-container:not(:last-child) { margin-bottom: 40px; } .content-creation .moreInfo .container .inner-container div, .ecommerce .moreInfo .container .inner-container div { text-align: center; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .content-creation .moreInfo .container .inner-container div h2, .ecommerce .moreInfo .container .inner-container div h2 { text-align: center; } } .content-creation .addOns { background: #fff; } .content-creation .addOns .container { padding-top: 0; } .content-creation .moreInfo { background: #f3f7ff; } .content-creation .ecommercePlansContainer { padding: 80px 16px 0; } .content-creation .ecommercePlansContainer h2 { margin-bottom: 20px; } .content-creation .ecommercePlansContainer p { text-align: center; max-width: 1200px; width: 100%; margin: 0 auto 30px; } .content-creation .ecommercePlansContainer .container { padding-top: 0; } .content-creation .ecommercePlansContainer .container .planContainer img { max-width: 175px; } .content-creation .ecommercePlansContainer .container .planContainer p { font-size: 16px; text-align: left; margin-bottom: 20px; } .addOns { background: #f3f7ff; } .addOns .container { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 60px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .addOns .container img { max-width: 320px; } @media only screen and (max-width: 960px) { .addOns .container img { max-width: 250px; } } @media only screen and (max-width: 767px) { .addOns .container img { display: none; } } .addOns .container .addons-content h2 { margin: 0 0 20px 0; text-align: left; } .addOns .container .addons-content ul li { margin-bottom: 10px; } .addOns .container .addons-content small { display: block; margin-top: 20px; } .marketing-cta { margin: 20px 0; } @media only screen and (max-width: 767px) { .marketing-cta { background: #f0f0f0; margin: 60px 15px; border-radius: 10px; } } .marketing-cta .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (max-width: 767px) { .marketing-cta .container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .marketing-cta .left-column { width: calc(50% - 30px); padding: 40px 0; position: relative; } @media only screen and (max-width: 767px) { .marketing-cta .left-column { width: 100%; padding-top: 0; } } .marketing-cta .left-column:before { content: ""; z-index: -1; position: absolute; top: 0; bottom: 0; width: calc(50vw + 200px); right: -200px; background: #f0f0f0; } @media only screen and (max-width: 767px) { .marketing-cta .left-column:before { display: none; } } .marketing-cta .right-column { width: 50%; } @media only screen and (max-width: 767px) { .marketing-cta .right-column { width: 100%; } } .marketing-cta img { width: 100%; } .marketing-cta img.mobile { display: none; } @media only screen and (max-width: 640px) { .marketing-cta img.desktop { display: none; } .marketing-cta img.mobile { display: block; } } .marketing-cta h2 { margin: 0 0 20px; border-bottom: 1px solid #1b514a; width: 100%; padding-bottom: 10px; margin-bottom: 10px; text-align: left; } @media only screen and (max-width: 560px) { .marketing-cta h2 { text-align: center; border-bottom: none; } } .marketing-cta p { margin: 0; font-size: 21px; } @media only screen and (max-width: 820px) { .marketing-cta p { font-size: 18px; } } @media only screen and (max-width: 767px) { .marketing-cta .btn { text-align: center; } } .marketing-cta .results-container span.result { font-family: "Neuton",serif; color: #8a0507; font-size: 140px; position: relative; line-height: 80px; font-weight: 600; padding-right: 120px; } .marketing-cta .results-container span.result:after { content: ""; height: 87px; width: 71px; background: url("/img/case-study/results.svg"); background-size: 100% 100%; position: absolute; right: 0; bottom: 33px; } .marketing-cta .results-container p { font-family: "Neuton",serif; color: #8a0507; font-size: 32px; font-weight: 600; } .marketing-cta .results-container.blue span.result { color: #0060ff; } .marketing-cta .results-container.blue span.result:after { background: url("/img/case-study/results-blue.svg"); background-size: 100% 100%; } .marketing-cta .results-container.blue p { color: #0060ff; } @media only screen and (max-width: 960px) { .marketing-cta .results-container span.result { font-size: 100px; line-height: 60px; padding-right: 90px; } .marketing-cta .results-container span.result:after { width: 50px; bottom: 12px; } .marketing-cta .results-container p { font-size: 24px; } } .marketing-cta.design .left-column { width: calc(40% - 30px); } .marketing-cta.design .right-column { width: 60%; } @media only screen and (max-width: 767px) { .marketing-cta.design .left-column { width: 100%; } .marketing-cta.design .right-column { width: 100%; } } .data-center { display: -webkit-box; display: -ms-flexbox; display: flex; --gap: 20px; --columns: 3; width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 30px; } .data-center img { width: calc(100% / var(--columns) - var(--gap) + var(--gap) / var(--columns)); border-radius: 4px; } @media only screen and (max-width: 560px) { .data-center { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; --columns: 1; gap: 20px; } } .domain-search-home { background: #f0f7fc; color: #000; margin-top: -3vw; padding-top: 2vw; padding-bottom: 2vw; } @media only screen and (max-width: 768px) { .domain-search-home { padding-top: 6vw; padding-bottom: 8vw; } } @media only screen and (max-width: 560px) { .domain-search-home { margin-bottom: -3px; } } .domain-search-home .di-wrap { display: table; margin-inline: auto; } .domain-search-home .dreamersi-logo { width: 150px; margin: 0 auto; display: block; } .domain-search-home .container { min-height: 400px; } @media only screen and (max-width: 560px) { .domain-search-home .container { min-height: 430px; } } .domain-search-home h2 { margin-bottom: 60px; margin-top: 20px; } @media only screen and (max-width: 768px) { .domain-search-home h2 { font-size: 32px; margin-bottom: 20px; } } @media only screen and (max-width: 480px) { .domain-search-home h2 { font-size: 6.7vw; } } .domain-search-home form { max-width: 900px; margin: auto; font-family: "Roboto",sans-serif; position: relative; } .domain-search-home form .radioAndInputContainer { position: absolute; width: 100%; } .domain-search-home form .radioAndInputContainer input[type=radio]#registerDomainRadio, .domain-search-home form .radioAndInputContainer label[for=registerDomainRadio] { position: relative; z-index: 999; } .domain-search-home form .radioAndInputContainer input[type=radio]#transferDomainRadio, .domain-search-home form .radioAndInputContainer label[for=transferDomainRadio] { position: relative; left: 240px; } @media only screen and (max-width: 768px) { .domain-search-home form .radioAndInputContainer input[type=radio]#transferDomainRadio, .domain-search-home form .radioAndInputContainer label[for=transferDomainRadio] { left: 0; top: 34px; } } .domain-search-home form .radioAndInputContainer .inputContainer { margin-top: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media only screen and (max-width: 768px) { .domain-search-home form .radioAndInputContainer .inputContainer { margin-top: 60px; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .domain-search-home form .radioAndInputContainer .inputContainer input, .domain-search-home form .radioAndInputContainer .inputContainer select { font-size: 18px; padding: 8px; border-radius: 3px; border: none; background: #fff; color: #000; -webkit-box-shadow: rgba(0,0,0,.16) 0 10px 36px 0,rgba(0,0,0,.06) 0 0 0 1px; box-shadow: rgba(0,0,0,.16) 0 10px 36px 0,rgba(0,0,0,.06) 0 0 0 1px; } .domain-search-home form .radioAndInputContainer .inputContainer input:focus, .domain-search-home form .radioAndInputContainer .inputContainer select:focus { outline: none; } .domain-search-home form .radioAndInputContainer .inputContainer input { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .domain-search-home form .radioAndInputContainer .inputContainer input[name=domainNameForRegister], .domain-search-home form .radioAndInputContainer .inputContainer input[name=domainNameForTranfer] { width: 100%; } @media only screen and (max-width: 768px) { .domain-search-home form .radioAndInputContainer .inputContainer input[name=domainNameForRegister], .domain-search-home form .radioAndInputContainer .inputContainer input[name=domainNameForTranfer] { width: calc(100% - 200px); } } @media only screen and (max-width: 560px) { .domain-search-home form .radioAndInputContainer .inputContainer input[name=domainNameForRegister], .domain-search-home form .radioAndInputContainer .inputContainer input[name=domainNameForTranfer] { width: calc(100% - 160px); } } .domain-search-home form .radioAndInputContainer .inputContainer select>option { color: #000; } .domain-search-home form .radioAndInputContainer .inputContainer .submitButton { margin-left: 10px; font-size: 18px; padding: 8px 24px; -webkit-transition: all .3s; transition: all .3s; background: #0697d4; color: #fff; cursor: pointer; } @media only screen and (max-width: 768px) { .domain-search-home form .radioAndInputContainer .inputContainer .submitButton { margin-left: 0; margin-top: 10px; } } .domain-search-home form .radioAndInputContainer .inputContainer .submitButton:hover { -webkit-transition: all .3s; transition: all .3s; background: #fff; color: #0697d4; } .domain-search-home .error-container { width: 100%; text-align: center; } .domain-search-home .domainValidationErrorMessage { margin: 10px auto 0; position: relative; padding-left: 26px; display: inline-block; color: #d31f27; } .domain-search-home .domainValidationErrorMessage:before { content: ""; position: absolute; width: 20px; height: 18px; left: 0; top: 2px; background: url("/img/dreamersi/2025-campaign/alert-red.svg"); background-size: 100% 100%; } .domain-search-home .domainValidationErrorMessage.jpn:before { top: 4px; } @media only screen and (max-width: 1130px) { .jpnBody .domain-search-home .container { min-height: 500px; } } .design-process { padding: 0 20px; } .design-process .container { padding-bottom: 0; padding-top: 0; } .design-process .container p { text-align: center; } .design-process .process-step { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; width: calc(100% - 50px); max-width: 800px; background: #fff; border-radius: 10px; padding: 40px; position: relative; margin: 40px auto; -webkit-transform: translateX(-30px); transform: translateX(-30px); -webkit-box-shadow: rgba(50,50,93,.25) 0 13px 27px -5px,rgba(0,0,0,.3) 0 8px 16px -8px; box-shadow: rgba(50,50,93,.25) 0 13px 27px -5px,rgba(0,0,0,.3) 0 8px 16px -8px; } @media only screen and (max-width: 640px) { .design-process .process-step { width: calc(100% - 30px); margin: 20px auto; -webkit-transform: translateX(-10px); transform: translateX(-10px); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; } } .design-process .process-step img { width: 100px; } @media only screen and (max-width: 640px) { .design-process .process-step img { width: 80px; } } .design-process .process-step h3 { margin-bottom: 10px; } .design-process .process-step p { margin-bottom: 0; } .design-process .process-step>div * { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); } .design-process .process-step.in-view>div * { -webkit-animation: .4s ease forwards fadeup; animation: .4s ease forwards fadeup; } .design-process .process-step.in-view>div :nth-child(7n-6) { -webkit-animation-delay: .15s; animation-delay: .15s; } .design-process .process-step.in-view>div :nth-child(7n-5) { -webkit-animation-delay: .2s; animation-delay: .2s; } .design-process .process-step.in-view>div :nth-child(7n-4) { -webkit-animation-delay: .25s; animation-delay: .25s; } .design-process .process-step.in-view>div :nth-child(7n-3) { -webkit-animation-delay: .3s; animation-delay: .3s; } .design-process .process-step.in-view>div :nth-child(7n-2) { -webkit-animation-delay: .35s; animation-delay: .35s; } .design-process .process-step.in-view>div :nth-child(7n-1) { -webkit-animation-delay: .4s; animation-delay: .4s; } .design-process .process-step.in-view>div :nth-child(7n) { -webkit-animation-delay: .45s; animation-delay: .45s; } .design-process .process-step:nth-child(odd) { -webkit-transform: translateX(30px); transform: translateX(30px); } @media only screen and (max-width: 640px) { .design-process .process-step:nth-child(odd) { -webkit-transform: translateX(10px); transform: translateX(10px); } } .design-process .process-step:nth-child(odd) .design-arrow { -webkit-transform: scaleX(-1) rotate(5deg); transform: scaleX(-1) rotate(5deg); position: absolute; left: auto; right: -10px; } @media only screen and (min-width: 641px) { .design-process .process-step:nth-child(2n) img { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } .design-process .process-step:first-child { z-index: 99; } .design-process .process-step:nth-child(2) { z-index: 98; } .design-process .process-step:nth-child(3) { z-index: 97; } .design-process .process-step:nth-child(4) { z-index: 96; } .design-process .process-step:nth-child(5) { z-index: 95; } .design-process .process-step:nth-child(6) { z-index: 94; } .design-process .process-step:nth-child(7) { z-index: 93; } .design-process .process-step .design-arrow { width: 120px; height: 120px; margin: 0 auto; position: absolute; left: -10px; bottom: -90px; -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } @media only screen and (max-width: 640px) { .design-process .process-step .design-arrow { width: 80px; height: 80px; bottom: -60px; } } .design-process .process-step .design-arrow .draw-arrow { stroke-width: 3; stroke: #222; fill: none; stroke-dasharray: 400; stroke-dashoffset: 400; } .design-process .process-step.in-view .design-arrow .draw-arrow { -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-name: draw; animation-name: draw; -webkit-animation-delay: .3s; animation-delay: .3s; } .design-process .process-step.in-view .design-arrow .draw-arrow.tail-1 { -webkit-animation-delay: .5s; animation-delay: .5s; } .design-process .process-step.in-view .design-arrow .draw-arrow.tail-2 { -webkit-animation-delay: .7s; animation-delay: .7s; } .design-process.branding { background: #f3f7ff; padding: 20px 0 60px; } .design-process.branding .process-step { max-width: 680px; } .design-process.branding .process-step img { width: 120px; } @-webkit-keyframes draw { to { stroke-dashoffset: 0; } } @keyframes draw { to { stroke-dashoffset: 0; } } .brand-design-features { position: relative; z-index: 10; } .brand-design-features .container { padding-bottom: 0; } .brand-design-features .container h2 { margin-top: 0; } .brand-design-features p { text-align: center; } .brand-design-features .features-container { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 40px; --gap: 40px; --columns: 2; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 940px; margin: 60px auto; } @media only screen and (max-width: 640px) { .brand-design-features .features-container { --columns: 1; } } .brand-design-features .features-container .feature { width: calc(100% / var(--columns) - var(--gap) + var(--gap) / var(--columns)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: #fff; gap: 20px; padding: 30px; border-radius: 5px; text-align: center; -webkit-box-shadow: rgba(0,0,0,.35) 0 5px 15px; box-shadow: rgba(0,0,0,.35) 0 5px 15px; } .brand-design-features .features-container .feature img { width: 120px; } .brand-design-features .features-container .feature p { margin-bottom: 0; } .brand-design .lowKeyCTA { padding-bottom: 0; } .brand-design .lowKeyCTA:after { display: none; } .brand-design .ppccta { background: #fff; } .events .lowKeyCTA { padding-bottom: 0; } .events .lowKeyCTA:after { display: none; padding-bottom: 0; } .events .infoBlock { margin-bottom: 80px; } .events .infoBlock .infoContainer { padding: 50px; } @media only screen and (max-width: 768px) { .events .infoBlock .infoContainer { display: block; margin: 30px; padding: 20px; } } .events .infoBlock .infoContainer .CTAimage { -ms-flex-item-align: start; -ms-grid-row-align: start; align-self: start; top: -20px; } @media only screen and (max-width: 768px) { .events .infoBlock .infoContainer .CTAimage { text-align: center; } } .events .infoBlock .infoContainer h2 { padding: 0; } .events .infoBlock .infoContainer img { width: 220px; margin: 0 20px 0 0; } @media only screen and (max-width: 768px) { .events .infoBlock .infoContainer img { margin: 0; } } .events .infoBlock .infoContainer ul { margin: 15px 30px; } .events .infoBlock .infoContainer .btn { text-align: center; } .events .infoBlock .infoContainer p:last-child { margin: 40px 0 0 0; } .events .disclaimer { margin: 0 0 0 10px; color: #f00; } @media only screen and (max-width: 768px) { .events .disclaimer { display: block; margin: 10px 0 0 0; text-align: center; } } .events .withBg { background: #f3f7ff; margin: 0 0 80px 0; } @media only screen and (max-width: 768px) { .events .withBg h2 { margin: 20px 0; } } .events .withBg .container { padding: 40px 16px; } @media only screen and (max-width: 768px) { .events .withBg .container { padding: 30px; } } .events .withBg .profiles img:last-child { margin: 20px 0 0 0; width: 75px; } .events .withBg .profiles .teamMember { margin: 0 20px; } @media only screen and (max-width: 768px) { .events .withBg .profiles .teamMember { margin: 0 0 60px 0; } }