weborsha/Joywork
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
0368fbf26c
Joywork/css/style_land.css

2536 lines
34 KiB
CSS
Raw Normal View History

Init
2026-05-22 20:21:54 +02:00
html {
min-height: 100%;
font-size: 100%;
}
body {
min-height: 100%;
margin: 0;
background: #e6e6e6;
font-size: 62.5%;
}
body, textarea, input, select, option, button {
color: #929292; font-family: 'Lato', Arial, Helvetica, sans-serif;
line-height: 1.65;
}
body.lock {
/* modal fix */
overflow: hidden;
}
li, dt, dd, p, figure, th, td, caption, legend, pre {
font-size: 18px;
}
li *, dt *, dd *, p *, figure *, th *, td *, legend * {
font-size: 16px;
}
ul, ol, dl, p, figure, table, pre, h1, h2, h3, h4, h5, h6, legend {
margin-bottom: 18px;
}
article, aside, details, div, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block;
}
.f__modal a.pseudo, a {
color: #558B2F;
border-bottom-color: #66BB6A;
cursor: pointer;
}
a.pseudo, span.pseudo {
color: rgb(255, 255, 255);
border-bottom: 1px dashed rgba(255, 255, 255, .5);
}
/* Fonts */
@font-face {
font-family: 'Lato';
src: local('Lato Hairline'), local('Lato-Hairline'), url('/fonts/latohairline.woff2') format('woff2'), url('/fonts/latohairline.woff') format('woff'), url('/fonts/latohairline.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Lato';
src: local('Lato Hairline Italic'), local('Lato-HairlineItalic'), url('/fonts/latohairlineitalic.woff2') format('woff2'), url('/fonts/latohairlineitalic.woff') format('woff'), url('/fonts/latohairlineitalic.ttf') format('truetype');
font-weight: 100;
font-style: italic;
}
@font-face {
font-family: 'Lato';
src: local('Lato Thin'), local('Lato-Thin'), url('/fonts/latothin.woff2') format('woff2'), url('/fonts/latothin.woff') format('woff'), url('/fonts/latothin.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'Lato';
src: local('Lato Thin Italic'), local('Lato-ThinItalic'), url('/fonts/latothinitalic.woff2') format('woff2'), url('/fonts/latothinitalic.woff') format('woff'), url('/fonts/latothinitalic.ttf') format('truetype');
font-weight: 200;
font-style: italic;
}
@font-face {
font-family: 'Lato';
src: local('Lato Light'), local('Lato-Light'), url('/fonts/latolight.woff2') format('woff2'), url('/fonts/latolight.woff') format('woff'), url('/fonts/latolight.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Lato';
src: local('Lato Light Italic'), local('Lato-LightItalic'), url('/fonts/latolightitalic.woff2') format('woff2'), url('/fonts/latolightitalic.woff') format('woff'), url('/fonts/latolightitalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Lato';
src: local('Lato Regular'), local('Lato-Regular'), url('/fonts/latoregular.woff2') format('woff2'), url('/fonts/latoregular.woff') format('woff'), url('/fonts/latoregular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Lato';
src: local('Lato Italic'), local('Lato-Italic'), url('/fonts/latoitalic.woff2') format('woff2'), url('/fonts/latoitalic.woff') format('woff'), url('/fonts/latoitalic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Lato';
src: local('Lato Medium'), local('Lato-Medium'), url('/fonts/latomedium.woff2') format('woff2'), url('/fonts/latomedium.woff') format('woff'), url('/fonts/latomedium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Lato';
src: local('Lato Medium Italic'), local('Lato-MediumItalic'), url('/fonts/latomediumitalic.woff2') format('woff2'), url('/fonts/latomediumitalic.woff') format('woff'), url('/fonts/latomediumitalic.ttf') format('truetype');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'Lato';
src: local('Lato Semibold'), local('Lato-Semibold'), url('/fonts/latosemibold.woff2') format('woff2'), url('/fonts/latosemibold.woff') format('woff'), url('/fonts/latosemibold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Lato';
src: local('Lato Semibold Italic'), local('Lato-SemiboldItalic'), url('/fonts/latosemibolditalic.woff2') format('woff2'), url('/fonts/latosemibolditalic.woff') format('woff'), url('/fonts/latosemibolditalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Lato';
src: local('Lato Bold'), local('Lato-Bold'), url('/fonts/latobold.woff2') format('woff2'), url('/fonts/latobold.woff') format('woff'), url('/fonts/latobold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Lato';
src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url('/fonts/latobolditalic.woff2') format('woff2'), url('/fonts/latobolditalic.woff') format('woff'), url('/fonts/latobolditalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: 'Lato';
src: local('Lato Heavy'), local('Lato-Heavy'), url('/fonts/latoheavy.woff2') format('woff2'), url('/fonts/latoheavy.woff') format('woff'), url('/fonts/latoheavy.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'Lato';
src: local('Lato Heavy Italic'), local('Lato-HeavyItalic'), url('/fonts/latoheavyitalic.woff2') format('woff2'), url('/fonts/latoheavyitalic.woff') format('woff'), url('/fonts/latoheavyitalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
}
@font-face {
font-family: 'Lato';
src: local('Lato Black'), local('Lato-Black'), url('/fonts/latoblack.woff2') format('woff2'), url('/fonts/latoblack.woff') format('woff'), url('/fonts/latoblack.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Lato';
src: local('Lato Black Italic'), local('Lato-BlackItalic'), url('/fonts/latoblackitalic.woff2') format('woff2'), url('/fonts/latoblackitalic.woff') format('woff'), url('/fonts/latoblackitalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "close-icon";
src: url("/fonts/close-icon.eot");
src: url("/fonts/close-icon.eot?#iefix") format("embedded-opentype"),
url("/fonts/close-icon.woff") format("woff"),
url("/fonts/close-icon.ttf") format("truetype"),
url("/fonts/close-icon.svg#close-icon") format("svg");
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: "close-icon";
src: url("/fonts/close-icon.svg#close-icon") format("svg");
}
}
[class^="close-icon-"]:before, [class*=" close-icon-"]:before,
[class^="close-icon-"]:after, [class*=" close-icon-"]:after {
font-family: close-icon;
font-size: 20px;
font-style: normal;
margin-left: 20px;
}
.close-icon-cross:before { content: "\f100"; }
.fr_land-layout {
position: relative;
background: #fff;
}
.fr_land-layout-header {
position: absolute;
left: 0;
top: 0;
z-index: 2000;
width: 100%;
padding: 41px 0 0;
}
.fr_land-layout-header:after {
content: "";
display: block;
overflow: hidden;
clear: both;
height: 0;
}
.fr_land-layout-header .line {
width: 1100px;
margin: 0 auto;
}
.fr_land-layout-header .text-logo {
float: left;
}
.fr_land-layout-header .text-logo span {
font-family: "Lato";
color: #ffffff !important;
line-height: 23px;
font-weight: bold;
font-size: 46px;
}
.fr_land-layout-header span.logo-green {
color: #4CAF50 !important;
}
.fr_land-layout-header .login-reg {
float: right;
vertical-align: middle;
}
.fr_land-layout-header .login-reg button {
display: inline-block;
text-transform: none;
font-weight: normal;
letter-spacing: normal;
background: -moz-linear-gradient(top, #fff, #ECEFF1);
background: -webkit-linear-gradient(top, #fff, #ECEFF1);
background: -o-linear-gradient(top, #fff, #ECEFF1);
background: -ms-linear-gradient(top, #fff, #ECEFF1);
background: linear-gradient(top, #fff, #ECEFF1);
border: 1px solid #D5DBE2;
height: auto;
display: inline-block;
padding: 3px 10px;
font-size: 16px;
border-radius: 4px;
color: #506979 !important;
cursor: pointer;
margin-left: 15px;
-webkit-transition: all .05s linear;
transition: all .05s linear;
}
.fr_land-layout-header .login-reg button:hover {
color: #506979 !important;
cursor: pointer;
background-color: #eef0f3;
background: -moz-linear-gradient(top, #f4f6f8, #D5DBE2);
background: -webkit-linear-gradient(top, #f4f6f8, #D5DBE2);
background: -o-linear-gradient(top, #f4f6f8, #D5DBE2);
background: -ms-linear-gradient(top, #f4f6f8, #D5DBE2);
background: linear-gradient(top, #f4f6f8, #D5DBE2);
border: 1px solid #c6cbd1 !important;
}
.fr_land-layout-welcome {
position: relative;
z-index: 8;
padding: 14em 0 0;
background: #263238; /* Old browsers */
background: -moz-linear-gradient(-45deg, #263238 0%, #000000 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #263238 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #263238 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#263238', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
color: #fff;
font-weight: normal;
}
.fr_land-layout-welcome > * {
position: relative; z-index: 2;
width: 700px;
margin-left: auto;
margin-right: auto;
}
.fr_land-layout-welcome figure {
width: 1100px;
margin: 0 auto;
}
.fr_land-layout-welcome figure img {
position: relative;
top: 7em;
}
.fr_land-layout-welcome > figure.mobile-c {
margin-left: -568px;
}
.fr_land-layout-welcome > figure.mobile-d {
margin-left: -603px;
}
.fr_land-layout-welcome h1, .fr_land-layout-welcome h2 {
position: relative;
margin-bottom: -4px;
padding-top: 0;
text-align: center;
color: #fff;
font-size: 6.6em;
font-weight: 600;
}
.fr_land-layout-welcome h1 img, .fr_land-layout-welcome h2 img {
content: "";
display: block;
margin: 0 0 25px;
}
.fr_land-layout-welcome h1 span,
.fr_land-layout-welcome h2 span {
font-weight: 700;
}
.fr_land-layout-welcome p {
margin-bottom: 36px;
font-size: 2.4em;
text-align: center;
}
.fr_land-layout-welcome.data-pattern,
#featured.data-pattern,
.fr_land-layout-content.a > .black-bg.data-pattern {
background-size: cover;
background-repeat: no-repeat;
}
#featured {
overflow: hidden;
position: relative;
z-index: 8;
padding: 252px 0 138px;
background: #000;
color: #fff;
text-align: center;
}
.with_pattern #featured:before,
.with_pattern .fr_land-layout-welcome:before,
.with_pattern #top > .fit-a > div,
.with_pattern .fr_land-layout-content.a > .black-bg:after {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background: url("/images/pattern.png");
}
#featured > * {
position: relative;
z-index: 2;
width: 1100px;
margin-left: auto;
margin-right: auto;
}
#featured h1, #featured h2, #featured h3, #featured h4, #featured h5, #featured h6, #featured a {
color: #fff;
}
#featured h1, #featured h2 {
position: relative;
padding: 0 0 10px;
font-size: 8em;
font-weight: 700;
text-transform: uppercase;
}
#featured h1:before, #featured h2:before {
content: "";
display: block;
position: absolute;
left: 50%; bottom: 0;
width: 59px;
height: 3px;
margin: 0 0 0 -29.5px;
background: #fff;
}
.fr_land-layout-content {
position: relative;
z-index: 7;
width: 1100px;
margin: 0 auto;
padding: 150px 0 40px;
}
.fr_land-layout-content:after {
content: "";
display: block;
overflow: hidden;
clear: both;
height: 0;
}
.fr_land-layout-content.a {
width: 100%;
padding: 120px 0 40px;
}
.fr_land-layout-content.a > *, .fr_land-layout-content.a > #contact {
overflow: hidden;
position: relative;
z-index: 2;
width: 1100px;
margin: 0 auto;
padding: 40px 0;
}
fr_land-layout-content.a > .has-news-d {
overflow: visible;
}
.fr_land-layout-content.a > .grey-bg, .fr_land-layout-content.a > .black-bg {
position: relative;
width: 100%;
background: #f4f4f4;
}
.fr_land-layout-content.a > .grey-bg > *, .fr_land-layout-content.a > .black-bg > * {
position: relative;
z-index: 3;
width: 1100px;
margin-left: auto;
margin-right: auto;
}
.fr_land-layout-content.a > .grey-bg > figure, .fr_land-layout-content.a > .black-bg > figure {
z-index: 2;
}
.fr_land-layout-content.a > .grey-bg .slider-a {
background: #fff;
}
.fr_land-layout-content.a > .grey-bg + .black-bg, .fr_land-layout-content.a > .black-bg + .grey-bg {
border-top: 4px solid #fff;
}
.fr_land-layout-content.a > .black-bg {
background: #000; color: #fff;
}
.fr_land-layout-content.a > .black-bg h1, .fr_land-layout-content.a > .black-bg h2, .fr_land-layout-content.a > .black-bg h3, .fr_land-layout-content.a > .black-bg h4, .fr_land-layout-content.a > .black-bg h5, .fr_land-layout-content.a > .black-bg h6, .fr_land-layout-content.a > .black-bg h1 .small, .fr_land-layout-content.a > .black-bg h2 .small, .fr_land-layout-content.a > .black-bg h3 .small, .fr_land-layout-content.a > .black-bg h4 .small, .fr_land-layout-content.a > .black-bg h5 .small, .fr_land-layout-content.a > .black-bg h6 .small, .fr_land-layout-content.a > .black-bg a, .fr_land-layout-content.a > .black-bg .heading-a *, .fr_land-layout-content.a > .vid .heading-a * {
color: #fff;
}
.fr_land-layout-content.a > .black-bg h1:before, .fr_land-layout-content.a > .black-bg h2:before, .fr_land-layout-content.a > .black-bg h3:before, .fr_land-layout-content.a > .black-bg h4:before, .fr_land-layout-content.a > .black-bg h5:before {
background: #fff;
}
.counter {
display: block;
text-align: center;
}
.counter > span {
display: block;
margin: 0 0 5px;
font-weight: 700;
}
.counter > span span {
display: inline-block;
position: relative;
font-size: 42px;
top: -1px;
width: 50px;
height: 64px;
margin: 0 4.5px;
border-radius: 4px;
border: 1px solid #fff;
background: #f8f8f8; color:
#000; line-height: 62px;
text-align: center;
}
.boxshadow .counter > span span {
box-shadow: 0 2px 3px rgba(0,0,0,.45);
}
.counter > span span:before {
content: "";
display: block;
position: absolute;
left: -1px;
top: 50%;
right: -1px;
width: auto;
height: 1px;
margin: -.5px 0 0;
background: #000;
}
.heading-a {
margin-bottom: /*92*/30px;
color: #000;
text-align: center;
}
.heading-a h1,
.heading-a h2,
.heading-a h3 {
position: relative;
margin-bottom: 38px;
padding-bottom: 24px;
font-size: 4em;
}
.heading-a h1 .small,
.heading-a h2 .small,
.heading-a h3 .small {
display: block;
margin-bottom: 10px;
color: #000;
font-weight: 700;
font-size: .3em;
text-transform: uppercase;
letter-spacing: 1px;
}
.heading-a h1:before,
.heading-a h2:before,
.heading-a h3:before {
content: "";
display: block;
position: absolute;
left: 50%;
bottom: 0;
width: 59px;
height: 3px;
margin: 0 0 0 -29.5px;
background: #dedede;
}
.heading-a p {
max-width: 750px;
margin-top: -10px;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
font-size: 1.8em; }
.heading-a.a {
text-align: left;
}
.heading-a.a h1:before, .heading-a.a h2:before, .heading-a.a h3:before {
left: 0;
margin: 0;
}
.heading-a.a p {
max-width: none;
}
.fr_land-layout-content.a > * > .heading-a.b:first-child {
margin-top: -20px;
}
.heading-a.b h1, .heading-a.b h2, .heading-a.b h3 {
margin-bottom: 17px;
padding-bottom: 20px;
}
.heading-a.b p {
margin-bottom: 34px;
}
.fr_land-layout-content > .heading-a:first-child, .fr_land-layout-content.a > * > .heading-a:first-child {
margin-top: 17px;
}
.block-a, .fr_land-layout-content.a > .block-a {
overflow: hidden;
padding-bottom: 33px;
}
.block-a > * {
padding-left: 700px;
}
.block-b > * {
padding-right: 700px;
}
.block-a.block-search figure img {
margin-top: 30px;
}
.fr_land-layout-content.a > .block-a > *, .fr_land-layout-content.a > .block-b > * {
width: 400px;
}
.big-sentence {
text-align: center;
}
.fr_land-layout .fr_land-layout-content .sticky-a, .fr_land-layout .fr_land-layout-content .sticky-c {
position: absolute;
right: 50%;
top: 100%;
z-index: 2;
width: auto;
margin: -414px -1032px 0 0;
padding: 0;
opacity: 1;
}
.fr_land-layout .fr_land-layout-content .sticky-a, .fr_land-layout .fr_land-layout-content .sticky-c {
transform: translateX(250px);
-moz-transform: translateX(250px);
-webkit-transform: translateX(250px);
-o-transform: translateX(250px);
-ms-transform: translateX(250px);
}
.fr_land-layout .fr_land-layout-content .sticky-b, .fr_land-layout .fr_land-layout-content .sticky-d {
position: absolute;
left: 50%;
top: 25px;
width: auto;
margin: 0 0 0 -550px;
padding: 0;
opacity: 1;
}
.fr_land-layout .fr_land-layout-content .sticky-b.a {
margin-left: -715px;
}
.fr_land-layout .fr_land-layout-content .sticky-b.b {
top: -20px;
margin-left: -800px;
}
.fr_land-layout .fr_land-layout-content .sticky-c {
right: 0;
margin-right: 0; }
.fr_land-layout .fr_land-layout-content .sticky-d {
left: 0;
margin-left: 0;
}
h1, h2, h3, h4, h5, h6 {
color: #263238;
font-weight: 700;
line-height: 1.2;
}
h1, h2 {
font-size: 4em;
}
h3 {
font-size: 3.4em;
}
h4 {
font-size: 3.2em;
}
h5 {
font-size: 3.0em;
}
h6 {
font-size: 2.8em;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: #263238;
}
.screen .text-screen {
margin: 0 50px;
}
.screen p {
text-align: center;
color: #000;
}
.screen img {
}
ul, ol, dd, blockquote {
padding-left: 40px;
}
ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0;
}
.list {
overflow: hidden;
list-style: none;
width: 100%;
padding: 0;
color: #000;
text-align: center;
}
.list li {
float: left;
width: 33.333333%;
margin: 0;
font-size: 1.4em;
line-height: 1.75;
}
.list li .title {
display: block;
margin: 0 25px 10px;
color: #263238;
font-weight: 700;
font-size: 26px;
line-height: normal;
}
.list li .inner {
display: block;
max-width: 270px;
margin: 0 auto;
}
.list li i {
display: block;
position: relative;
width: 163px;
height: 163px;
margin: 0 auto 37px;
border-radius: 100px;
background: #fbfbfb;
color: #000;
font-size: 60px;
font-style: normal;
line-height: 150px;
text-align: center;
}
.rgba .list li i {
box-shadow: 0 10px 10px rgba(0,0,0,.1);
}
.list-c {
overflow: hidden;
list-style: none;
width: 800px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
padding: 0;
color: #7e7e7e;
text-align: center;
}
.list-c > li {
overflow: hidden;
position: relative;
float: left;
width: 170px;
margin: 32px 0 20px;
padding: 0 25px 7px;
border-radius: 3px;
background: #fff;
font-size: 1.3em;
}
.list-c > li:last-child {
float: right;
}
.list-c > li.last-child {
float: right;
}
.list-c > li:first-child {
margin-right: 50px;
}
.list-c > li > span {
display: block;
position: relative;
margin: 0 -25px 61px;
padding: 26px 25px 70px;
border-radius: 3px 3px 0 0;
border: 1px solid #ececec;
border-top-width: 4px;
border-bottom: 0;
background: #f1f1f1;
color: #333;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
}
.list-c > li > span span {
display: block;
position: absolute;
left: 50%;
top: 100%;
margin: -52px 0 0 -52px;
width: 90px;
height: 90px;
border-radius: 100px;
border: 7px solid #fff;
background: #000;
color: #fff;
font-size: 1.2em;
line-height: 90px;
letter-spacing: normal;
}
.list-c > li > ul {
list-style: none;
margin: 0 0 24px;
padding: 0;
}
.list-c > li > ul li {
margin: 0 0 15px;
line-height: 1;
}
.list-c > li > a {
display: block;
margin: 0 0 10px;
border-radius: 7px;
padding: 10px 20px;
border: 2px solid #000;
color: #000;
font-weight: 700;
font-size: 1em;
text-transform: uppercase;
text-decoration: none;
}
.list-c > li > a:hover {
background: #000;
color: #fff;
text-decoration: none;
}
.list-c > li.b {
width: 190px;
margin-top: 0;
padding: 0 35px 12px;
font-size: 1.5em;
}
.list-c > li.a, .list-c > li.c {
margin-top: 0;
}
.list-c > li.b > span {
margin: 0 -35px 71px;
padding: 32px 35px 81px;
}
.list-c > li.b > span span {
width: 104px;
height: 104px;
margin: -59px 0 0 -59px;
font-size: 1.411em;
line-height: 104px;
}
.list-c > li.b > ul {
margin-bottom: 29px;
}
.list-c.a { }
.list-c.a > li > a {
padding: 7px 17px;
border-radius: 2px;
border-width: 5px;
}
.heading-a + .list-c {
margin-top: -24px;
}
img, object, embed, video {
max-width: 100% !important;
}
img {
position: relative;
height: auto !important;
}
figure {
margin-bottom: 27px;
}
/* SP Modal ver.2 12.2015 */
.f__modal {
z-index: 8;
width: 500px;
margin: 100px auto;
padding: 30px 40px 30px;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 56%, rgba(242,242,242,1) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 56%,rgba(242,242,242,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 56%,rgba(242,242,242,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 );
box-shadow: 0 25px 40px -10px rgba(8, 26, 40, 0.3);
position: relative;
border-radius: 4px;
}
.f__modal h2 {
margin: 0 0 15px 0;
padding: 0;
font-size: 120%;
font-weight: bold;
}
.f__modal h3 {
font-size: 200%;
font-weight: normal;
margin-bottom: 25px;
}
.f__modal .rf {
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
margin: 25px 0 25px;
}
.f__modal table {
width: 100%;
font-size: 15px;
margin: 20px 0 10px;
}
.f__modal table td {
padding-bottom: 12px;
}
.f__modal table .label {
width: 30%;
padding: 6px 0;
}
.f__modal #call_time {
width: 60px !important;
}
.f__modal .result {
position: absolute;
/* background: white; */
/* border: 1px solid #dedede; */
font-size: 13px;
padding: 8px 25px 0;
left: 220px;
margin-right: 25px;
}
.f__modal .result span.errors {
color: red;
padding: 0;
margin: 0;
}
.f__modal .success {
border: 2px solid #dff0d8;
padding: 12px 20px;
border-radius: 20px;
margin-top: -7px;
}
.closer {
display: block;
position: absolute;
top: 28px;
right: 40px;
color: rgba(0, 0, 0, .6);
border: none;
font-size: 24px;
line-height: 1;
cursor: pointer;
z-index: 9999;
}
.closer:hover {
color: rgba(0, 0, 0, 1);
}
.b-popup .closer {
font-size: 48px !important;
z-index: 99999;
}
.f__modal-bg {
background-color: rgba(255,255,255,0.7);
position:fixed;
top:0;
left: 0;
bottom: 0;
right: 0;
z-index: 99999;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.f__modal-bg > * {
-webkit-transform: translateZ(0px);
}
.f__modal-bg {
/* background: rgba(255,255,255,0.7); */
background: rgba(0,0,0, .7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE6–IE8 */
zoom: 1;
}
.f__modal.big-phone {
width: 80%;
min-width: 900px;
}
.form-label {
text-align: right;
}
/* Modal login */
.f__modal.login {
width: 800px;
}
.f__modal.login .f-control {
margin: 12px 0;
}
.f__modal.login .f-control span {
line-height: 43px;
}
.f__modal.login .f-control input {
width: 342px;
font-size: 21px;
border: 1px rgb(208, 208, 208) solid;
font-family: "Lato";
border-radius: 3px;
padding: 4px;
transition-property: border-color, background;
transition-duration: 0.33s;
transition-timing-function: ease-out;
border-top-color: rgb(180, 184, 183);
box-shadow: 0 2px 4px -2px rgb(220, 225, 229) inset;
background: -moz-linear-gradient(top, #f8f8f8, #fff);
background: -webkit-linear-gradient(top, rgb(248, 248, 248), rgb(255, 255, 255));
background: -o-linear-gradient(top, #f8f8f8, #fff);
background: -ms-linear-gradient(top, #f8f8f8, #fff);
background: linear-gradient(top, #f8f8f8, #fff);
}
.f__modal.login h2 {
font-size: 28px;
}
.f__modal.login .login-sign-block {
margin-top: 1px;
padding: 10px 20px;
border: 1px solid rgb(238, 238, 238);
border-radius: 3px;
}
.f__modal.login .login-sign-block p {
font-size: 16px;
margin: 0;
}
.f__modal.login .f-btn {
}
.f__modal.login .f-col-6 {
width: 45% !important;
}
.f__modal.login .form-label span {
padding-right: 30px;
}
/* Modal signin */
.f__modal.sign {
width: 950px;
}
.f__modal.sign .f-control {
margin: 12px 0;
}
.f__modal.sign .f-control span {
line-height: 43px;
text-align: right;
}
.f__modal.sign .f-control input {
width: 311px;
font-size: 21px;
border: 1px rgb(208, 208, 208) solid;
font-family: "Lato";
border-radius: 3px;
padding: 4px;
transition-property: border-color, background;
transition-duration: 0.33s;
transition-timing-function: ease-out;
border-top-color: rgb(180, 184, 183);
box-shadow: 0 2px 4px -2px rgb(220, 225, 229) inset;
background: -moz-linear-gradient(top, #f8f8f8, #fff);
background: -webkit-linear-gradient(top, rgb(248, 248, 248), rgb(255, 255, 255));
background: -o-linear-gradient(top, #f8f8f8, #fff);
background: -ms-linear-gradient(top, #f8f8f8, #fff);
background: linear-gradient(top, #f8f8f8, #fff);
}
.f__modal.sign h2 {
font-size: 28px;
}
.f__modal.sign .login-sign-block {
margin-top: 1px;
padding: 10px 20px;
border: 1px solid rgb(238, 238, 238);
border-radius: 3px;
width: 287px;
}
.f__modal {
font-size: 16px;
}
.f__modal.sign .login-sign-block p {
font-size: 16px;
margin: 0;
}
.f__modal.sign .f-btn {
}
.f__modal.sign .social-auth {
width: 287px;
}
.f__modal.sign .f-col-6 {
width: 45%;
margin-left: 5%;
}
.f__modal.login .form-label span {
padding-right: 30px;
}
.sign-only {
position: absolute;
width: 28%;
right: 40px;
}
.sign-only h2 {
font-size: 46px !important;
}
.sign-only h3 {
font-size: 17px;
}
.f__modal .f-col .f-col-6 {
float: left;
position: relative;
}
.f__modal .f-col .f-col-3 {
width: 25%;
float: left;
position: relative;
}
.clear {
float: none;
clear: both;
}
.fr-btn {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
color: white;
font-size: 15px;
-webkit-transition: all .05s linear;
transition: all .05s linear;
color: #fff;
display: block;
position: relative;
text-decoration: none;
background-color: #4CAF50;
line-height: 44px;
border: 0;
border-radius: 5px;
text-align: center;
padding: 4px 35px;
margin-top: -3px;
outline: none;
}
.forgotpass a, .forgotpass span {
line-height: 18px !important;
font-size: 14px !important;
}
.forgotpass a {
color: #9e9e9e;
text-decoration: none;
border-bottom: 1px solid #BDBDBD;
}
.forgotpass {
padding: 9px 0 0 15px;
}
.hidden--radio {
position: absolute;
left: -9999px;
}
.selector-button {
float: left;
margin: 0;
position: relative;
}
.selector-button span {
display: inline-block;
margin: 0;
padding: 0;
border: 1px solid #D5DBE2;
color: #506979;
border-left: 0 none;
cursor: pointer;
background-color: #fff;
background: -moz-linear-gradient(top, #fff, #ECEFF1);
background: -webkit-linear-gradient(top, #fff, #ECEFF1);
background: -o-linear-gradient(top, #fff, #ECEFF1);
background: -ms-linear-gradient(top, #fff, #ECEFF1);
background: linear-gradient(top, #fff, #ECEFF1);
border-radius: 4px;
padding: 7px 24px 9px;
font-size: 16px;
}
.button-left span {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-left: 1px solid #CDCED0;
}
.button-center span {
border-radius: 0 !important;
border-left: 0 !important;
}
.button-right span {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-left: 0 !important;
}
.button-row .selector-button:hover span {
cursor: pointer;
background-color: #eef0f3;
background: -moz-linear-gradient(top, #f4f6f8, #D5DBE2);
background: -webkit-linear-gradient(top, #f4f6f8, #D5DBE2);
background: -o-linear-gradient(top, #f4f6f8, #D5DBE2);
background: -ms-linear-gradient(top, #f4f6f8, #D5DBE2);
background: linear-gradient(top, #f4f6f8, #D5DBE2);
border: 1px solid #c6cbd1 !important;
border-left: 0 none !important;
}
.selector-button.button-left:hover span {
border-left: 1px solid #c6cbd1 !important;
}
.button-row .selector-button.selected span {
padding: 8px 25px 10px;
border: 0 !important;
color: rgb(255, 255, 255) !important;
cursor: default !important;
background: rgb(69, 90, 100) !important;
box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
text-shadow: 0 2px 2px rgba(67, 83, 102, 0.75);
}
.label-overlay {
cursor: pointer;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
}
.f__modal.sign .active {
display: block;
}
.bg-danger {font-size: 1.5em;
border-radius: 5px;
text-align: center;
padding: 10px;
color: rgb(255, 255, 255);
background: rgb(202, 118, 118);
border:solid 1px rgb(204, 38, 38);
margin-bottom: 10px;}
/* Footer */
.fr-footer {
background: #263238;
background: -moz-linear-gradient(-45deg, #263238 0%, #000000 100%);
background: -webkit-linear-gradient(-45deg, #263238 0%,#000000 100%);
background: linear-gradient(135deg, #263238 0%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#263238', endColorstr='#000000',GradientType=1 );
color: #fff;
padding-top: 30px;
padding-bottom: 69px;
}
.fr-footer .e-8 {
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 1100px;
margin: 0 auto;
}
.e-8:before, .e-8:after, .e-row:before, .e-row:after {
clear: both;
content: '';
display: block;
}
.fr-footer .fr-footer-cols .fr-col-left {
width: 70%;
float: left;
}
.fr-footer .fr-footer-cols .fr-col-right {
width: 30%;
float: left;
}
.fr-footer .copyrights p {
margin-bottom: 10px;
}
.fr-footer a {
text-decoration: none;
color: white;
border-bottom: 1px solid rgba(255, 255, 255, .5);
font-size: 18px !important;
}
.spb-logo-white {
position: absolute;
left: 0;
top: -2px;
}
.spb-logo-white img {
height: 30px !important;
}
.phone-in-spb {
margin-bottom: 9px !important;
}
.time-call {
margin-top: 9px !important;
}
.fr-footer h2 {
margin: 0;
color: white;
font-size: 24px;
}
.fr-footer .links {
margin-top: 40px;
}
.fr-footer .links p {
margin: 0 0 8px 0;
}
.fr-footer .copyrights {
padding-right: 40px;
}
/* Page fix */
.fr_land-layout-welcome-page {
position: relative;
z-index: 8;
padding: 14em 0 5em;
background: #263238; /* Old browsers */
background: -moz-linear-gradient(-45deg, #263238 0%, #000000 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #263238 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #263238 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#263238', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
color: #fff;
font-weight: normal;
}
.fr_land-layout-welcome-page h2 {
font-size: 42px;
text-align: center;
color: white;
}
.fr_land-layout-content.page {
padding: 40px 0 !important;
}
/* Кнопка под старые блоки */
.f__modal { padding-bottom: 100px; }
.big-button {
width: 100%;
background: rgb(67,160,71); /* Old browsers */
background: -moz-linear-gradient(top, rgba(67,160,71,1) 0%, rgba(56,142,60,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(67,160,71,1) 0%,rgba(56,142,60,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(67,160,71,1) 0%,rgba(56,142,60,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#43a047', endColorstr='#388e3c',GradientType=0 ); /* IE6-9 */
cursor: pointer;
font-family: "Lato";
padding: 20px 0 22px;
color: #ffffff;
font-size: 20px;
font-weight: bold;
position: absolute;
bottom: 0;
left: 0;
border: 0;
border-radius: 0;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.big-button:hover {
background: #388E3C !important;
}
Reference in New Issue Copy Permalink