Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* Softcase - Table of Contents
- ----------------------------------------------------
- 1. Color-Skin Styles
- 2. Reset Styles
- 3. Layout and General Styles
- 4. Header Styles
- 5. Main Section Styles
- 6. Features Section Styles
- 7. Z-layout sections
- 8. Newsletter Section Styles
- 9. Footer Section Styles
- 10.Contact Form Styles
- 11. Responsive Styles
- /*----------------------------------------------------*/
- /* ------------- 1. Color/Skin Styles --------------- */
- /*----------------------------------------------------*/
- /*----------------------------------------------------*/
- /* ---------------- 2. Reset Styles ----------------- */
- /*----------------------------------------------------*/
- html, div, span, object, iframe,
- h1, body, h2, h3, h4, h5, h6, p, blockquote, pre,
- a, img, small, strong, ol, ul, li, form, label,
- table, caption, tr, td, footer, header {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
- }
- footer, header, menu, nav, section {
- display: block;
- }
- /* Reset Body ans Fonts */
- body {
- line-height: 1;
- font-family: "Titillium Web", sans-serif;
- font-weight:400;
- }
- ol, ul {
- list-style: none;
- }
- /* Reset a Tags */
- a { color:#efefef; text-decoration:none; }
- a:focus { outline:0; text-decoration:none; }
- a:hover { color:#fff; text-decoration:none; }
- p, a { font-family: 'Lato', sans-serif; }
- /* Reset input Tags */
- input { border:0; font-family: 'Lato', sans-serif; sans-serif; color:#a3a3a3; font-style:italic; }
- input:focus { border:0; outline:0; }
- input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus { color: #a3a3a3;border-color:#cccccc;box-shadow: 0px 0px 0px ; }
- input:focus:valid:focus, textarea:focus:valid:focus, select:focus:valid:focus { color: #a3a3a3;border-color:#cccccc;box-shadow: 0px 0px 0px; }
- /* Reset input Tags */
- ::-moz-selection { background: #191919; color: #fff; text-shadow: none; }
- ::selection { background: #191919; color: #fff; text-shadow: none; }
- /*----------------------------------------------------*/
- /* ----------- 3. Layout and General Styles --------- */
- /*----------------------------------------------------*/
- .background { position:fixed; width:100%; height:100%; top:0; display:block; z-index:-170; }
- .wrapper { width:940px; margin:0 auto; }
- .clear { clear:both; }
- .pattern { position:fixed; width:100%; background:url(https://sites.google.com/site/landingv6/v6/pattern.png) repeat; top:0; display:block; height:100%; z-index:-180;}
- /*----------------------------------------------------*/
- /* ----------- 4. Header Section Styles ------------ */
- /*----------------------------------------------------*/
- header { height:80px; background-color:rgba(255,255,255,0.04); display:block; box-shadow:0px 1px 0px rgba(0,0,0,0.2),0px -1px 0px rgba(255,255,255,0.05) inset; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#1cffffff', endColorstr='#1cffffff'); }
- .logo { padding:28px 0 0; width:140px; float:left; }
- .navi { float:right; color:#5d6065; font-size:15px; margin:22px 0 0; }
- .navi li { float:left; margin:12px 30px 0 0; text-shadow:1px 1px 2px rgba(0,0,0,0.3) ; }
- .navi li a { color:#fff; opacity:0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; }
- .navi li a:hover, li.active a {opacity:1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
- a.contact { padding:0 0 0 23px; background:url(https://sites.google.com/site/landingv6/v6/contact.png) no-repeat 0 4px; }
- /*----------------------------------------------------*/
- /* ----------- 5. Main section Styles -------------- */
- /*----------------------------------------------------*/
- h1 { text-transform:uppercase; font-size:48px; color:#fff; text-align:center; font-weight:200; padding:90px 0 0; text-shadow:1px 1px 2px rgba(0,0,0,0.2); }
- .titles p { color:#fff; opacity:0.4; font-size:22px; text-align:center; padding:20px 0 0; text-shadow:1px 1px 1px rgba(0,0,0,0.2); }
- .buttons { width:340px; float:left; margin:60px 40px 0; }
- .bt1, .bt2 { float:left; border-radius:4px; font-size:18px; text-align:center; padding:14px 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) , 0 -1px 1px rgba(0, 0, 0, 0.2) inset, 0 1px 3px rgba(0, 0, 0, 0.1);}
- .bt1 { width:160px; height:22px; margin:0 20px 0 0; background-color:rgba(0,0,0,0.4); display:block; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#5c000000', endColorstr='#5c000000'); }
- .bt2 { width:160px; height:22px; display:block; text-shadow:1px 1px 1px rgba(0,0,0,0.2); }
- .divi { height:2px; background:url(https://sites.google.com/site/landingv6/v6/divi.png) repeat-x; width:260px; display:block; float:left; margin:80px 0 0; }
- .slider { margin:60px auto 0px; height:300px; width:485px; }
- .slider img { height:300px; width:920px; background-color:none; }
- #nav { width:140px; margin:0 auto; }
- #nav a { overflow:hidden; display: block; overflow: hidden; border-radius:40px; padding: 6px; float:left; height:1px; width:1px; background-color:#dbdcde; margin:14px 0 0 16px; }
- #nav a.activeSlide { padding:8px; margin:12px 0 0 16px; }
- .pagi { background-color:#ffffff; height:40px; box-shadow: 0px -1px 0px rgba(255,255,255,0.6) inset; }
- /*----------------------------------------------------*/
- /* ----------- 6. Features Section ----------------- */
- /*----------------------------------------------------*/
- .features { background-color:#fafbfc; height:550px; box-shadow: 0px 1px 4px rgba(0,0,0,0.06) inset, 0px -1px 4px rgba(0,0,0,0.06) inset; }
- .icon { width:128px; height:128px; margin:0 auto; display:block; }
- .ft1 { opacity:0.4; position:absolute; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; }
- .featu { padding:45px 10px; display:block; }
- .featu-wrap:first-child { margin:0px 30px 0 0; display:block; padding:20px 20px; }
- .featu-wrap { margin:0px 30px; display:block; padding:20px 20px; }
- .featu:hover { cursor:pointer; }
- .featu h3 { padding:9px 0; color:#565f6a; font-family: "Titillium Web", sans-serif; margin-top:25px ; border: 1px solid #efefef; border-left:none; border-right:none; font-size:34px; text-transform:none; text-align:center; text-shadow:1px 2px 1px rgba(255,255,255,0.4); }
- .featu p { text-align:center; color:#a8aaab; margin-top:20px ; font-size:14px; text-transform:none; line-height:1.8em; color:#5a5a5a; opacity:0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; }
- .plus { background-color:#eaeaea; height:1px; width:100%; margin:28px 0 0; }
- .plus p { line-height:1; background-color:#dbdcde; padding:1px; width:20px; height:20px; font-weight:600; float:right; margin:0; font-size:20px; color:#fff;}
- /*----------------------------------------------------*/
- /* ----------- 7. Z-layout Sections ----------- */
- /*----------------------------------------------------*/
- .z1 { height:440px; display:block; background-color:#fff; padding:60px 0 0; }
- .image-left {float:left; width:50%;}
- .text-right {float:right; width:50%;}
- .text-right h2 { color:#1d2d41; font-size:30px; margin:30px 0 30px; }
- .text-right p { color:#565f6a; font-size:16px; line-height:1.8em; margin:0 0 45px; }
- .text-right p.subtitles { font-weight:300; font-size:20px; margin:0 0 30px; }
- .bts2 { text-align:center; border-radius:4px; font-size:16px; padding:10px 0; width:120px; height:18px; display:block; text-shadow:1px 1px 1px rgba(0,0,0,0.2); }
- .z2 { height:410px; display:block; padding:60px 0 0; }
- .image-right {float:right; width:50%; height: 264px;}
- .text-left {float:left; width:50%;}
- .text-left h2 { color:#fefeff; font-size:30px; margin:30px 0 30px; }
- .text-left p { color:#fefeff; font-size:16px; line-height:1.8em; margin:0 0 45px; }
- .text-left p.subtitles { font-weight:300; font-size:20px; margin:0 0 30px; }
- .bts2 { text-align:center; border-radius:4px; font-size:16px; padding:10px 0; width:120px; height:18px; display:block; text-shadow:1px 1px 1px rgba(0,0,0,0.2); }
- .z3 { height:380px; display:block; background-color:#fff; padding:40px 0 0; }
- /*----------------------------------------------------*/
- /* ----------- 8. NEWSLETTER Section ----------- */
- /*----------------------------------------------------*/
- .newsletter { height:340px; display:block; text-align:center; }
- .newsletter h3 { padding:65px 0 0; font-size:32px; color:#fefeff; }
- .newsletter p { padding:30px 0 0; font-size:20px; color:#fff; font-weight:300; opacity:0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; }
- .newsletter-form { padding:60px 20px; margin:0 auto; width:400px; }
- input.email-newsletter { color:#a3a3a3; width:280px ; padding-left:14px;float:left; height:30px; border-radius: 6px 0px 0px 6px; box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.8); }
- input.email-newsletter:focus { color:#adadad; outline:0; box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.8); border:1px solid #cccccc; border-color:#cccccc; }
- input.button-newsletter { color:#efefef; float:left; height:40px; border-radius: 0px 6px 6px 0px; width:90px; }
- /*----------------------------------------------------*/
- /* ----------- 9. FOOTER SECTION ----------- */
- /*----------------------------------------------------*/
- footer { height:70px; display:block; background-color:#fff; }
- .copy { float:left; }
- .copy p { color:#adadad; padding:25px 0 0; }
- .copy p span { font-weight:600; color:#7d7d7d; }
- .social { float:right; padding:15px 0 0; }
- .social li { float:left; }
- li.twitter { margin:0 0 0 8px;}
- li.facebook a { background:url(https://sites.google.com/site/landingv6/v6/facebook.png) no-repeat; width:40px; height:40px; display:block; background-position:0 0; }
- li.facebook a:hover { background-position:0 100%; }
- li.twitter a { background:url(https://sites.google.com/site/landingv6/v6/twitter.png) no-repeat; width:40px; height:40px; display:block; background-position:0 0; }
- li.twitter a:hover { background-position:0 100%; }
- /*----------------------------------------------------*/
- /* ----------------- 10. CONTACT FORM --- ----------- */
- /*----------------------------------------------------*/
- #popi-bg { opacity: 0.7; display:none;}
- .wrap h1 { font-family: 'Lato', sans-serif;font-size:30px;height: 20px;font-weight:400;margin: 10px 0 40px 0px;text-align: center;padding:0px; color:#303030; }
- .form-contact{ font-family: 'Lato', sans-serif; margin:20px 5px; width:300px; }
- .wrap { z-index:800; margin: auto;padding-bottom:20px;}
- form {padding: 0;margin: 0 0 20px;}
- table {margin: 0 auto;}
- tr, td, input, textarea { margin: 0; padding: 0;}
- td { padding: 0 0 5px;}
- tr td:first-child { padding-right: 18px;padding-top: 11px;text-align: right;vertical-align: top;color:#afafaf;}
- .error[generated=true] {
- color: #dc0000;
- font-size: 16px;
- padding: 5px 0 2px 5px;
- }
- tr.error td { padding: 0;}
- .wrap input, textarea {
- background: #FFF;
- font: inherit;
- font-size: 16px;
- line-height: 29px;
- border:1px solid #909090;
- padding: 5px 10px;
- border-radius:none;
- }
- input:focus, textarea:focus {border-color: #303030; outline: none;}
- textarea { height: 160px; resize: vertical;}
- .wrap input[type=submit] { float:right; color:#fff; font-size:12px; border:none; margin:20px auto; height:28px; display:block; }
- .wrap input[type=submit]:hover { background-position:0 100%; }
- .wrap p { font-size: 14px; color:#191919; margin:8px 0 0; }
- .name { width:18px; height:18px; background: url("https://sites.google.com/site/landingv6/v6/contact-icon.png") no-repeat ; background-position:0 0; display:block; float:left;}
- .email { width:18px; height:18px; background: url("https://sites.google.com/site/landingv6/v6/contact-icon.png") no-repeat ; background-position:0 -18px; display:block; float:left;}
- .message { width:18px; height:18px; background: url("https://sites.google.com/site/landingv6/v6/contact-icon.png") no-repeat ; background-position:0 -36px; display:block; float:left;}
- #popi-bg {
- background: url("https://sites.google.com/site/landingv6/v6/bg-checker.png") repeat scroll 0 0 transparent;
- border: 1px solid #CECECE;
- display: none;
- height: 100%;
- left: 0;
- position: fixed;
- top: 0;
- width: 100%;
- z-index: 700;
- opacity: 1;
- }
- #overlay_form{
- display:none;
- border-radius: 6px 6px 6px 6px;
- position: absolute;
- border: 1px solid gray;
- padding: 10px;
- background: #efefef;
- width: 300px;
- height: 400px;
- background-color:#efefef;
- box-shadow:1px 0px 4px #191919;
- }
- #close2{ background: url("https://sites.google.com/site/landingv6/v6/close-contact.png") no-repeat scroll 0 0 transparent;
- display: block;
- float: right;
- height: 30px;
- margin: 10px 0 0;
- width: 30px; }
- input.submit { background:#303030; color:#fff; line-height:15px; }
- /*----------------------------------------------------*/
- /* ----------------- 11. RESPONSIVE --- ----------- */
- /*----------------------------------------------------*/
- @media(min-width: 768px) and (max-width: 979px) {
- .wrapper { width:730px; margin:0 auto; }
- .divi { width:150px; }
- .slider { height:260px; width:100%; }
- .slider img { width:100%; height:100%; }
- .featu h3 { font-size:28px; }
- .features { height:620px; }
- .z1 { height:400px; }
- .z2 { height:370px; }
- .z3 { height:310px; }
- .text-right h2 { font-size:24px; margin:10px 0 30px; }
- .text-left h2 { font-size:24px; margin:10px 0 30px ;}
- .text-right p { font-size:14px; }
- .text-right p.subtitles { font-size:16px; }
- .text-left p.subtitles { font-size:16px; }
- .image-left {float:left; width:50%;}
- .text-right {float:right; width:45%;}
- }
- @media(min-width: 480px) and (max-width: 767px) {
- .wrapper { width:480px; margin:0 auto; }
- .divi { width:20px; }
- h1 { font-size:34px; }
- .slider { height:200px; width:100%; }
- .slider img { width:480px; height:100%; }
- .z1 { height:400px; }
- .z2 { height:420px; }
- .z3 { height:290px; }
- .features { height:1420px;}
- .text-right h2 { font-size:17px; margin:10px 0 10px; }
- .text-left h2 { font-size:17px; margin:10px 0 10px; }
- .text-right p { font-size:12px; }
- .text-right p.subtitles { font-size:14px; }
- .text-left p.subtitles { font-size:14px; }
- .image-left {float:left; width:50%; margin:50px 0 0;}
- .text-right {float:right; width:42%;}
- .image-right {float:right; width:50%; margin:50px 0 0;}
- .text-left {float:left; width:42%;}
- .newsletter p { font-size:18px; }
- }
- @media(max-width:480px) {
- .wrapper { width:290px; margin:0 auto; }
- .divi { display:none; }
- .logo { width:103px; }
- .navi { float:right; color:#5d6065; font-size:11px; margin:22px 0 0; }
- .navi li { margin:12px 7px 0; }
- h1 { font-size:28px; line-height:45px; padding:50px 0 0;}
- .titles p { display:none; }
- .buttons { float:none; width:260px; margin:20px auto 0; }
- .bt1, .bt2 { width:120px; }
- .slider { height:140px; width:100%; }
- .slider img { width:290px; height:100%; }
- .features { height:1600px;}
- .image-left {float:left; width:100%; margin:50px 0 0;}
- .text-right {float:right; width:100%;}
- .image-right {float:right; width:100%; margin:50px 0 0;}
- .text-left {float:left; width:100%;}
- .z3 .image-left { float:left; width:100%; }
- .z3 .text-right { float:right; width:100%; }
- .z1 { height:800px; }
- .z2 { height:800px; }
- .z3 { height:720px; }
- .newsletter-form { width:240px; }
- input.email-newsletter { width:110px ; }
- input.button-newsletter { width:90px; }
- .copy { display:none; }
- .social { float:none; width:96px; padding:15px 0 0; margin:0 auto; }
- .background { background-size:100% 100%; }
- a.contact { height:13px; display:block; background:url(https://sites.google.com/site/landingv6/v6/contact.png) no-repeat 0 1px; }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement