Team:Nevada/style.css
From 2014.igem.org
/* Import Basic Files
*/
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700); @import url(http://fonts.googleapis.com/css?family=Roboto:100,300,400,700); @import url(font-awesome.min.css); @import url(https://2014.igem.org/wiki/index.php?title=Team:Nevada/jquery.fancybox&action=raw&ctype=text/css); @import url(https://2014.igem.org/Team:Nevada/uikit.css?action=raw&ctype=text/css); @import url(https://2014.igem.org/Team:Nevada/jquery.sliderTabs.min.css?action=raw&ctype=text/css); @import url(https://2014.igem.org/Team:Nevada/owl.carousel.css?action=raw&ctype=text/css); @import url(https://2014.igem.org/Team:Nevada/owl.theme.css?action=raw&ctype=text/css); @import url(https://2014.igem.org/Team:Nevada/owl.transitions.css?action=raw&ctype=text/css); @import url(https://2014.igem.org/Team:Nevada/supersized/style.css?action=raw&ctype=text/css); @import url(http://fonts.googleapis.com/css?family=Nixie+One);
/* Template Name: APP ON Description: Responsive HTML5 / CSS3 Landing Page Template Version: 1.0 Author: Jthemes
Notes:
Color-1: #76889a Color-2: #ff3131
1. General
1.1 Main Styles 1.2 Anchor 1.3 Loader 1.4 Section Title 1.5 Section Description 1.6 Short Section Title 1.7 Short Section Description 1.8 No Pad classes
2. Typography
2.1 Headings
3. Sidebar Menu
3.1 Wrapper 3.2 Btn 3.3 OverLayer 3.4 Scroller 3.5 Container 3.6 List 3.7 Items 3.8 Anchors 3.9 Info 3.10 Logo
4. Home Section
4.1 Wrapper 4.2 Home Section Wrapper 4.3 Slogan 4.4 Description 4.5 Buttons 4.6 Home Feature Image 4.7 Feature Box Style 1 4.7.1 Main Typography 4.7.2 Feature Box Style 1 ( Left ) 4.7.2.1 Wrapper 4.7.2.2 Icon 4.7.2.3 Title 4.7.2.4 Description 4.7.3 Feature Box Style 1 ( Right ) 4.7.3.1 Wrapper 4.7.3.2 Icon 4.7.3.3 Title 4.7.3.4 Description
5. Feature Section
5.1 Wrapper 5.2 Feature Bix Style 2 5.2.1 Wrapper 5.2.2 Icon 5.2.3 Title 5.2.4 Description 5.3 Lets See BTN
6. Arrows Section
6.1 Wrapper 6.2 Anchors 6.3 Icons
7. How It Works Section
7.1 Wrapper 7.2 Tabs 7.2.1 Tabs List Wrapper 7.2.2 Tabs List 7.2.2.1 Container 7.2.2.2 Items 7.2.2.3 Anchor 7.2.2.4 Selected 7.3 Content 7.4 Arrows 7.4.1 Right Arrow 7.4.2 Left Arrow 7.5 Feature Box 7.6 Feature Image 7.7 Feature Btns
8. Portfolio Section
8.1 Wrapper 8.2 OWL Slider 8.3 Portfolio Item 8.3.1 Wrapper 8.3.2 Content 8.3.3 Image 8.3.4 Overlayer 8.3.5 Anchor 8.3.6 Hover
9. Portfolio Section
9.1 Wrapper 9.2 Magnify 9.2.1 Wrapper 9.2.2 Container 9.2.3 Image
10. Ready Section
10.1 Wrapper 10.2 Mini Feature List 10.2.1 Wrapper 10.2.2 Items 10.2.3 Icons 10.3 Feature Btns 10.4 Feature Image
11. Team Section
11.1 Wrapper 11.2 Slider 11.2.1 Wrapper 11.2.2 Member Thumbs 11.2.3 Navigation 11.2.4 Dots 11.2.5 Selected 11.2.6 Member Big Image 11.2.7 Title Description 11.2.8 Content Description 11.2.9 Social Icons
13. Clients Section
13.1 Wrapper 13.2 Content 13.3 Quote 13.4 Name 13.5 Image 13.6 Arrows
14. Price Section
14.1 Wrapper 14.2 Price Table 14.2.1 Wrapper 14.2.2 Name 14.2.3 Description 14.2.4 Price 14.2.5 Info 14.2.6 Hover
15. Recent Posts Section
15.1 Wrapper 15.2 Mini Post 15.2.1 Wrapper 15.2.2 Image 15.2.3 Title 15.2.4 Date 15.2.5 Content
16. Like Section
16.1 Wrapper 16.2 Buttons
17. Reach Section
17.1 Wrapper 17.2 Form 17.2.1 Wrapper 17.2.2 Textarea 17.2.3 form-control 17.2.4 Button 17.2.5 error message 17.2.6 Alert
18. Subscribe Section
18.1 Wrapper 18.2 Subscribe 18.2.1 Wrapper 18.2.2 Input 18.2.3 Submit 18.2.4 Success & Error
19. Footer Section
19.1 Wrapper 19.2 Social Icons 19.2.1 List 19.2.2 Iems
20. More APPS Section
20.1 Wrapper
21. Blog
21.1 Wrapper 21.2 Home Section Wrapper 21.3 Slogan 21.4 Description 21.5 Buttons
22. Posts RightSidebar
22.1 Wrapper 22.2 Post 22.2.1 Wrapper 22.2.2 Info 22.2.3 Date 22.2.4 Post Type 22.2.4.1 Image 22.2.4.2 Video 22.2.4.3 Text 22.2.4.4 Audio 22.2.5 Data 22.2.5.1 Wrapper 22.2.5.2 Header 22.2.5.3 Container 22.2.5.4 Title 22.2.5.5 Info
23. Sidbar
23.1 Wrapper 23.2 Widget 23.2.1 Wrapper 23.2.2 Widget Title 23.2.3 Widget Content 23.2.4 Search Widget 23.2.5 Category Widget 23.2.6 Popular Widget 23.2.7 Flickr Widget 23.2.7.1 Wrapper 23.2.7.2 Flickr Feed 23.2.7.2.1 Wrapper 23.2.7.2.2 Items 23.2.7.2.3 Image 23.2.7.2.4 Anchor 23.2.8 Tags Widget
24. Posts LeftSidebar 25. Single Post
25.1 Post Comments 25.1.1 Wrapper 25.1.2 Title 25.1.3 Comments 25.1.4 Avatar 25.1.5 Container 25.1.6 Header 25.1.7 Comment Title 25.1.8 Date 25.1.9 Content 25.1.10 Replay 25.1.11 Comment Form 25.1.11.1 Wrapper 25.1.11.2 Textarea 25.1.11.3 form-control 25.1.11.4 Button 25.2 Related Posts 25.2.1 Wrapper 25.2.2 Title
26. Bootstrap 27. Responsive
- /
/* ==========================================================================
1. General
========================================================================== */ /* 1.1 Main Styles
*/
body {
margin: 0; padding: 0; color: #9ea6a4; overflow-x: hidden; background-color: #ffffff; -webkit-text-size-adjust: 100%; font: 14px/24px 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/*
* What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. */
.browsehappy { margin: 0.2em 0; background-color: #cccccc; color: #000000; padding: 0.2em 0; } .container { overflow: hidden; }
/* 1.2 Anchor
*/
a { color: #76889a; } a, a > * {
outline: none; cursor: pointer; text-decoration: none;
} a:focus, a:hover {
outline: none; color: #ffffff; text-decoration: none;
}
/* 1.3 Loader
*/
- Loader {
top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; position: fixed; z-index: 999999; background-color: #002147;
}
- circle {
top: 50%; left: 50%;
width: 50px; height: 50px;
opacity: 0.9;
margin-top: -25px;
margin-left: -25px; position: absolute; background-color: rgba(0, 0, 0, 0);
-webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px;
-webkit-box-shadow: 0 0 35px #ffffff; -moz-box-shadow: 0 0 35px #ffffff; -o-box-shadow: 0 0 35px #ffffff; box-shadow: 0 0 35px #ffffff;
-webkit-border: 5px solid #ffffff; -moz-border: 5px solid #ffffff; -o-border: 5px solid #ffffff; border: 5px solid #ffffff;
-webkit-border-left: 5px solid rgba(0, 0, 0, 0); -moz-border-left: 5px solid rgba(0, 0, 0, 0); -o-border-left: 5px solid rgba(0, 0, 0, 0); border-left: 5px solid rgba(0, 0, 0, 0);
-webkit-border-right: 5px solid rgba(0, 0, 0, 0);
-moz-border-right: 5px solid rgba(0, 0, 0, 0); -o-border-right: 5px solid rgba(0, 0, 0, 0); border-right: 5px solid rgba(0, 0, 0, 0);
-webkit-animation: spinPulse 1s infinite ease-in-out;
-moz-animation: spinPulse 1s infinite ease-in-out;
-ms-animation: spinPulse 1s infinite ease-in-out; -o-animation: spinPulse 1s infinite ease-in-out; animation: spinPulse 1s infinite ease-in-out;
}
- circle1 {
top: 50%; left: 50%;
width: 30px; height: 30px;
opacity: 0.9;
margin-top: -15px;
margin-left: -15px; position: absolute; background-color: rgba(0, 0, 0, 0);
-webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px;
-webkit-border: 5px solid #ffffff; -moz-border: 5px solid #ffffff; -o-border: 5px solid #ffffff; border: 5px solid #ffffff;
-webkit-border-left: 5px solid rgba(0, 0, 0, 0); -moz-border-left: 5px solid rgba(0, 0, 0, 0); -o-border-left: 5px solid rgba(0, 0, 0, 0); border-left: 5px solid rgba(0, 0, 0, 0);
-webkit-border-right: 5px solid rgba(0, 0, 0, 0);
-moz-border-right: 5px solid rgba(0, 0, 0, 0); -o-border-right: 5px solid rgba(0, 0, 0, 0); border-right: 5px solid rgba(0, 0, 0, 0);
-webkit-box-shadow: 0 0 15px #ffffff; -moz-box-shadow: 0 0 15px #ffffff; -o-box-shadow: 0 0 15px #ffffff; box-shadow: 0 0 15px #ffffff;
-webkit-animation: spinoffPulse 1s infinite linear;
-moz-animation: spinoffPulse 1s infinite linear; -ms-animation: spinoffPulse 1s infinite linear; -o-animation: spinoffPulse 1s infinite linear; animation: spinoffPulse 1s infinite linear;
}
/* 1.4 Section Title
*/
.section-title {
width: 100%; overflow: hidden; text-align: center; margin-bottom: 16px;
} .section-title h1 {
font-size: 60px; line-height: 1.2; font-weight: 100; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
} .section-title_works_section h1 {
font-size: 60px;
text-align: center;
line-height: 1.2; font-weight: 100; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
z-index:5; }
/* 1.5 Section Description
*/
.section-desc {
width: 85%; text-align: center; margin: 0 auto 65px;
} .section-desc p {
color: #9ea6a4; font-size: 18px; margin-bottom: 0; font-weight: 300;
}
/* 1.6 Short Section Title
*/
.section-short-title {
width: 100%; overflow: hidden; text-align: left; margin-bottom: 16px;
} .section-short-title h1 {
font-weight: 100; line-height: 1.22; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* 1.7 Short Section Description
*/
.section-short-desc {
width: 100%; text-align: left; margin: 0 auto 30px;
} .section-short-desc p {
font-size: 18px; font-weight: 300; margin-bottom: 0;
}
/* 1.8 No Pad classes
*/
.no-pad-left { padding-left: 0; } .no-pad-right { padding-right: 0; }
/* ==========================================================================
2. Typography
========================================================================== */ /* 2.1 Headings
*/
h1, h2, h3, h4, h5, { margin: 0; padding: 0; color: #002147; line-height: 1.2; font-weight: normal; font-family:'Times New Roman' 'Georgia';
} h6 { margin: 0; padding: 0; color: #FFF; line-height: 1.2; font-weight: normal; font-family:'Times New Roman' 'Georgia'; }
h1 { font-size: 30px; } h2 { font-size: 24px; } h3 { font-size: 20px; } h4 { font-size: 18px; } h5 { font-size: 14px; } h6 { font-size: 12px; }
h1_1{
font: normal 200px/ 100px 'Nixie One', 'Helvetica', 'Arial';
color: #EEDDE0;
text-shadow: 0 0 30px #EC637B,
0 0 10px rgba(230, 161, 173, 0.41),
0 0 100px #E6A1AD,
0 0 500px #F36780,
5px 9px 5px rgba(0, 0, 0, 0.5);
}
h1_1.off{
color: rgba(46, 46, 46, 0.61);
text-shadow: 7px 7px 5px rgba(0, 0, 0, 0.5);}
h1_1 { font-size: 85px; } h2_1 { font-size: 24px; } h3_1 { font-size: 20px; } h4_1 { font-size: 18px; } h5_1 { font-size: 14px; } h6_1 { font-size: 12px; }
h1_2{ margin: 0; padding: 0; color: #002147; line-height: 1.2; font-weight: normal; font-family:'Times New Roman' 'Georgia';
}
h1_2{ font-size: 100px;}
p { margin: 0 0 10px;
font-family:"Myriad Pro";
}
b, strong { font-weight: 700; }
/* ==========================================================================
3. Sidebar Menu
========================================================================== */ /* 3.1 Wrapper
*/
- sidebar-wrapper {
top: 0; height: 100%; left: -245px; width: 245px; z-index: 99999; position: fixed; background-color: #8a8d8f;
-webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -ms-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s;
}
- sidebar-wrapper-igem {
top: 0; height: 100%; left: -245px; width: 245px; z-index: 99999; position: fixed; background-color: #8a8d8f;
-webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -ms-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s;
}
/* 3.2 Btn
*/
.sidebar-btn {
top: 40px; width: 80px; height: 80px; right: -120px; color: #ffffff; z-index: 99999; font-size: 50px; line-height: 80px; text-align: center; position: absolute; background-color: #222222;
-webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
} .sidebar-igem { right: 125px; top:15px;
width: 40px; height: 40px; z-index: 99997; font-size: 20px; line-height: 40px; position: fixed; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
} .sidebar-btn:hover { background-color: #111111; }
- sidebar-wrapper.openclose { left: 0; }
/* 3.3 OverLayer
*/
- sidebar-overlayer {
top: 0; left: 0; width: 100%; height: 100%; opacity: 0.3; display: none; z-index: 99998; position: fixed; background-color: rgba(0, 0, 0, 0.5);
}
- sidebar-overlayer.openclose { display: block; }
/* 3.4 Scroller
*/
- sidebar-scroller {
width: 245px; height: 100%; overflow-x: hidden; position: relative;
}
/* 3.5 Container
*/
- sidebar-container {
height: 100%; width: 400px; position: absolute; overflow-y: scroll; overflow-x: hidden; left: 2px; }
/* 3.6 List
*/
- sidebar-container ul {
width: 245px; margin: 0 0 35px; list-style: none; padding: 0 0 20px; position: relative; -webkit-overflow-scrolling: touch;
}
- sidebar-container ul:after {
left: 0; bottom: 0; width: 60%; z-index: 1; height: 1px; content: ; margin-left: 30px; position: absolute; background-color: #ffffff;
}
/* 3.7 Items
*/
- sidebar-container ul li {
width: 100%; height: 60px; display: block; text-align: left; line-height: 60px;
}
/* 3.8 Anchors
*/
- sidebar-container ul li a {
display: block; color: #ffffff; font-size: 18px; font-weight: 400; line-height: 20px; padding: 0 0 0 30px; letter-spacing: 1px; text-transform: uppercase; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
- sidebar-container ul li.active a,
- sidebar-container ul li a:focus,
- sidebar-container ul li a:hover {
background-color: rgba(0, 0, 0, 0.5);
}
/* 3.9 Info
*/
- sidebar-container .info {
width: 245px; display: block; overflow: hidden;
}
- sidebar-container .info p {
margin: 0; color: #ffffff; padding-left: 30px;
}
- sidebar-container .info p:last-child { margin-bottom: 35px; }
/* 3.10 Logo
*/
.logo {
width: 245px; margin: 50px 0 20px;
} .logo img { width: 100%; }
/* ==========================================================================
4. Home Section
========================================================================== */ /* 4.1 Wrapper
*/
- home-section {
margin: 0; padding: 0; width: 100%; overflow: hidden;
}
/* 4.2 Home Section Wrapper
*/
- home-section-wrapper {
z-index: 1; width: 100%; position: relative; padding: 120px 0 0 0; background-color: #222222;
}
- home-section-wrapper:after {
top: 0; left: 0; z-index: -1; content: ; width: 100%; height: 100%; opacity: 0.4; position: absolute; background-color: #222222;
}
/* 4.3 Slogan
*/
- home-section-wrapper .slogan {
width: 100%; overflow: hidden; text-align: center; margin-bottom: 0px;
}
- home-section-wrapper .slogan h1 {
color: #ffffff; font-size: 48px; font-weight: 100; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/*4.31 home section with neon lights*/
- home-section-wrapper .container_neon_box {
position: relative; width: 800px; margin: 2.5% auto; text-align: center;
}
- home-section-wrapper .border_neon_sign {
width: 910px; height: 150px; background-color: #222222; border: 3px solid #0cd808; position: absolute; top: 28px; border-radius: 10px; left: 50%; margin-left: -448px; box-shadow: 0 0 1px #b3ff51, 0 0 2px #b3ff51, 0 0 6px #b3ff51, 0 0 12px #b3ff51, inset 0 0 1px #b3ff51, inset 0 0 2px #b3ff51, inset 0 0 6px #b3ff51, inset 0 0 12px #b3ff51; z-index: -9990;
}
- home-section-wrapper .blocker-1_neon_sign {
width: 438px; height: 20px; position: absolute; top: 20px; left: 184px; background-color: #222222; z-index: -9990; box-shadow: 0 0 10px #222222, 0 0 5px #222222, 0 0 2px #222222, 0 0 1px #222222;
}
- home-section-wrapper .blocker-2_neon_sign {
width: 744px; height: 85px; position: absolute; bottom: 2px; left: 33px; background-color: #222222; z-index: -9990; box-shadow: 0 0 10px #222222, 0 0 5px #222222, 0 0 2px #222222, 0 0 1px #222222;
}
- home-section-wrapper .team_title_neon_sign {
margin: 7px 0 18px; padding: 0; font-family: 'Quicksand', sans-serif; font-size: 70px; letter-spacing: 5px; color: #f90000; text-shadow: 0 0 1px #ff1919, 0 0 2px #ff1919, 0 0 6px #ff1919, 0 0 12px #ff1919; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #db0808;
}
- home-section-wrapper .team_neon_sign {
margin: 0; padding: 0; line-height: 60px; font-family: 'League Script', cursive; font-size: 52px; color: #14a5ff; text-shadow: 0 0 1px #22cef9, 0 0 2px #22cef9, 0 0 6px #22cef9, 0 0 12px #22cef9;
}
- home-section-wrapper .explination_neon_sign {
margin: 0; padding: 0; line-height: 95px; font: 400 130px/0.8 'Cookie', Helvetica, sans-serif; font-weight: normal; font-style: normal; font-size: 50px; color: #14a5ff;
}
/* 4.4 Description
*/
- home-section-wrapper .desc {
width: 75%; text-align: center; margin: 0 auto 30px;
}
- home-section-wrapper .desc p {
color: #ffffff; font-size: 15px; font-weight: 300;
}
- home-section-wrapper .desc p:last-child { margin-bottom: 0; }
/* 4.5 Buttons
*/
- home-section-wrapper .buttons {
width: 100%; text-align: center; margin-bottom: 20px;
}
- home-section-wrapper .buttons a {
color: #ffffff; font-size: 18px; font-weight: 100; line-height: 35px; margin: 0 30px 30px 0; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
- home-section-wrapper .buttons a:last-child { margin-right: 0; }
- home-section-wrapper .buttons a i {
float: left; font-size: 35px; line-height: 35px; margin-right: 10px;
}
/* 4.6 Home Feature Image
*/
- home-section-wrapper .feature-home-image {
width: 100%; max-height: 400px; text-align: left;
}
- super_white_dna {
rotate: 0;
position: relative; left: 50%; top: 50%; margin-left: -25%; margin-top: -25%; z-index: 5;
height: 100%; width: 100%; }
- lightbulb_dna{
height: 100%; width: 100%; z-index: 1; position:absolute; }
- home-section-wrapper img.igem {
rotate: 0;
position: absolute; left: 38% ; top: 0%;
bottom: 0px;
z-index: 1;
} .graph__wrapper_graph_1 {
width: 400px; margin: 5px auto; position: relative;
} .graph__wrapper_graph_1 svg {
position: absolute; margin: 82px 0px 0px -150px;
} .coordinates_graph_1 {
position: absolute; counter-reset: line 2;
} .coordinates_graph_1 span {
display: inline-block; border-bottom: 1px solid #3a3a3a; height: 84px; width: 350px;
} .coordinates_graph_1 span:before {
counter-increment: line -1; content: counter(line); display: inline-block; color: #4a4a4a; margin: 72px 0px 0px -355px;
} .path_graph_1 {
stroke-dasharray: 1000; stroke-dashoffset: 1000; -webkit-animation: dash 1.5s ease-in forwards; animation: dash 1.5s ease-in forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-delay: 1s; animation-delay: 1s;
} .description_graph_1{
font-family: "Roboto"; color:lighten(@darkgrey, 50%); text-align:center; margin: 0px 0px 0px 0px; font-size:16px;
} @-webkit-keyframes dash {
to { stroke-dashoffset: 0; }
} @keyframes dash {
to { stroke-dashoffset: 0; }
}
- degradation_protein_container {
min-width: 310px; height: 600px; margin: 0 auto;
} /* 4.7 Feature Box Style 1
*/
/* 4.7.1 Main Typography
*/
.feature-box-style-1 .feature-title h4 {
color: #ffffff; font-weight: 200;
} .feature-box-style-1 .feature-desc p {
color: #ffffff; font-size: 15px; font-weight: 100;
} .feature-box-style-1 .feature-desc p:last-child { margin-bottom: 0; }
/* 4.7.2 Feature Box Style 1 ( Left )
*/
/* 4.7.2.1 Wrapper
*/
.left .feature-box-style-1 {
width: 100%; overflow: hidden; text-align: right; margin-bottom: 0px;
} .left .feature-box-style-1:first-child { margin-top: 50px; } .left .feature-box-style-1:last-child { margin-bottom: 0px; }
/* 4.7.2.2 Icon
*/
.left .feature-box-style-1 .feature-icon {
float: right; color: #ffffff; font-size: 28px;
}
/* 4.7.2.3 Title
*/
.left .feature-box-style-1 .feature-title {
width: 100%; padding-right: 45px; margin-bottom: 14px;
}
/* 4.7.2.4 Description
*/
.left .feature-box-style-1 .feature-desc { padding-right: 90px; }
/* 4.7.3 Feature Box Style 1 ( Right )
*/
/* 4.7.3.1 Wrapper
*/
.right .feature-box-style-1 {
width: 100%; overflow: hidden; text-align: left; margin-bottom: px;
} .right .feature-box-style-1:first-child { margin-top: 50px; } .right .feature-box-style-1:last-child { margin-bottom: 0px; }
/* 4.7.3.2 Icon
*/
.right .feature-box-style-1 .feature-icon {
float: left; color: #ffffff; font-size: 28px;
}
/* 4.7.3.3 Title
*/
.right .feature-box-style-1 .feature-title {
width: 100%; padding-left: 45px; margin-bottom: 14px;
}
/* 4.7.3.4 Description
*/
.right .feature-box-style-1 .feature-desc { padding-left: 45px; }
/* ==========================================================================
5. Feature Section
========================================================================== */ /* 5.1 Wrapper
*/
- feature-section {
margin: 0; width: 100%; padding: 55px 0 70px; background-color: #ffffff;
}
/* 5.2 Feature Bix Style 2
*/
/* 5.2.1 Wrapper
*/
.feature-box-style-2 {
width: 100%; overflow: hidden; margin-bottom: 50px;
}
/* 5.2.2 Icon
*/
.feature-box-style-2 .feature-icon {
float: left; color: #ff3131; font-size: 30px;
}
/* 5.2.3 Title
*/
.feature-box-style-2 .feature-title {
width: 100%; padding-left: 45px; margin-bottom: 8px;
} .feature-box-style-2 .feature-title h4 {
font-weight: 700; line-height: 30px;
}
/* 5.2.4 Description
*/
.feature-box-style-2 .feature-desc {
width: 100%; padding-left: 45px;
} .feature-box-style-2 .feature-desc p {
font-size: 14px; font-weight: 300;
} .feature-box-style-2 .feature-desc p:last-child { margin-bottom: 0; }
/* 5.3 Lets See BTN
*/
.lets-see-btn {
width: 100%; overflow: hidden; text-align: center;
}
/* ==========================================================================
6. Arrows Section
========================================================================== */ /* 6.1 Wrapper
*/
.arrows-section {
width: 100%; height: 22px; z-index: 999; margin-top: -21px; position: relative; text-align: center;
} .arrows-section:after { left: 0; top: 20px; width: 100%; height: 1px; content: ; z-index: -1; position: absolute; background-color: #FFFFFF; }
/* 6.2 Anchors
*/
.arrows-section a {
width: 41px; height: 41px; color: #c8cfd7; overflow: hidden; line-height: 39px; margin: 0 5px 0 0; text-align: center; display: inline-block; background-color: #FFFFFF;
-webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px;
-webkit-border: 1px solid #c8cfd7; -moz-border: 1px solid #c8cfd7; -o-border: 1px solid #c8cfd7; border: 1px solid #c8cfd7;
} .arrows-section a:last-child { margin-right: 0; }
/* 6.3 Icons
*/
.arrows-section a i {
font-size: 30px; line-height: 31px;
} .arrows-section a i.fa-angle-up { line-height: 31px; }
/* ==========================================================================
7. How It Works Section
========================================================================== */ /* 7.1 Wrapper
*/
- works-section {
margin: 0; width: 100%; padding: 35px 0 40px; background-color: #ffffff;
}
/* 7.2 Tabs
*/
/* 7.2.1 Tabs List Wrapper
*/
.ui-slider-tabs-list-wrapper {
margin: 0; position: relative; font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
} .ui-slider-tabs-list-wrapper:after {
left: 0; top: 1px; width: 0; height: 0; z-index: 1; color: #76889a; font-size: 30px; text-align: left; content: '\f0d9'; position: absolute; font-family: 'FontAwesome';
} .ui-slider-tabs-list-wrapper:before {
top: 1px; width: 0; height: 0; right: 11px; z-index: 999; color: #76889a; font-size: 30px; content: '\f0da'; position: absolute; font-family: 'FontAwesome';
}
/* 7.2.2 Tabs List
*/
/* 7.2.2.1 Container
*/
.ui-slider-tabs-list-container {
z-index: 1; position: relative;
} .ui-slider-tabs-list-container:after {
left: 0; top: 11px; content: ; z-index: -2; width: 100%; height: 2px; position: absolute; background-color: #F2F2FF;
}
/* 7.2.2.2 Items
*/
.ui-slider-tabs-list li {
float: left; width: 285px; text-align: center; position: relative; background: transparent; height: 70px !important; display: block !important;
-webkit-border: none; -moz-border: none; -o-border: none; border: none;
} .ui-slider-tabs-list li:after {
top: 1px; left: 50%; width: 20px; z-index: -1; height: 20px; color: #f5f5f5; font-size: 23px; content: '\f111'; margin-left: -10px; position: absolute; font-family: 'FontAwesome';
} .ui-slider-tabs-list li:first-of-type {
-webkit-border: none; -moz-border: none; -o-border: none; border: none;
}
/* 7.2.2.3 Anchor
*/
.ui-slider-tabs-list li a {
width: 285px; line-height: 40px; padding: 30px 0 0 0; height: 70px !important;
}
/* 7.2.2.4 Selected
*/
.ui-slider-tabs-list li.selected { background: transparent; } .ui-slider-tabs-list li.selected:after {
top: 1px; left: 50%; z-index: -1; width: 20px; height: 20px; color: #76889a; font-size: 23px; content: '\f192'; position: absolute; margin-left: -10px; font-family: 'FontAwesome'; background-color: #ffffff;
} .ui-slider-tabs-list li.selected a, .ui-slider-tabs-list li a:hover, .ui-slider-tabs-list li a {
color: #76889a; font-size: 14px; font-weight: 400;
}
/* 7.3 Content
*/
.ui-slider-tab-content { padding: 10px 0 0; } .ui-slider-tabs-content-container {
z-index: 999; margin-top: 20px; overflow: visible;
-webkit-border: none; -moz-border: none; -o-border: none; border: none;
}
/* 7.4 Arrows
*/
/* 7.4.1 Right Arrow
*/
.ui-slider-tabs-rightPanelArrow {
right: 0; width: 0; height: 0; opacity: 1; cursor: pointer; text-align: right; position: absolute; top: -89px !important; background-image: none;
} .ui-slider-tabs-rightPanelArrow:after {
top: 0; right: 0; opacity: 1; color: #76889a; font-size: 30px; content: '\f0da'; position: absolute; font-family: 'FontAwesome';
}
/* 7.4.2 Left Arrow
*/
.ui-slider-tabs-leftPanelArrow {
width: 0; height: 0; left: 11px; opacity: 1; cursor: pointer; text-align: left; position: absolute; top: -89px !important; background-image: none;
} .ui-slider-tabs-leftPanelArrow:after {
top: 0; right: 0; opacity: 1; color: #76889a; font-size: 30px; content: '\f0d9'; position: absolute; font-family: 'FontAwesome';
}
/* 7.5 Feature Box
*/
- WorksTabs .feature-box-style-2 { margin-bottom: 30px; }
/* 7.6 Feature Image
*/
- WorksTabs .feature-image {
width: 100%; overflow: hidden; margin-bottom: 30px;
}
- WorksTabs .feature-image img { width: 100%; }
/* 7.7 Feature Btns
*/
- WorksTabs .feature-btns {
width: 100%; text-align: left; margin-bottom: 30px;
}
- WorksTabs .feature-btns a {
margin-top: 20px; margin-right: 5px;
}
- WorksTabs .feature-btns a:last-child { margin-right: 0; }
/* ==========================================================================
8. Portfolio Section
========================================================================== */ /* 8.1 Wrapper
*/
- portfolio-section {
margin: 0; width: 100%; padding: 35px 0 60px; background-color: #ffffff;
}
/* 8.2 OWL Slider
*/
.owl-wrapper-outer { z-index: 2; } .owl-theme .owl-controls .owl-page span { opacity: 1;
width: 18px; height: 18px;
background: #76889a; } .owl-theme .owl-controls .owl-page.active span {
position: relative; background-color: #ffffff;
} .owl-theme .owl-controls .owl-page.active span:after {
top: -2px; left: -1px; color: #76889a; font-size: 23px; content: '\f192'; position: absolute; text-align: center; font-family: 'FontAwesome';
}
/* 8.3 Portfolio Item
*/
/* 8.3.1 Wrapper
*/
.portfolio-item {
margin: 0 auto; padding: 0 15px; max-width: 290px; overflow: hidden; position: relative;
}
/* 8.3.2 Content
*/
.portfolio-content {
width: 100%; padding: 10px; position: relative; background-color: #ffffff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
}
/* 8.3.3 Image
*/
.portfolio-content img {
width: 100%;
-webkit-border-radius: 6px;
-moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
}
/* 8.3.4 Overlayer
*/
.portfolio-overlayer {
top: 0; left: 0; width: 100%; height: 100%; line-height: 100%; text-align: center; position: absolute; background-color: transparent;
-webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
}
/* 8.3.5 Anchor
*/
.portfolio-overlayer a {
top: 0; left: 0; z-index: 0; opacity: 0; width: 100%; height: 100%; display: block; position: absolute;
-webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px;
-webkit-border: 2px solid #c8cfd7; -moz-border: 2px solid #c8cfd7; -o-border: 2px solid #c8cfd7; border: 2px solid #c8cfd7;
}
/* 8.3.6 Hover
*/
.portfolio-content:hover .portfolio-overlayer a { opacity: 1; }
/* ==========================================================================
9. Portfolio Section
========================================================================== */ /* 9.1 Wrapper
*/
- closer-section {
margin: 0; width: 100%; padding: 35px 0 70px; background-color: #ffffff;
}
/* 9.2 Magnify
*/
/* 9.2.1 Wrapper
*/
- magnify-wrapper {
width: 100%;
height: auto; margin: 0 auto;
max-width: 770px; position: relative;
}
/* 9.2.2 Container
*/
- magnify-container {
float: left;
width: 100%;
height: auto;
position: relative;
}
/* 9.2.3 Image
*/
- magnify-container img { width: 100%; }
/* ==========================================================================
10. Ready Section
========================================================================== */ /* 10.1 Wrapper
*/
- ready-section {
margin: 0; width: 100%; padding: 35px 0 0; background-color: #ffffff;
}
/* 10.2 Mini Feature List
*/
/* 10.2.1 Wrapper
*/
ul.mini-feature-list {
padding: 0; overflow: hidden; list-style: none; margin: 0 0 15px 0;
}
/* 10.2.2 Items
*/
ul.mini-feature-list li {
display: block; color: #76889a; font-size: 18px; font-weight: 300; margin-bottom: 15px;
}
/* 10.2.3 Icons
*/
ul.mini-feature-list li i {
color: #76889a; margin-right: 10px;
}
/* 10.3 Feature Btns
*/
- ready-section .feature-btns {
width: 100%; text-align: left; margin-bottom: 30px;
}
- ready-section .feature-btns a {
margin-top: 20px; margin-right: 5px;
}
- ready-section .feature-btns a:last-child { margin-right: 0; }
/* 10.4 Feature Image
*/
- ready-section .feature-image {
width: 100%; max-height: 785px; text-align: center;
}
- ready-section .feature-image img {
width: 100%; max-width: 400px;
}
/* ==========================================================================/* 10.5 UNR Line
*/
.subheader-inner{ border-top: 1px solid #ffffff; border-color: rgba(255, 255, 255, 0.3); max-width: 650px; margin: 0 auto; padding-top: 1em;
}
/* ==========================================================================
11. Team Section
========================================================================== */ /* 11.1 Wrapper
*/
- team-section {
margin: 0; width: 100%; padding: 35px 0 0; background-color: #ffffff;
}
/* 11.2 Slider
*/
/* 11.2.1 Wrapper
*/
- team-section .ui-slider-tabs-content-container { margin-top: 0; }
- team-section .ui-slider-tab-content { padding: 0; }
- team-section .ui-slider-tabs-list-wrapper:after,
- team-section .ui-slider-tabs-list-wrapper:before,
- team-section .ui-slider-tabs-list-container:after,
- team-section .ui-slider-tabs-list li:after {
display: none;
}
/* 11.2.2 Member Thumbs
*/
- team-section .ui-slider-tabs-list li {
float: left; width: 170px; margin-left: 30px; text-align: center; position: relative; background: transparent; height: 170px !important; display: block !important;
-webkit-border: none; -moz-border: none; -o-border: none; border: none;
-webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
}
- team-section .ui-slider-tabs-list li:first-child { margin-left: 0; }
- team-section .ui-slider-tabs-list li a {
padding: 0; width: 170px; position: relative; height: 170px !important;
-webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
}
- team-section .ui-slider-tabs-list li a img {
width: 110px; height: 170px; position: relative;
-webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
}
- team-section .ui-slider-tabs-list li a:after {
top: 0; left: 0; z-index: 1; opacity: 0.5; width: 170px; display: none; height: 170px; color: #ffffff; font-size: 30px; content: '\f002'; line-height: 170px; position: absolute; background-color: #ff3131; font-family: 'FontAwesome';
-webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
}
- team-section .ui-slider-tabs-list li a:hover:after { display: block; }
/* 11.2.3 Navigation
*/
- team-section .ui-slider-tabs-list-wrapper {
top: 355px; right: 15px; float: right; z-index: 9999; overflow: hidden; position: absolute;
}
- team-section .ui-slider-tabs-list-container {
float: right; width: 570px; overflow: hidden;
}
/* 11.2.4 Dots
*/
- team-section .ui-slider-tabs-indicator-container {
top: 310px; height: 30px; text-align: right;
}
- team-section .ui-slider-tabs-indicator {
width: 20px; height: 20px; margin-right: 10px; position: relative; background-image: none;
-webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
}
- team-section .ui-slider-tabs-indicator:last-child { margin-right: 0; }
.ui-slider-tabs-indicator:after {
top: 1px; left: 50%; width: 20px; z-index: 1; height: 20px; color: #76889a; font-size: 21px; content: '\f111'; margin-left: -10px; position: absolute; font-family: 'FontAwesome';
}
/* 11.2.5 Selected
*/
.ui-slider-tabs-indicator.selected:after {
top: 1px; left: 50%; z-index: -1; width: 20px; height: 20px; color: #76889a; font-size: 21px; content: '\f192'; position: absolute; margin-left: -10px; font-family: 'FontAwesome';
} .ui-slider-tabs-indicator.selected, .ui-slider-tabs-indicator:hover {
z-index: 1; color: #76889a;
}
/* 11.2.6 Member Big Image
*/
.member-image {
width: 100%; margin: 0 auto; text-align: center;
} .member-image img {
width: 100%; max-width: 360px;
}
/* 11.2.7 Title Description
*/
- TeamTabs .section-short-desc {
color: #76889a; font-size: 18px; font-weight: 300; text-transform: uppercase;
}
/* 11.2.8 Content Description
*/
.member-desc {
overflow: hidden; margin-bottom: 35px;
} .member-desc p {
font-size: 14px; font-weight: 300;
} .member-desc p:last-child { margin-bottom: 0; }
/* 11.2.9 Social Icons
*/
.member-social {
overflow: hidden; margin-bottom: 60px;
} .member-social ul {
margin: 0; padding: 0; list-style: none;
} .member-social ul li {
float: left; width: 40px; height: 40px; margin: 0 10px 10px 0;
} .member-social ul li a {
display: block; font-size: 20px; line-height: 38px; text-align: center; background-color: #ffffff;
-webkit-border: 1px solid #76889a; -moz-border: 1px solid #76889a; -o-border: 1px solid #76889a; border: 1px solid #76889a;
-webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%;
} .member-social ul li a:hover { background-color: #76889a; }
/* ==========================================================================
12. Team Section
========================================================================== */ /* 12.1 Wrapper
*/
- faq-section {
margin: 0; width: 100%; padding: 35px 0 70px; background-color: #ffffff;
}
/* 12.2 Tabs
*/
/* 12.2.1 Wrapper
*/
.faq-tabs {
width: 100%; overflow: hidden;
}
/* 12.2.2 Btns
*/
/* 12.2.2.1 List
*/
.faq-tabs ul.faq-tabs-btns {
width: 50%; float: left; margin: 0 auto; list-style: none; padding: 0 15px 0;
}
/* 12.2.2.2 Items
*/
.faq-tabs ul.faq-tabs-btns li {
display: block; line-height: 50px; position: relative; margin-bottom: 30px;
-webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
}
/* 12.2.2.3 Anchors
*/
.faq-tabs ul.faq-tabs-btns li a {
display: block; font-size: 18px; font-weight: 400; padding-left: 15px; position: relative;
-webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
-webkit-border: 1px solid #76889a; -moz-border: 1px solid #76889a; -o-border: 1px solid #76889a; border: 1px solid #76889a;
} .faq-tabs ul.faq-tabs-btns li a:hover, .faq-tabs ul.faq-tabs-btns li a:focus, .faq-tabs ul.faq-tabs-btns li a.active {
color: #ffffff; background-color: #ff3131;
-webkit-border: 1px solid #ff3131; -moz-border: 1px solid #ff3131; -o-border: 1px solid #ff3131; border: 1px solid #ff3131;
} .faq-tabs ul.faq-tabs-btns li a.active:after {
width: 0; height: 0; top: 12px; z-index: 1; content: ; right: -32px; position: absolute;
-webkit-border-right: 13px solid #f5f7f9; -moz-border-right: 13px solid #f5f7f9; -o-border-right: 13px solid #f5f7f9; border-right: 13px solid #f5f7f9;
-webkit-border-top: 13px solid rgba(0, 0, 0, 0); -moz-border-top: 13px solid rgba(0, 0, 0, 0); -o-border-top: 13px solid rgba(0, 0, 0, 0); border-top: 13px solid rgba(0, 0, 0, 0);
-webkit-border-bottom: 13px solid rgba(0, 0, 0, 0); -moz-border-bottom: 13px solid rgba(0, 0, 0, 0); -o-border-bottom: 13px solid rgba(0, 0, 0, 0); border-bottom: 13px solid rgba(0, 0, 0, 0);
} .faq-tabs ul.faq-tabs-btns li a.active:before {
width: 0; height: 0; top: 10px; content: ; right: -32px; position: absolute;
-webkit-border-right: 15px solid #b2c4d6; -moz-border-right: 15px solid #b2c4d6; -o-border-right: 15px solid #b2c4d6; border-right: 15px solid #b2c4d6;
-webkit-border-top: 15px solid rgba(0, 0, 0, 0); -moz-border-top: 15px solid rgba(0, 0, 0, 0); -o-border-top: 15px solid rgba(0, 0, 0, 0); border-top: 15px solid rgba(0, 0, 0, 0);
-webkit-border-bottom: 15px solid rgba(0, 0, 0, 0); -moz-border-bottom: 15px solid rgba(0, 0, 0, 0); -o-border-bottom: 15px solid rgba(0, 0, 0, 0); border-bottom: 15px solid rgba(0, 0, 0, 0);
} .faq-tabs .col-md-6 { overflow: hidden; }
/* 12.2.3 Content
*/
/* 12.2.3.1 Wrapper
*/
.faqcontent {
overflow: hidden; margin-bottom: 30px; padding: 15px 20px 0; background-color: #f5f7f9;
-webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
-webkit-border: 1px solid #b2c4d6; -moz-border: 1px solid #b2c4d6; -o-border: 1px solid #b2c4d6; border: 1px solid #b2c4d6;
}
/* 12.2.3.2 Description
*/
.faqcontent .content-desc h3 { margin-bottom: 15px; } .faqcontent .content-desc { margin-bottom: 20px; } .faqcontent .content-desc p {
color: #2d373c; font-size: 14px; font-weight: 300;
} .faqcontent .content-desc p:last-child { margin-bottom: 0; } .faqcontent .mini-feature-list li:last-child { margin-bottom: 0; } .faqcontent .mini-feature-list {
width: 50%; float: left;
} .faqcontent .mini-feature-list:first-child { padding-right: 15px; } .faqcontent .mini-feature-list:last-child { padding-left: 15px; }
/* ==========================================================================
13. Clients Section
========================================================================== */ /* 13.1 Wrapper
*/
- clients-section {
margin: 0; width: 100%; padding: 35px 0 70px; background-color: #ffffff;
} .owl-clients {
width: 100%; margin: 0 auto; max-width: 1060px;
}
/* 13.2 Content
*/
.client-item .client-content {
width: 100%; text-align: center; position: relative; padding: 15px 20px; margin-bottom: 20px; background-color: #f5f7f9;
-webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
-webkit-border: 1px solid #b2c4d6; -moz-border: 1px solid #b2c4d6; -o-border: 1px solid #b2c4d6; border: 1px solid #b2c4d6;
} .client-item .client-content:after {
width: 0;
height: 0;
top: 100%; left: 50%; content: ; margin-left: -12px; position: absolute;
-webkit-border-top: 12px solid #b2c4d6;
-moz-border-top: 12px solid #b2c4d6; -o-border-top: 12px solid #b2c4d6; border-top: 12px solid #b2c4d6;
-webkit-border-left: 12px solid transparent;
-moz-border-left: 12px solid transparent; -o-border-left: 12px solid transparent; border-left: 12px solid transparent;
-webkit-border-right: 12px solid transparent;
-moz-border-right: 12px solid transparent; -o-border-right: 12px solid transparent; border-right: 12px solid transparent;
} .client-item .client-content:before {
width: 0;
height: 0;
top: 100%; left: 50%; z-index: 1; content: ; margin-top: -1px; margin-left: -11px; position: absolute;
-webkit-border-top: 11px solid #f5f7f9;
-moz-border-top: 11px solid #f5f7f9; -o-border-top: 11px solid #f5f7f9; border-top: 11px solid #f5f7f9;
-webkit-border-left: 11px solid transparent;
-moz-border-left: 11px solid transparent; -o-border-left: 11px solid transparent; border-left: 11px solid transparent;
-webkit-border-right: 11px solid transparent;
-moz-border-right: 11px solid transparent; -o-border-right: 11px solid transparent; border-right: 11px solid transparent;
}
/* 13.3 Quote
*/
.client-quote {
width: 100%; margin-bottom: 5px;
} .client-item .client-content .client-quote p {
color: #76889a; font-size: 16px; font-weight: 300;
} .client-item .client-content .client-quote p:last-child { margin-bottom: 0; }
/* 13.4 Name
*/
.client-item .client-content .cient-name {
color: #76889a; font-size: 18px; font-weight: 700; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* 13.5 Image
*/
.client-item .client-image {
width: 100%; overflow: hidden; text-align: center;
} .client-item .client-image img {
width: 150px; height: 136.9px;
-webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
}
/* 13.6 Arrows
*/
.owl-navigation {
top: 100%; left: 50%; margin-top: -50px; margin-left: -25px; position: absolute; text-align: center;
} .owl-navigation a {
height: 25px; color: #76889a; font-size: 25px; line-height: 25px;
} .owl-navigation a i { line-height: 25px; } .clients-prev {
z-index: 9; float: left; position: relative; margin-left: -75px;
} .clients-next {
z-index: 9; float: right; margin-left: 125px; position: relative;
}
/* ==========================================================================
14. Price Section
========================================================================== */ /* 14.1 Wrapper
*/
- price-section {
margin: 0; width: 100%; padding: 35px 0 40px; background-color: #ffffff;
}
/* 14.2 Price Table
*/
/* 14.2.1 Wrapper
*/
.price-table {
width: 100%; max-width: 263px; text-align: center; margin: 0 auto 30px; padding: 25px 0 30px; background-color: #f5f7f9;
}
/* 14.2.2 Name
*/
.price-table .table-name h1 {
font-weight: 100; margin-bottom: 10px; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* 14.2.3 Description
*/
.price-table .table-desc p {
color: #76889a; font-size: 14px; font-weight: 300; margin-bottom: 25px;
}
/* 14.2.4 Price
*/
.price-table .table-price {
width: 130px; height: 130px; overflow: hidden; margin: 0 auto 30px; background-color: #ff3131;
-webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%;
} .price-table .table-price h1 {
color: #ffffff; font-size: 36px; font-weight: 700; line-height: 130px; letter-spacing: 1px; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* 14.2.5 Info
*/
.price-table .table-info ul {
padding: 0; list-style: none; margin: 0 0 30px;
} .price-table .table-info ul li {
display: block; color: #76889a; font-size: 14px; font-weight: 700; line-height: 50px;
-webkit-border-bottom: 1px solid rgba(178, 196, 214, 0.3); -moz-border-bottom: 1px solid rgba(178, 196, 214, 0.3); -o-border-bottom: 1px solid rgba(178, 196, 214, 0.3); border-bottom: 1px solid rgba(178, 196, 214, 0.3);
} .price-table .table-info ul li:first-child {
-webkit-border-bottom: 1px solid rgba(178, 196, 214, 0.3); -moz-border-bottom: 1px solid rgba(178, 196, 214, 0.3); -o-border-bottom: 1px solid rgba(178, 196, 214, 0.3); border-bottom: 1px solid rgba(178, 196, 214, 0.3);
}
/* 14.2.6 Hover
*/
.price-table.featured, .price-table:hover { background-color: #ff3131; }
.price-table.featured .table-name h1, .price-table.featured .table-desc p, .price-table.featured .table-info ul li, .price-table:hover .table-name h1, .price-table:hover .table-desc p, .price-table:hover .table-info ul li {
color: #ffffff;
}
.price-table.featured .table-price, .price-table:hover .table-price { background-color: #ffffff; } .price-table.featured .table-btn .btn-nesto, .price-table:hover .table-btn .btn-nesto {
background-color: transparent; color: #ffffff;
-webkit-border-color: #ffffff; -moz-border-color: #ffffff; -o-border-color: #ffffff; border-color: #ffffff;
}
.price-table:hover .table-name h1 { font-weight: 700; }
.price-table.featured .table-price h1, .price-table:hover .table-price h1 {
color: #ff3131; font-weight: 700;
}
.price-table:hover .table-btn .btn-nesto:hover {
background-color: transparent;
-webkit-border-color: #ffffff; -moz-border-color: #ffffff; -o-border-color: #ffffff; border-color: #ffffff;
}
/* ==========================================================================
15. Recent Posts Section
========================================================================== */ /* 15.1 Wrapper
*/
- recent-section {
margin: 0; width: 100%; padding: 35px 0 70px; background-color: #ffffff;
}
/* 15.2 Mini Post
*/
/* 15.2.1 Wrapper
*/
.mini-post {
width: 100%; overflow: hidden; max-width: 263px; text-align: center; margin: 0 auto 30px; padding-bottom: 20px; background-color: #f5f7f9;
-webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; -o-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
} .mini-post a {
font-size: 14px; font-weight: 300; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* 15.2.2 Image
*/
.mini-post .post-image { width: 100%; } .mini-post .post-image img { width: 100%; }
/* 15.2.3 Title
*/
.mini-post .post-title { margin-top: 20px; } .mini-post .post-title h2 { margin-bottom: 10px; } .mini-post .post-title h2 a {
color: #2d373c; font-size: 18px; font-weight: 300; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
} .mini-post .post-title a:hover { color: #ff3131; }
/* 15.2.4 Date
*/
.mini-post .post-date { margin-bottom: 10px; } .mini-post .post-date h4 {
color: #76889a; font-size: 14px; font-weight: 300; text-transform: uppercase; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* 15.2.5 Content
*/
.mini-post .post-content {
padding: 0 5px; margin-bottom: 15px;
} .post-content p {
color: #76889a; font-size: 14px; font-weight: 300;
}
/* ==========================================================================
16. Like Section
========================================================================== */ /* 16.1 Wrapper
*/
- like-section {
margin: 0; width: 100%; padding: 35px 0 60px; background-color: #ffffff;
-webkit-border-bottom: 1px solid #f4f5f5; -moz-border-bottom: 1px solid #f4f5f5; -o-border-bottom: 1px solid #f4f5f5; border-bottom: 1px solid #f4f5f5;
}
/* 16.2 Buttons
*/
.like-buttons {
width: 100%; text-align: center;
} .like-buttons a { margin: 0 10px 10px 0; } .like-buttons a:last-child { margin-right: 0; }
/* ==========================================================================
17. Reach Section
========================================================================== */ /* 17.1 Wrapper
*/
- reach-section {
margin: 0; width: 100%; padding: 35px 0 40px; background-color: #ffffff;
}
/* 17.2 Form
*/
/* 17.2.1 Wrapper
*/
.contactForm {
padding: 0; width: 100%; margin: 0 auto; max-width: 670px; overflow: hidden;
} .form-group {
margin: 0; padding: 0;
}
/* 17.2.2 Textarea
*/
.contactForm textarea { width: 100%;
resize: none; margin: 0 auto 30px; height: 142px !important;
}
/* 17.2.3 form-control
*/
.contactForm .form-control { width: 100%;
height: 42px; outline: none;
padding: 10px 15px;
margin: 0 auto 30px;
background-color: #ffffff;
-webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none;
-webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
-webkit-border: 1px solid #B2C4D6; -moz-border: 1px solid #B2C4D6; -o-border: 1px solid #B2C4D6; border: 1px solid #B2C4D6;
} .contactForm .form-control:hover, .contactForm .form-control:focus {
-webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none;
-webkit-border: 1px solid #B2C4D6; -moz-border: 1px solid #B2C4D6; -o-border: 1px solid #B2C4D6; border: 1px solid #B2C4D6;
}
/* 17.2.4 Button
*/
.contactForm button.submit {
width: 100%; outline: none; color: #76889a; font-weight: 300; padding: 10px 16px; margin-bottom: 30px; background-color: #ffffff; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-webkit-border-color: #B2C4D6; -moz-border-color: #B2C4D6; -o-border-color: #B2C4D6; border-color: #B2C4D6;
} .contactForm .submit.active, .contactForm .submit:active, .contactForm .submit.focus, .contactForm .submit:focus, .contactForm .submit:hover { color: #ffffff;
outline-width: 0; position: relative; background-color: #76889a;
-webkit-border-color: #76889a; -moz-border-color: #76889a; -o-border-color: #76889a; border-color: #76889a;
}
/* 17.2.5 error message
*/
.error { top: 0;
z-index: 2; float: right; color: #76889a; position: relative; margin: -69px 15px 0 0;
}
- -webkit-ui-invalid:not(output) { box-shadow: none; }
:-moz-ui-invalid:not(output) { box-shadow: none; } :-ms-ui-invalid:not(output) { box-shadow: none; } :-o-ui-invalid:not(output) { box-shadow: none; } ui-invalid:not(output) { box-shadow: none; }
/* 17.2.6 Alert
*/
.alert-nesto {
color: #ffffff; background-color: #76889a;
-webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
}
- contact-section .alert.alert-nesto { margin-bottom: 30px; }
- contact-section .alert {
-webkit-border: none; -moz-border: none; -o-border: none; border: none;
}
/* ==========================================================================
18. Subscribe Section
========================================================================== */ /* 18.1 Wrapper
*/
- subscribe-section {
margin: 0; width: 100%; padding: 35px 0 40px; background-color: #ffffff;
}
- subscribe-blog-section {
margin: 0; width: 100%; padding: 35px 0 40px; background-color: #ffffff;
-webkit-border-bottom: 1px solid #f4f5f5; -moz-border-bottom: 1px solid #f4f5f5; -o-border-bottom: 1px solid #f4f5f5; border-bottom: 1px solid #f4f5f5;
}
/* 18.2 Subscribe
*/
/* 18.2.1 Wrapper
*/
- subscribe {
width: 100%; margin: 0 auto; max-width: 670px; overflow: hidden; position: relative;
}
/* 18.2.2 Input
*/
- subscribe-section .validate {
position: relative; margin: 0 auto; padding: 2em 0; max-width: 600px; width: 100%; text-align: left; font-size: 2.5em; }
- subscribe-section .validate .submit {
display: none; }
/* Question list style */
- subscribe-section .validate ol {
margin: 0; padding: 0; list-style: none; position: relative; -webkit-transition: height 0.4s; transition: height 0.4s; }
- subscribe-section .validate ol:before {
content: ; background-color: rgba(0,0,0,0.1); position: absolute; left: 0; bottom: 0; width: 100%; height: 2.35em; }
- subscribe-section .questions li {
z-index: 100; position: relative; visibility: hidden; height: 0; -webkit-transition: visibility 0s 0.4s, height 0s 0.4s; transition: visibility 0s 0.4s, height 0s 0.4s; }
- subscribe-section .questions li.current,
- subscribe-section .no-js .questions li {
visibility: visible; height: auto; -webkit-transition: none; transition: none; }
/* Labels */
- subscribe-section .questions li > span {
display: block; overflow: hidden; }
- subscribe-section .questions li > span label {
display: block; -webkit-transition: -webkit-transform 0.4s; transition: transform 0.4s; -webkit-transform: translateY(-100%); transform: translateY(-100%); }
- subscribe-section .questions li.current > span label,
- subscribe-section .no-js .questions li > span label {
-webkit-transition: none; transition: none; -webkit-transform: translateY(0); transform: translateY(0); }
- subscribe-section .show-next .questions li.current > span label {
-webkit-animation: moveUpFromDown 0.4s both; animation: moveUpFromDown 0.4s both; }
@-webkit-keyframes moveUpFromDown { from { -webkit-transform: translateY(100%); } to { -webkit-transform: translateY(0); } }
@keyframes moveUpFromDown { from { transform: translateY(100%); } to { transform: translateY(0); } }
/* Input field */
- subscribe-section .questions input {
display: block; margin: em 0 0 0; padding: em em em em; width: calc(100% - 2em); border: none; background: transparent; color: rgba(0,0,0,0.8); font-size: 1em; line-height: 1; opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }
- subscribe-section .questions .current input,
- subscribe-section .no-js .questions input {
opacity: 1; }
- subscribe-section .questions input:focus,
- subscribe-section .validate button:focus {
outline: none; }
/* Next question button */
- subscribe-section .next {
position: absolute; right: 0; bottom: 2.15em; /* padding-bottom of form plus progress bar height */ display: block; padding: 0; width: 2em; height: 2em; border: none; background: none; color: rgba(0,0,0,0.4); text-align: center; opacity: 0; z-index: 100; cursor: pointer; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translateX(-20%); transform: translateX(-20%); pointer-events: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
- subscribe-section .next:hover {
color: rgba(0,0,0,0.5); }
- subscribe-section .next::after {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: "\e600"; text-transform: none; font-weight: normal; font-style: normal; font-variant: normal; font-family: 'icomoon'; line-height: 2; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
- subscribe-section .next.show {
opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); pointer-events: auto; }
/* Progress bar */
- subscribe-section .validate .progress {
width: 0%; height: 0.15em; background: rgba(0,0,0,0.3); -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; }
- subscribe-section .validate .progress::before {
position: absolute; top: auto; width: 100%; height: inherit; background: rgba(0,0,0,0.05); content: ; }
/* Number indicator */
- subscribe-section .validate .number {
position: absolute; right: 0; overflow: hidden; margin: 0.4em 0; width: 3em; font-weight: 700; font-size: 0.4em; }
- subscribe-section .validate .number:after {
position: absolute; left: 50%; content: '/'; opacity: 0.4; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
- subscribe-section .validate .number span {
float: right; width: 40%; text-align: center; }
- subscribe-section .validate .number .number-current {
float: left; }
- subscribe-section .validate .number-next {
position: absolute; left: 0; }
- subscribe-section .validate.show-next .number-current {
-webkit-transition: -webkit-transform 0.4s; transition: transform 0.4s; -webkit-transform: translateY(-100%); transform: translateY(-100%); }
- subscribe-section .validate.show-next .number-next {
-webkit-animation: moveUpFromDown 0.4s both; animation: moveUpFromDown 0.4s both; }
/* Error and final message */
- subscribe-section .validate .error-message,
- subscribe-section .validate .final-message {
position: absolute; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.4s; transition: opacity 0.4s; }
- subscribe-section .validate .error-message {
padding: 0.4em 3.5em 0 0; width: 100%; color: rgba(0,0,0,0.7); font-style: italic; font-size: 0.4em; }
- subscribe-section .final-message {
top: 50%; left: 0; padding: 0.5em; width: 100%; text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
- subscribe-section .error-message.show,
- subscribe-section .final-message.show {
visibility: visible; opacity: 1; }
- subscribe-section .final-message.show {
-webkit-transition-delay: 0.5s; transition-delay: 0.5s; }
/* Final hiding of form / showing message */
- subscribe-section .simform-inner.hide {
visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s, visibility 0s 0.3s; transition: opacity 0.3s, visibility 0s 0.3s; }
/* No JS Fallback */
- subscribe-section .no-js .validate {
font-size: 1.75em; }
- subscribe-section .no-js .questions li {
padding: 0 0 0; }
- subscribe-section .no-js .validate .submit {
display: block; float: right; padding: 0px 0px 0px 0px; border: none; background: rgba(0,0,0,0.3); color: rgba(0,0,0,0.4); }
- subscribe-section .no-js .validate .controls {
display: none; }
/* Remove IE clear cross */ input[type=text]::-ms-clear {
display: none;
}
/* Adjust form for smaller screens */ @media screen and (max-width: 44.75em) { #subscribe-section .validate { font-size: 1.8em; } }
@media screen and (max-width: 33.5625em) { #subscribe-section .validate { font-size: 1.2em; } }
.connect { width: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 75px }
.connect form { margin-top: 10px; width: 480px; padding: 0px 0px 0px 0px; }
.connect form input[type=email] { width: 338px; height: 46px; border: 1px solid #002147; border-right: none; background: none; -webkit-border-top-left-radius: 99px; -webkit-border-bottom-left-radius-radius: 99px; -moz-border-radius-topleft: 99px; -moz-border-radius-bottomleft: 99px; border-top-left-radius: 99px; border-bottom-left-radius: 99px; font-size: 14px; font-weight: bold; padding: 0 0 0 20px; color: #8F8F8C; font-weight: 200; float: left; opacity: 0.65; }
.connect form input[type=email]:hover { opacity: 0.8; }
.connect form input[type=email]:focus { outline: none; opacity: 1; }
.connect form input[type=button], form input[type=submit] { width: 119px; height: 48px; border: none; cursor: pointer; -webkit-border-top-right-radius: 99px; -webkit-border-bottom-right-radius-radius: 99px; -moz-border-radius-topright: 99px; -moz-border-radius-bottomright: 99px; border-top-right-radius: 99px; border-bottom-right-radius: 99px; background-color: #8F8F8C; margin: 0; padding: 0; font-size: 14px; font-weight: bold; color: #333; float: left; opacity: 0.65; }
.connect form input[type=button]:hover, form input[type=submit]:hover { opacity: 1; }
.connect form input[type=button]:active, form input[type=submit]:active { opacity: 0.8; }
.connect ul { width: 440px; text-align: center; display: block; margin: 60px auto 20px auto; }
.connect ul li a { width: 48px; height: 48px; display: block; text-indent: -499px; overflow: hidden; opacity: 0.65; -webkit-border-radius: 499px; -moz-border-radius: 499px; border-radius: 499px; border: 1px solid #002147; margin: 0 5px; }
.connect ul li a:hover { opacity: 1; }
.connect ul li a:active { opacity: 0.8; }
@media only screen and (max-width : 960px) { .wrapper { width: auto; } .connect { display: block; float: none; width: 348px; margin: 50px auto; } .connect form { width: 100%; } .connect form input[type=text]{ width: 206px; } .connect ul { width: 340px; } }
@media only screen and (max-width : 480px) { h1, ul.countdown { margin: 20px auto; } h2 { margin: 40px auto; } }
/*Fade In Animation*/
h1, ul.countdown, h2, p, form, .connect {
-webkit-animation: fadein 3s; /* Safari and Chrome */ -moz-animation: fadein 3s; /* Firefox */ -ms-animation: fadein 3s; /* Internet Explorer */ -o-animation: fadein 3s; /* Opera */ animation: fadein 3s;
}
@keyframes fadein {
from { opacity: 0; } to { opacity: 1; }
} @-moz-keyframes fadein {
from { opacity: 0; } to { opacity: 1; }
} @-webkit-keyframes fadein {
from { opacity: 0; } to { opacity: 1; }
} @-ms-keyframes fadein {
from { opacity: 0; } to { opacity: 1; }
} @-o-keyframes fadein {
from { opacity: 0; } to { opacity: 1; }
}
/* ==========================================================================
19. Footer Section
========================================================================== */ /* 19.1 Wrapper
*/
- footer-section {
margin: 0; padding: 0; width: 100%; height: 95px; text-align: center;
}
/* 19.2 Social Icons
*/
/* 19.2.1 List
*/
.footer-social-icons ul {
margin: 0; padding: 0; width: 100%; list-style: none; text-align: center;
background-color: #FFFFFF; }
/* 19.2.2 Iems
*/
.footer-social-icons ul li {
margin: 0; width: 100px; text-align: center; display: inline-block;
-webkit-border-right: 1px solid #f4f5f5; -moz-border-right: 1px solid #f4f5f5; -o-border-right: 1px solid #f4f5f5; border-right: 1px solid #f4f5f5;
-webkit-border-bottom: 1px solid #f4f5f5; -moz-border-bottom: 1px solid #f4f5f5; -o-border-bottom: 1px solid #f4f5f5; border-bottom: 1px solid #f4f5f5;
} .footer-social-icons ul li:first-child {
-webkit-border-left: 1px solid #f4f5f5; -moz-border-left: 1px solid #f4f5f5; -o-border-left: 1px solid #f4f5f5; border-left: 1px solid #f4f5f5;
} .footer-social-icons ul li a {
display: block; font-size: 30px; line-height: 95px;
} .footer-social-icons ul li a:hover { background-color: #FFFFFF; }
/* ==========================================================================
20. More APPS Section20.1 Wrapper
========================================================================== */ /* 20.1 Wrapper
*/
- moreapps-section {
margin: 0; width: 100%; position: relative; padding: 35px 0 60px; background-color: #ffffff;
}
- owl-apps {
width: 100%; margin: 0 auto; max-width: 1060px;
}
- owl-apps:hover a img { opacity: 0.7; }
- owl-apps a:hover img { opacity: 1; }
.app-logo { text-align: center; }
/* ==========================================================================
21. Blog
========================================================================== */ /* 21.1 Wrapper
*/
- home-blog-section {
margin: 0; padding: 0; width: 100%; overflow: hidden; background-color: #ffffff;
background-repeat: repeat; background-attachment: fixed; background-position: center top; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
/* 21.2 Home Section Wrapper
*/
- home-blog-section-wrapper {
z-index: 1; width: 100%; position: relative; padding: 120px 0 70px; background-color: rgba(0, 0, 0, 0.6);
}
- home-blog-section-wrapper:after {
top: 0; left: 0; z-index: -1; content: ; width: 100%; height: 100%; opacity: 0.4; position: absolute; background-color: #1e2329;
}
/* 21.3 Slogan
*/
- home-blog-section-wrapper .slogan {
width: 100%; overflow: hidden; text-align: center; margin-bottom: 0px;
}
- home-blog-section-wrapper .slogan h1 {
color: #ffffff; font-size: 48px; font-weight: 100; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* 21.4 Description
*/
- home-blog-section-wrapper .desc {
width: 75%; margin: 0 auto 30px; text-align: center;
}
- home-blog-section-wrapper .desc p { color: #ffffff; }
- home-blog-section-wrapper .desc p:last-child { margin-bottom: 0; }
/* 21.5 Buttons
*/
- home-blog-section-wrapper .buttons {
width: 100%; text-align: center; margin-bottom: 20px;
}
- home-blog-section-wrapper .buttons a {
color: #ffffff; font-size: 18px; font-weight: 100; line-height: 35px; margin: 0 30px 30px 0; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
- home-blog-section-wrapper .buttons a:last-child { margin-right: 0; }
- home-blog-section-wrapper .buttons a i {
float: left; font-size: 35px; line-height: 35px; margin-right: 10px;
}
- home-blog-section-wrapper .blog-button {
left: 0; bottom: 0; width: 100%; text-align: center; position: absolute;
}
- home-blog-section-wrapper .blog-button a {
margin: 0; color: #ffffff; font-size: 18px; font-weight: 100; line-height: 35px; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
- home-blog-section-wrapper .blog-button .btn-nesto-home {
-webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; -o-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
}
/* ==========================================================================
22. Posts RightSidebar
========================================================================== */ /* 22.1 Wrapper
*/
- posts-section {
margin: 0; width: 100%; padding: 70px 0 40px; background-color: #ffffff;
}
/* 22.2 Post
*/
/* 22.2.1 Wrapper
*/
.post {
width: 100%; overflow: hidden; margin-bottom: 30px;
}
/* 22.2.2 Info
*/
.post .info {
float: left; overflow: hidden; margin-right: 30px; display: inline-block;
}
/* 22.2.3 Date
*/
.post .post-date {
width: 70px; height: 70px; display: block; margin-bottom: 15px; background-color: #f5f7f9;
-webkit-border-radius: 6px;
-moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
} .post .post-date span:first-child {
display: block; color: #76889a; font-size: 32px; line-height: 45px; text-align: center; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-webkit-border-bottom: 1px solid rgba(178, 196, 214, 0.3); -moz-border-bottom: 1px solid rgba(178, 196, 214, 0.3); -o-border-bottom: 1px solid rgba(178, 196, 214, 0.3); border-bottom: 1px solid rgba(178, 196, 214, 0.3);
} .post .post-date span:last-child {
display: block; color: #76889a; text-align: center; text-transform: uppercase; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* 22.2.4 Post Type
*/
/* 22.2.4.1 Image
*/
.post .post-type {
width: 70px; height: 70px; display: block; line-height: 70px; position: relative; text-align: center; background-color: #f5f7f9;
-webkit-border-radius: 6px;
-moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
} .post .post-type.image:after {
top: 0; left: 0; width: 100%; height: 70px; color: #76889a; font-size: 22px; content: '\f030'; position: relative; font-family: 'FontAwesome';
}
/* 22.2.4.2 Video
*/
.post .post-type.video:after {
top: 0; left: 0; width: 100%; height: 70px; color: #76889a; font-size: 22px; content: '\f03d'; position: relative; font-family: 'FontAwesome';
} .videos iframe {
-webkit-border: none; -moz-border: none; -o-border: none; border: none;
}
/* 22.2.4.3 Text
*/
.post .post-type.text:after {
top: 0; left: 0; width: 100%; height: 70px; color: #76889a; font-size: 24px; content: '\f044'; position: relative; font-family: 'FontAwesome';
}
/* 22.2.4.4 Audio
*/
.post-header.audio { margin-bottom: -10px; } .post .post-type.audio:after {
top: 0; left: 0; width: 100%; height: 70px; color: #76889a; font-size: 24px; content: '\f025'; position: relative; font-family: 'FontAwesome';
} .audio iframe {
width: 100%;
-webkit-border: none; -moz-border: none; -o-border: none; border: none;
}
/* 22.2.5 Data
*/
/* 22.2.5.1 Wrapper
*/
.post .post-data {
float: left; overflow: hidden; display: inline-block; background-color: #f5f7f9; width: calc(100% - 100px);
}
/* 22.2.5.2 Header
*/
.post .post-header {
width: 100%; overflow: hidden;
-webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; -o-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
} .post .post-header img { width: 100%; }
/* 22.2.5.3 Container
*/
.post .post-container {
width: 100%; padding: 30px;
}
/* 22.2.5.4 Title
*/
.post .post-title h2 {
width: 100%; font-weight: 100; margin-bottom: 10px; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
} .post .post-title a { color: #2d373c; } .post .post-title a:hover { color: #ff3131; }
/* 22.2.5.5 Info
*/
.post .post-info {
width: 100%; overflow: hidden;
} .post .post-author, .post .post-comment, .post .post-views {
float: left; overflow: hidden; position: relative; padding-left: 20px; display: inline-block; margin: 0 15px 15px 0;
} .post .post-views { margin-right: 0; } .post .post-author { padding-left: 17px !important; }
.post .post-author a, .post .post-comment a, .post .post-views a {
font-size: 12px;
} .post .post-author:hover a, .post .post-comment:hover a, .post .post-views:hover a, .post .post-author:hover:after, .post .post-comment:hover:after, .post .post-views:hover:after, .post .post-comment:hover span:first-child:after, .post .post-views:hover span:first-child:after {
color: #ff3131;
}
.post .post-author:after {
top: 2px; left: 0; color: #76889a; font-size: 12px; content: '\f007'; position: absolute; font-family: 'FontAwesome';
}
.post .post-comment:after {
left: 0; top: 2px; color: #76889a; font-size: 12px; content: '\f075'; position: absolute; font-family: 'FontAwesome';
} .post .post-comment span { position: relative; } .post .post-comment span:first-child {
margin-right: 8px; padding-right: 8px;
} .post .post-comment span:first-child:after {
top: -1px; right: -1px; content: '|'; color: #76889a; font-size: 16px; position: absolute; font-family: 'FontAwesome';
}
.post .post-views:after {
left: 0; top: 1px; color: #76889a; font-size: 12px; content: '\f06e'; position: absolute; font-family: 'FontAwesome';
} .post .post-views span { position: relative; } .post .post-views span:first-child {
margin-right: 8px; padding-right: 8px;
} .post .post-views span:first-child:after {
top: -1px; right: -1px; content: '|'; color: #76889a; font-size: 16px; position: absolute; font-family: 'FontAwesome';
}
.post .post-content {
width: 100%; overflow: hidden; text-align: justify;
} .post .post-content p:last-child { margin-bottom: 0; }
.post .post-more { margin-top: 20px; } .post .post-more a { font-size: 14px; }
/* ==========================================================================
23. Sidbar
========================================================================== */ /* 23.1 Wrapper
*/
- sidebar {
width: 100%; margin-bottom: 30px;
}
/* 23.2 Widget
*/
/* 23.2.1 Wrapper
*/
.widget {
width: 100%; overflow: hidden; margin-bottom: 30px;
}
/* 23.2.2 Widget Title
*/
.widget-title {
width: 100%; position: relative; margin-bottom: 25px;
} .widget-title:after {
top: 0; right: 0; color: #76889a; font-size: 11px; position: absolute; font-family: 'FontAwesome'; content: '\f0c9\f0c9\f0c9\f0c9\f0c9\f0c9\f0c9\f0c9';
} .widget .widget-title h4 {
font-weight: 400; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* 23.2.3 Widget Content
*/
.widget-content { position: relative; }
/* 23.2.4 Search Widget
*/
.widget.search .form-control { width: 100%;
height: 60px; outline: none; margin: 0 auto; font-size: 17px; position: relative;
background-color: #ffffff;
padding: 10px 45px 10px 15px;
-webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none;
-webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
-webkit-border: 1px solid #B2C4D6; -moz-border: 1px solid #B2C4D6; -o-border: 1px solid #B2C4D6; border: 1px solid #B2C4D6;
} .widget.search .form-control:hover, .widget.search .form-control:focus {
-webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none;
-webkit-border: 1px solid #B2C4D6; -moz-border: 1px solid #B2C4D6; -o-border: 1px solid #B2C4D6; border: 1px solid #B2C4D6;
} .searchform { position: relative; } .widget.search .searchform:after {
top: 17px; right: 15px; color: #76889a; font-size: 20px; content: '\f002'; position: absolute; font-family: 'FontAwesome';
}
/* 23.2.5 Category Widget
*/
.widget.category .widget-content {
width: 100%; background-color: #f5f7f9;
-webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
} .widget.category ul {
margin: 0; padding: 0; list-style: none;
} .widget.category ul li {
widows: 100%; display: block;
-webkit-border-bottom: 1px solid rgba(178, 196, 214, 0.3); -moz-border-bottom: 1px solid rgba(178, 196, 214, 0.3); -o-border-bottom: 1px solid rgba(178, 196, 214, 0.3); border-bottom: 1px solid rgba(178, 196, 214, 0.3);
} .widget.category ul li:last-child {
-webkit-border-bottom: none; -moz-border-bottom: none; -o-border-bottom: none; border-bottom: none;
} .widget.category ul li a {
height: 60px; display: block; padding: 0 15px; font-size: 14px; font-weight: 400; line-height: 60px; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
} .widget.category .widget-content ul li a:hover { color: #ff3131; } .widget.category .widget-content ul li a span:first-child {
float: left; text-transform: uppercase;
} .widget.category .widget-content ul li a span:last-child { float: right; }
/* 23.2.6 Popular Widget
*/
.widget.popular {
margin-bottom: 0; text-align: center;
} .widget.popular .widget-title { text-align: left; } .widget.testimonials .client-item .client-content {
text-align: left;
-webkit-border: none; -moz-border: none; -o-border: none; border: none;
} .widget.testimonials .client-item .client-content:after { display: none; }
/* 23.2.7 Flickr Widget
*/
/* 23.2.7.1 Wrapper
*/
.widget.flickr { margin-bottom: 20px; }
/* 23.2.7.2 Flickr Feed
*/
/* 23.2.7.2.1 Wrapper
*/
.widget.flickr .flickr-feed {
margin: 0; padding: 0; width: 100%; overflow: hidden; list-style: none; text-align: center;
}
/* 23.2.7.2.2 Items
*/
.widget.flickr li {
padding: 0; text-align: center; margin: 0 0 10px 0; display: inline-block; margin: 0 10px 10px 0;
-webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;
} .widget.flickr li:nth-child(3n) { margin-right: 0; }
/* 23.2.7.2.3 Image
*/
.widget.flickr li img {
width: 80px; height: 80px;
-webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
}
/* 23.2.7.2.4 Anchor
*/
.widget.flickr li:hover { opacity: 0.7; }
/* 23.2.8 Tags Widget
*/
.widget.tags { margin-bottom: 20px; } .widget.tags ul {
margin: 0; padding: 0; list-style: none;
} .widget.tags ul li {
float: left; display: inline-block; margin: 0 10px 10px 0;
}
/* ==========================================================================
24. Posts LeftSidebar
========================================================================== */
- posts-section.left-sidebar .col-md-9,
- posts-section.left-sidebar .col-md-3 {
float: right;
}
- posts-section.left-sidebar .post .info {
float: right; margin-right: 0; margin-left: 30px;
}
- posts-section.left-sidebar .pagination { margin: 0 0 30px 0; }
/* ==========================================================================
25. Single Post
========================================================================== */ /* 25.1 Post Comments
*/
/* 25.1.1 Wrapper
*/
.post-comments {
width: 100%; overflow: hidden; margin: 0 0 30px; position: relative; padding-left: 100px;
}
/* 25.1.2 Title
*/
.post-comments .comments-title {
width: 100%; overflow: hidden; position: relative; margin-bottom: 30px;
} .post-comments .comments-title h4 {
font-weight: 400; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
} .post-comments .comments-title:after {
top: 0; right: 0; color: #76889a; font-size: 11px; position: absolute; font-family: 'FontAwesome'; content: '\f0c9\f0c9\f0c9\f0c9\f0c9\f0c9\f0c9\f0c9';
}
/* 25.1.3 Comments
*/
.post-comments .comments {
width: 100%; margin: 0 0 0; overflow: hidden; position: relative;
} .post-comments .comments ul {
margin: 0; padding: 0; list-style: none;
} .post-comments .comments ul ul { padding-left: 100px; } .post-comments .comments ul li {
width: 100%; display: block;
} .post-comments .comment {
width: 100%; overflow: hidden; margin-bottom: 30px;
}
/* 25.1.4 Avatar
*/
.post-comments .comment-avatar {
float: left; overflow: hidden; margin-right: 30px; display: inline-block;
-webkit-border-radius: 6px;
-moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
} .post-comments .comment-avatar img {
width: 70px; height: 70px; display: block;
}
/* 25.1.5 Container
*/
.post-comments .comment-container {
float: left; padding: 15px; overflow: hidden; display: inline-block; background-color: #f5f7f9; width: calc(100% - 100px);
-webkit-border-radius: 6px;
-moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
}
/* 25.1.6 Header
*/
.post-comments .comment-header {
overflow: hidden; margin-bottom: 15px;
}
/* 25.1.7 Comment Title
*/
.post-comments .comment-title {
float: left; overflow: hidden; position: relative; padding-bottom: 15px;
} .post-comments .comment-title h4 {
font-weight: 300; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
} .post-comments .comment-title:after {
left: 0; bottom: 0; content: ; height: 1px; width: 100px; font-size: 9px; position: absolute; background-color: #76889a; font-family: 'FontAwesome';
}
/* 25.1.8 Date
*/
.post-comments .comment-date {
float: right; overflow: hidden;
} .post-comments .comment-date h6 {
color: #76889a; font-weight: 700; text-transform: uppercase;
} .post-comments .comment-date span {
float: left; line-height: 12px; display: inline-block;
} .post-comments .comment-flag i {
color: #ff3131; margin-left: 10px; line-height: 12px;
}
/* 25.1.9 Content
*/
.post-comments .comment-content {
width: 100%; overflow: hidden;
} .post-comments .comment-content p { color: #76889a; }
/* 25.1.10 Replay
*/
.post-comments .comment-replay {
width: 100%; display: block; font-weight: 400; padding: 6px 12px; position: relative; background-color: #ffffff; text-transform: uppercase;
-webkit-border-radius: 6px;
-moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
} .post-comments .comment-replay:after {
top: 5px; right: 12px; content: '\f075'; position: absolute; font-family: 'FontAwesome';
} .post-comments .comment-replay:hover { color: #ff3131; }
/* 25.1.11 Comment Form
*/
/* 25.1.11.1 Wrapper
*/
.comments-form {
width: 100%; overflow: hidden;
}
/* 25.1.11.2 Textarea
*/
.comments-form textarea { width: 100%;
resize: none; margin: 0 auto 30px; height: 142px !important;
}
/* 25.1.11.3 form-control
*/
.comments-form .form-control { width: 100%;
height: 42px; outline: none;
padding: 10px 15px;
margin: 0 auto 30px;
background-color: #ffffff;
-webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none;
-webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
-webkit-border: 1px solid #B2C4D6; -moz-border: 1px solid #B2C4D6; -o-border: 1px solid #B2C4D6; border: 1px solid #B2C4D6;
} .contactForm .form-control:hover, .contactForm .form-control:focus {
-webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none;
-webkit-border: 1px solid #B2C4D6; -moz-border: 1px solid #B2C4D6; -o-border: 1px solid #B2C4D6; border: 1px solid #B2C4D6;
}
/* 25.1.11.4 Button
*/
.comments-form button.submit {
width: 100%; outline: none; color: #76889a; font-weight: 300; padding: 10px 16px; margin-bottom: 30px; background-color: #ffffff; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-webkit-border-color: #76889a; -moz-border-color: #76889a; -o-border-color: #76889a; border-color: #76889a;
} .comments-form .submit.active, .comments-form .submit:active, .comments-form .submit.focus, .comments-form .submit:focus, .comments-form .submit:hover { color: #ffffff;
outline-width: 0; position: relative; background-color: #76889a;
}
/* 25.2 Related Posts
*/
/* 25.2.1 Wrapper
*/
- related-section {
margin: 0; width: 100%; padding: 0 0 70px; background-color: #ffffff;
}
/* 25.2.2 Title
*/
.blog-section-title {
width: 100%; overflow: hidden; position: relative; margin-bottom: 30px;
} .blog-section-title h4 {
font-weight: 400; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
} .blog-section-title:after {
top: 0; right: 0; color: #76889a; font-size: 11px; position: absolute; font-family: 'FontAwesome'; content: '\f0c9\f0c9\f0c9\f0c9\f0c9\f0c9\f0c9\f0c9';
}
/* ==========================================================================
26. Bootstrap
========================================================================== */ .pagination { margin: 0 0 30px 100px; } .pagination > li > a, .pagination > li > span {
color: #76889a;
} .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
color: #76889a; background-color: #f5f7f9;
} .btn:focus, .btn:active:focus, .btn.active:focus {
outline: none;
} .btn-nesto-home { background-color: #ff3131; } .btn-nesto-home:focus, .btn-nesto-home:active, .btn-nesto-home:hover {
background-color: #0f191e;
}
.btn.btn-nesto {
font-weight: 300; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-webkit-border-color: #b2c4d6; -moz-border-color: #b2c4d6; -o-border-color: #b2c4d6; border-color: #b2c4d6;
} .btn-nesto {
color: #76889a; background-color: transparent;
} .btn-nesto:focus, .btn-nesto:active, .btn-nesto:hover {
color: #ffffff; background-color: #76889a;
-webkit-border-color: #76889a; -moz-border-color: #76889a; -o-border-color: #76889a; border-color: #76889a;
}
/* ==========================================================================
27. Responsive
========================================================================== */ @media only screen and (min-width: 992px) and (max-width: 1199px) {
#home-section-wrapper .slogan h1 { font-size: 40px; } #home-blog-section-wrapper .slogan h1 { font-size: 40px; }
.ui-slider-tabs-list li a, .ui-slider-tabs-list li { width: 235px; }
.price-table .table-desc p { font-size: 16px; }
.widget.flickr li img { width: 64px; height: 64px; }
}
/*-------------------------------------------------------------------------*/
@media only screen and (max-width: 991px) and (min-width: 768px) {
.left .feature-box-style-1:first-child { margin-top: 00px; } .left .feature-box-style-1:last-child { margin-bottom: 0px; } .right .feature-box-style-1:first-child { margin-top: 70px; } .right .feature-box-style-1:last-child { margin-bottom: 120px; }
#home-section-wrapper .feature-home-image { max-height: 757px; }
.ui-slider-tabs-list li a, .ui-slider-tabs-list li { width: 240px; }
.no-pad-left, .no-pad-right { padding: 0; }
#team-section .ui-slider-tabs-list-container { float: none; margin: 0 auto !important; }
#team-section .member-image { margin-bottom: 50px; }
.faqcontent .mini-feature-list { width: 100%; } .faqcontent .mini-feature-list:first-child, .faqcontent .mini-feature-list:last-child { padding: 0; }
.mini-post, .portfolio-item, .price-table { max-width: 100%; }
.widget.popular .mini-post { float: none; max-width: 263px; margin-right: 30px; display: inline-block; } .widget.popular .mini-post:last-child { margin-right: 0; }
.widget.flickr li:nth-child(3n) { margin-right: 10px; } .widget.flickr li:last-child { margin-right: 0; }
#posts-section.left-sidebar .col-md-3 { width: 100%; }
}
/*-------------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
.container { width: 570px; }
.left .feature-box-style-1:first-child { margin-top: 100px; } .left .feature-box-style-1:last-child { margin-bottom: 0px; } .right .feature-box-style-1:first-child { margin-top: 70px; } .right .feature-box-style-1:last-child { margin-bottom: 0px; }
#home-section-wrapper .feature-home-image { max-height: 757px; }
.ui-slider-tabs-list li a, .ui-slider-tabs-list li { width: 270px; }
#team-section .ui-slider-tabs-list-container, #team-section .ui-slider-tabs-list-wrapper { width: 540px; } #team-section .ui-slider-tabs-list li { margin-left: 15px; } #team-section .member-image { margin-bottom: 50px; }
.section-title h1 { font-size: 50px; }
.faq-tabs ul.faq-tabs-btns { width: 100%; } .faq-tabs .col-md-6 { overflow: hidden; }
#subscribe .form-control { width: 400px; }
.no-pad-left, .no-pad-right { padding: 0; }
.faqcontent .mini-feature-list:first-child, .faqcontent .mini-feature-list:last-child { padding: 0; }
.widget.flickr li:nth-child(3n) { margin-right: 10px; } .widget.flickr li:last-child { margin-right: 0; } .widget.flickr li img { height: 81px; width: 81px; }
#posts-section.left-sidebar .col-md-3 { width: 100%; }
}
/*-------------------------------------------------------------------------*/ @media only screen and (max-width: 599px) {
.container { width: 450px; }
#home-section-wrapper .slogan h1 { font-size: 38px; } #home-blog-section-wrapper .slogan h1 { font-size: 38px; }
#home-section-wrapper .buttons a { margin-right: 0; } #home-blog-section-wrapper .buttons a { margin-right: 0; }
.section-title h1 { font-size: 40px; }
.section-title_ h1 { font-size: 40px; }
.ui-slider-tabs-list li a, .ui-slider-tabs-list li { width: 420px; }
#team-section .ui-slider-tabs-list-container, #team-section .ui-slider-tabs-list-wrapper { width: 420px; } #team-section .ui-slider-tabs-list li { margin-left: 30px; }
.faqcontent .mini-feature-list { width: 100%; }
#subscribe .form-control { width: 280px; }
#footer-section { height: 84px; } .footer-social-icons ul li { width: 84px; }
.post .info { display: none; } .post .post-data { width: 100%; }
.pagination { margin: 0 0 30px; }
.widget.flickr li:nth-child(4n) { margin-right: 0; }
.widget.flickr li img { height: 97px; width: 97px; }
.post-comments .comments ul ul, .post-comments { padding-left: 0; } .post-comments .comment-avatar { display: none; } .post-comments .comment-container { width: 100%; }
}
/*-------------------------------------------------------------------------*/
@media only screen and (max-width: 479px) {
.container { width: 320px; }
#home-section-wrapper .slogan h1 { font-size: 28px; } #home-blog-section-wrapper .slogan h1 { font-size: 28px; }
.section-title h1 { font-size: 28px; }
.ui-slider-tabs-list li a, .ui-slider-tabs-list li { width: 290px; }
#team-section .ui-slider-tabs-list-container, #team-section .ui-slider-tabs-list-wrapper { display: none; } #team-section .ui-slider-tabs-indicator-container { top: 480px; }
#subscribe .form-control { width: 180px; } #subscribe button.submit { width: 140px; }
#footer-section { height: 58px; } .footer-social-icons ul li { width: 58px; }
.footer-social-icons ul li a { font-size: 20px; line-height: 58px; }
.widget.flickr li img { width: 65px; height: 65px; }
}