Template:Peking/css/style
@import url("https://2016.igem.org/Template:Peking/css/navigation_style_1?action=raw&ctype=text/css"); @import url("https://2016.igem.org/Template:Peking/css/color_gray?action=raw&ctype=text/css");
html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,a,img,small,sub,b,dl,dd,dt,ul,li,label,article,details,footer,header,menu,nav,input,textarea,select{ background:transparent; border:0; outline:0; padding:0; margin:0; }
html,body{
font-family: 'raleway-regular', sans-serif;
font-size:12px;
height:100%;
width:100%;
color:#999999;
background:#f5f5f5;
}
body{ overflow-x:hidden }
h1, h2, h3, h4, h5, h6 { font-weight: 400; font-family: 'Montserrat', sans-serif; text-transform:uppercase; color:#222222; }
h1 { font-size:36px; letter-spacing:3px; color:#222222; text-transform:uppercase; margin-bottom: 15px; }
p { font-size:14px; }
b { color:#222; }
.bcontainer { width:auto; margin:0 auto; padding:100px 20px; }
.small-width { width:980px; }
.no-padding { padding:0!important; }
a:hover, a:active, a:focus { outline: 0; }
a {
text-decoration: none;
-webkit-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
-moz-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
-ms-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
-o-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
}
li { list-style:none; }
a { outline: 0; }
a:hover { text-decoration:none; }
.left { float: left; }
.right { float: right; }
.one_half {
width: 48%;
}
.one_third { width: 30.6%; }
.one_fourth { width: 22%; }
.one_fifth { width: 16.8%; }
.one_sixth { width: 13.33%; }
.two_fifth { width: 37.6%; }
.two_fourth { width: 48%; }
.two_third { width: 65.33%; }
.three_fifth { width: 58.4%; }
.three_fourth { width: 74%; }
.four_fifth { width: 79.2%; }
.five_sixth { width: 82.67%; }
.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .two_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth { float: left; margin-bottom: 20px; margin-right: 4%; position: relative; }
.last { margin-right:0px!important; }
.section-title { text-align:center; width:700px; margin:0 auto; margin-bottom:60px; }
.border { background: none repeat scroll 0 0 #999999; display: block; height: 2px; margin: 0 auto; width: 100px; margin-bottom:40px; }
.element_from_top { top: -50px; padding-right: 0px; opacity: 0; position: relative; }
.element_from_bottom { bottom: -50px; padding-left: 0px; opacity: 0; position: relative; }
.element_from_left { left: -80px; padding-right: 0px; opacity: 0; position: relative; }
.element_from_right { right: -80px; padding-left: 0px; opacity: 0; position: relative; }
.element_fade_in { opacity: 0; position: relative; padding-left: 0px; right: 0px;
}
.mask { background-color:#FFF; width:100%; height:100%; position:fixed; z-index:100000; }
#loader { background:url(images/newave-loading.gif) center center no-repeat; height: 50px; width: 50px; left: 50%; top: 50%; position: absolute; margin: -25px 0 0 -25px; }
/* Shortcodes */
.title-divider { border-bottom:#e9e9e9 1px solid; width:100%; text-align:center; text-transform:uppercase; color:#222222; padding-bottom:5px; padding-top:80px; margin-bottom:50px; float:left; }
/* Pricing Tables */
.pricing-tables {
float:left;
width:inherit;
display:block;
text-align:center;
}
.price-table { border: 1px solid rgba(0, 0, 0, 0); padding: 25px 0px 25px 0px; text-align: center; transition: all 0.5s ease 0s; width:22%; display:inline-block; border: 1px solid #E8E8E8; background-color:#FFF; z-index:1; margin-left:-2px; margin-right:-2px; position:relative; margin-top:20px; margin-bottom:20px; }
.price-table:hover { border: 1px solid #E8E8E8; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); z-index:100!important; padding: 45px 0px 45px 0px; margin-top:0px; margin-bottom:0px;
}
.price-table.featured { border: 1px solid #E8E8E8; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); z-index:100!important; padding: 45px 0px 45px 0px; margin-top:0px; margin-bottom:0px;
}
.price-table i { background-color: #FCFCFC; border: 2px solid #DDDDDD; border-radius: 100px; box-shadow: 0 0 0 5px #F4F4F4; display: inline-block; font-size: 20px; width:20px; height:20px; margin-bottom: 35px; overflow: hidden; padding: 25px; transition: all 0.2s ease 0s; }
.price-table:hover i { box-shadow: 0 0 0 5px #FFFFFF inset; color: #FFFFFF; }
.price-table ul { margin-bottom: 0; }
.price-table li { border-bottom: 1px dotted #E6E6E6; font-size: 12px; padding: 8px 15px; margin:0px 10px; }
.price-table li.pricetable-price { background-color: #F7F7F7; border-top: 1px dotted #E6E6E6; margin:0px; }
.price-table li a { margin-top:20px; }
.price-table li:first-child { padding-top: 0; border-bottom: medium none; }
.price-table li:last-child { border-bottom: medium none; }
.price-table ul h3 { font-size: 20px; line-height: 16px; margin-bottom: 7px; }
.price-table li.pricetable-price h3{ font-size: 14px; }
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
/* Recent Posts */
.recent-post { width:100%; height:50px; float:left; margin-bottom:20px; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s;
-webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s;
background-color:#FFF; border-radius:3px; }
.recent-post:hover { background-color:#FFF; box-shadow: 0px 1px 3px rgba(0,0,0,0.1); }
.recent-post .recent-post-date { line-height:50px; float:left; margin-right:20px; margin-left:20px; font-size:12px; }
.recent-post .blog-type { float:left; border-radius:0px; margin-right:20px; background-color:#999; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s;
-webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s;
}
.recent-post:hover .blog-type { background-color:#222; }
.recent-post h5 { line-height:50px; float:left; }
.recent-post h5 a { color:#999; }
.recent-post h5 a:hover { color:#222; }
.recent-post .blog-meta { float:right; line-height:50px; margin-right:20px; }
/* Accordion */
.accordion { float:left; width:inherit; }
.accordion dt { cursor: pointer; border-radius: 3px 3px 3px 3px; margin-bottom: 10px; padding-top: 10px; border-top:#e9e9e9 1px solid; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s;
-webkit-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s;
}
.accordion dt:first-child { border-top:none; padding-top: 0px; }
.accordion .accordion-active { color:#222222; }
.accordion dt span { font-size: 14px; line-height:24px; }
.accordion dt span.accordion-status { height:20px; width:20px; padding:2px; background:url(images/plus.png) #999999 2px 2px no-repeat; background-size:20px 20px; float:left; margin-right:10px; border-radius: 2px; }
.accordion dt.accordion-active span.accordion-status { background:url(images/minus.png) 2px 2px no-repeat; background-color:#222222; background-size:20px 20px; }
.accordion-content { padding-bottom: 15px; padding-top: 5px; font-size: 13px; }
/* Toggle */
.toggle-wrap { float:left; width:100%; }
.toggle-title { background: #e5e5e5; cursor: pointer; padding: 10px; border-radius: 3px; margin-bottom: 5px; display: block; font-size:13px; }
.toggle-title a { color: #666; text-decoration: none; }
.toggle-title a:hover { color:#222222; }
.toggle_container { padding-bottom: 10px; padding-top: 5px; padding-left: 10px; padding-right: 10px; font-size:13px; }
.toggle-active { color:#fff; background: #222222; }
.toggle-active a { color:#FFF; }
.toggle-active a:hover { color:#FFF; }
/* Tabs */
.tab-shortcode { float:left; width:100%; }
ul.tabs { overflow: hidden; margin: 0px; }
ul.tabs li { float: left; margin: 0px; list-style: none; }
ul.tabs li a { display: block; background-color: #e5e5e5; padding: 6px 20px; margin-right: 5px; border-radius: 2px 2px 0px 0px; color: #666; text-decoration: none; font-size:13px; }
ul.tabs .tab-active a { color: #fff; }
.tab_container { clear: both; padding: 20px 25px; margin-top:0px; background:#FFF; font-size:13px; }
/* Dropcaps */
.dropcap-normal { font-family: 'Montserrat', sans-serif; float: left; font-size: 70px; font-weight: bold; line-height: 60px; margin: 0 8px 0 0; }
.dropcap.dark { color: #FFFFFF; }
.dropcap.round { border-radius: 3px; }
.dropcap.square { border-radius: 50px; }
.dropcap { font-family: 'Montserrat', sans-serif; display: block; float: left; font-size: 36px; margin: 6px 8px 0 0; text-align: center; text-transform: uppercase; line-height:50px; width:50px; height:50px; }
/* Counters */
.counters { margin-top: 40px; }
.counters ul { text-align:center; }
.counters i { display: block; font-size: 50px; margin-bottom: 20px; position: relative; }
.counters li { background:#FFF; color: #222222; font-family: 'Montserrat', sans-serif; font-size: 18px; padding: 25px 0; text-align: center; text-transform: uppercase; border-radius:3px }
.counters li span { font-family: 'Montserrat', sans-serif; }
.counters li.last { border-right: 0 none; }
/* List Styles */
.icons-ul li {
color:#999999;
margin-bottom:10px;
font-size:14px;
}
.icons-ul li i{ margin-right:7px; }
.fa-ul { font-size:14px; }
.fa-ul li { margin-bottom:10px; }
/* Alert Boxes */
.alertboxes { float:left; width:100%; }
.shortcode_alertbox { border-radius: 3px; color: #FFFFFF; display: block; font-size: 14px; line-height: 20px; margin-bottom: 20px; padding: 15px 40px 15px 14px; position: relative; }
.shortcode_alertbox .box_close { background: url("images/close_box.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); background-position:10px 10px; background-size:20px 20px; display: block; height: 40px; position: absolute; right: 5px; top: 5px; width: 40px; cursor:pointer; }
.shortcode_alertbox b { color:inherit; }
.shortcode_alertbox.box_red { background: none repeat scroll 0 0 #F9E5E6; border: 1px solid #F7C7C9; color:#B3696C; } .shortcode_alertbox.box_blue { background: none repeat scroll 0 0 #D8ECF5; border: 1px solid #9AC9DF; color: #528DA9; } .shortcode_alertbox.box_yellow { background: none repeat scroll 0 0 #FCF7D9;
border: 1px solid #F5DC7D; color: #C4A21B;
} .shortcode_alertbox.box_green { background: none repeat scroll 0 0 #E3EBC6; border: 1px solid #C2D288; color: #8FA442; }
/* Buttons */
a.newave-button { border-radius:3px; font-family: 'Montserrat', sans-serif; letter-spacing:0; text-transform:uppercase; display:inline-block; }
.small { font-size:12px; line-height:14px; padding:5px 9px 7px 9px; line-height:12px; }
.medium { font-size:14px; line-height:14px; padding:10px 15px; line-height:14px; }
.large { font-size:16px; line-height:14px; padding:15px 25px; line-height:16px }
.grey { color:#FFF; }
.grey:hover { color:#FFF; }
.color { color:#fff; }
.color:hover { color:#fff; }
.outline { background-color:none; border:2px solid #222222; color:#222222; line-height:10px!important; }
.outline:hover { background-color:#222222; color:#FFF; }
.outline.white { background-color:none; border:2px solid #fff; color:#fff; }
.outline.white:hover { background-color:#fff; color:#222; }
.rounded { border-radius:50px!important; }
/* Font Awesome */
.the-icons li { font-size:14px; height: 40px; text-transform: capitalize; }
.the-icons li i { font-size: 18px; margin-right: 10px; vertical-align: -2px; width: 35px; }
/* Section pages styles */
section { position: relative; background-color:#f5f5f5; z-index: 1; }
#home { height: 100%; position: relative; width: 100%; }
#not-found { height: 100%; position: relative; width: 100%; }
#home.parallax-slider { height:auto; }
#we-are-good-at { background-color:#FFF; }
#services { background-color:#FFF; }
#we-love-technology { background-color:#FFF; }
#portfolio { background-color:#FFF; }
#contact { background-color:#fff; }
footer { background-color:#383232; }
#blog { background-color:#fff; }
/* Parallax Styles */
.parallax { text-align: center; background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed !important; }
.parallax-overlay { background-color:rgba(0,0,0,0.80); }
/* Home Pattern And Image Parallax */
.home-pattern {
background:url(images/home_pattern.png) repeat;
width:100%;
height:100%;
}
.pattern { background:url(images/pattern.png) repeat; width:100%; height:100%; }
#home-center { height: 100%; display: table; position: absolute; top: 0; left:0; right:0; width:90%; margin-left:5%; margin-right:5%; }
.div-align-center { display: table-cell; vertical-align: middle; text-align:center; }
.div-word-on-picture1{ display: table-cell; padding-top:550px; vertical-align:top; padding-right:10px; text-align:right; }
.div-word-on-picture2{ display: table-cell; padding-top:10px; vertical-align:bottom; padding-right:5px; text-align:right; }
.ultralarge {
color:#fff;
text-align:center;
font-family: 'Montserrat', sans-serif;
font-size:100px;
line-height:80px;
letter-spacing:0;
}
.four-zero-four { color:#fff; text-align:center; font-family: 'Montserrat', sans-serif; font-size:180px; line-height:180px; letter-spacing:0; }
.below-four-zero-four { margin-bottom:40px!important; }
.text-slide-vertical { color:#fff; font-family: 'Montserrat', sans-serif; font-size:70px; text-transform:uppercase; width:100px!important; position:relative!important;
}
.text-slide-vertical li { line-height:100px; }
.bullet { margin: 0 10px; opacity: 0.9; color:#fff; }
.div-align-center p{ margin-bottom:20px; }
p.after-slider { font-family:Georgia, "Times New Roman", Times, serif; font-size:30px; font-style:italic; text-align:center; padding-top:20px; margin-bottom:40px; }
/* Home Fullwidth Parallax Slider */
ul.fullwidth-slider {
position: relative;
display: block;
width: 100%;
margin: 0;
padding: 0;
background-color: #222222;
z-index: 0;
-webkit-backface-visibility: visible;
background-position: center center;
background-repeat: no-repeat;
}
ul.fullwidth-slider li.slide { position: relative; display: none; overflow: hidden; float: left; width: 100%; height: 100%; z-index: 0; background-attachment:absolute ; background-size: cover; background-repeat: no-repeat; background-position: center; -webkit-backface-visibility: visible; }
ul.fullwidth-slider li.slide .caption { position: relative; height: 100%; width:100%; }
ul.fullwidth-slider li.slide .caption .caption-inside { position: absolute; top: 0px; width:100%; }
ul.fullwidth-slider li.slide .caption .slide-caption { height: 100%; z-index: 0; display: table; position: relative; top: 0; width:80%; margin-left:10%; margin-right:10%; }
ul.fullwidth-slider li.slide .caption .slide-caption .vertical-align-middle{ display: table-cell; vertical-align: middle; text-align:center; }
.vertical-align-middle p { margin:20px 0; color:#fff; }
.vertical-align-middle.dark p, .vertical-align-middle.dark h1 { color:#222; }
ul.fullwidth-slider, ul.fullwidth-slider .caption-inside { height: 700px; }
.parallax-slider .bx-wrapper .bx-next { right:50px; }
.parallax-slider .bx-wrapper .bx-prev { left:50px; }
/* Home Full Screen Slider */
#fullscreen-slider { display:none;/* Only use this if you fade it in again after the images load */ }
#cycle-loader { height:32px; left:50%; margin:-8px 0 0 -8px; position:absolute; top:50%; width:32px; z-index:999; }
#slider_left { top:50%; height:60px; position:absolute; left:50px; width:32px; z-index:1000; margin-top:-30px; cursor:pointer; }
#slider_right { top:50%; height:60px; position:absolute; right:50px; width:32px; z-index:1000; margin-top:-30px; cursor:pointer; }
#slider_left:hover, #slider_right:hover { margin-top:-28px; } #slider_left:active, #slider_right:active { margin-top:-28px; }
.slide-content { height: 100%; display: table; position: absolute; top: 0; left:0; right:0; width:80%; margin-left:10%; margin-right:10%; }
.light { color:#fff!important; }
.dark { color:#222222; }
.slide-content h1 { color:inherit; font-size:100px; line-height:100px; margin:10px 0; letter-spacing:1px; }
.georgia { font-family: Georgia,"Times New Roman",Times,serif; font-size: 30px; line-height:30px; font-style: italic; padding:10px 0; }
.slide-content p { margin:10px 0; }
.slide-content a { margin:10px 0; }
/* Home Full Screen Video */
.video-section { background-image: url('images/video-placeholder.jpg'); }
#video-volume { bottom: 30px; color: #FFFFFF; cursor: pointer; font-size: 24px; margin-left: -10px; left:50%; position: absolute; width: 20px; z-index:10; }
/* We are Newave */
.screens { position:relative; }
.big-screen { width:620px; height:auto; margin:0 auto; z-index:100; }
.small-screen-left { width:350px; height:auto; position:absolute; left:0; top:120px; z-index:0; }
.small-screen-right { width:350px; height:auto; position:absolute; right:0; top:120px; z-index:0; }
/* We are good at */
.bar { text-align: left!important; margin: 0px!important; }
.bar li { list-style: none!important; }
.bar li:last-child span { margin-bottom: 0px; }
.bar li .bar-wrap { margin-bottom:50px; border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; -o-border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; background:#dddddd; }
.bar li span { height: 35px; width: 0px; display: block; border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; -o-border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; }
.bar li p { padding-bottom: 2px; }
.bar li span { overflow: visible!important; position: relative; }
.bar li span strong { position: absolute; top: 10px; left: 10px; color: rgba(255, 255, 255, 0.8); line-height: 12px!important; display: block; }
/* Our Team */
.our-team { text-align:center; }
.our-team li { display:inline-block; margin:0 50px; height:330px; overflow:hidden; border-radius:3px; position:relative; width:260px; }
.our-team li img { display:block; border-radius:3px; position:relative; z-index:0; float:left; }
.team-profile { height:200px; padding:40px 20px 20px 20px; margin-top:235px; z-index:11; position:absolute; border-radius:3px; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s;
-webkit-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s;
}
.our-team li:hover > .team-profile { margin-top:0px; background-color:#FFF; box-shadow: 0px 1px 3px rgba(0,0,0,0.1); }
.team-profile h5 { color:#222222; text-transform:uppercase; }
p.about-team { margin:20px 0 30px 0; font-size:13px; }
ul.socials-icons { text-align:center;
}
ul.socials-icons li { width:35px; height:35px; margin:5px; display:inline-block }
ul.socials-icons li a { opacity:0.5; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s;
-webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s;
}
ul.socials-icons li a:hover { opacity:1; }
/* Newsletter */
#newsletter .container {
padding-top:30px;
padding-bottom:30px;
}
.newsletter-left { width:60%; float:left; height:50px }
.newsletter-right { width:40%; float:left; text-align:right; height:40px; padding-top:10px; }
.newsletter-right a { cursor:pointer; }
#newsletter input[type="text"] { border: 0 none; color: #fff; font-family: 'Montserrat',sans-serif; font-size: 36px; line-height:50px; margin:0; height: 50px; padding:0px; text-transform: uppercase; width: 100%; }
/* Twitter Parallax*/
.twitter-feed .bx-wrapper { margin:30px 0 15px 0!important; }
.twitter-feed li, .twitter-feed li a { color:#fff!important; text-transform:none; font-size: 17.5px; font-family: 'Montserrat',sans-serif;
font-weight: 400;
}
.twitter-feed p { opacity:0.5; }
.twitter-feed-icon img { width:60px; height:auto; opacity:0.7; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s;
-webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s;
}
.twitter-feed-icon img:hover { opacity:1; }
.twitter-feed .bx-wrapper .bx-controls-direction a { width: 18px; height: 34px; }
.twitter-feed .bx-wrapper .bx-prev { left: 50%; margin-left:-30px; margin-top:90px; background: url(images/slider_left_white.png) no-repeat; background-size:18px 34px; opacity:0.5; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s;
-webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s;
z-index:0; }
.twitter-feed .bx-wrapper .bx-next {
right: 50%;
margin-right:-30px;
margin-top:90px;
background: url(images/slider_right_white.png) no-repeat;
background-size:18px 34px;
opacity:0.5;
transition:all 0.3s ease 0s;
-moz-transition:all 0.3s ease 0s;
-webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s;
z-index:0; }
.twitter-feed .bx-wrapper .bx-prev:hover, .twitter-feed .bx-wrapper .bx-next:hover { opacity:1; }
.twitter-feed .bx-wrapper .bx-next:hover { background-position:0 0; }
.twitter-feed { margin-bottom:70px; }
/* Services */
.service-item { float:left; margin:30px 0; }
.service-item h5 { text-transform:uppercase; color:#222222; margin:5px 0; }
.service-item.text-right { text-align:right; }
.service-item.text-right .fa-stack { cursor:pointer; margin-left:20px; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s;
-webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s;
}
.service-item.text-left .fa-stack { cursor:pointer; margin-right:20px; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s;
-webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s;
}
.service-item.text-right .fa-stack:hover, .service-item.text-left .fa-stack:hover { color:#222222; }
.service-item .service-icon { font-size:27px!important; }
/* Clients */
#bx-pager { text-align:center; }
#bx-pager a { border-radius:3px; margin:10px; background-color:#FFF; display:inline-block; }
#bx-pager a img { opacity:0.5; border-radius:3px; width:200px; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s;
-webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s;
}
#bx-pager a img:hover, #bx-pager a.active img { opacity:1; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s;
-webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s;
}
.clients-slider li { padding:0 50px; }
.clients-slider h3 { color:#222222; text-transform:uppercase; margin-top:20px; text-align:center; }
.clients-slider p { margin-top:20px; text-align:center; }
/* We love technology */
ul.technology { text-align:center; }
ul.technology li { display:inline-block; width:238px; margin:10px; padding:30px 20px; position:relative;
overflow:hidden;
transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s;
-webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s;
}
ul.technology li:hover:before { content:""; position:absolute; top:0; right:0; border-width:0 25px 25px 0; border-style:solid; display:block; width:0; }
ul.technology li:first-child, ul.technology li:last-child { margin-left:0px; }
ul.technology li:last-child { margin-right:0px; }
ul.technology li i { font-size:40px; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s;
-webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s;
}
ul.technology li h5 { text-transform:uppercase; color:#222222; margin-top:10px; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s;
-webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s;
}
ul.technology li p { font-size:13px; margin-top:10px; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s;
-webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s;
}
ul.technology li:hover i { color:#fff; }
ul.technology li:hover h5 { color:#fff; }
ul.technology li:hover p { color:#fff; opacity:0.5 }
/* Parallax Quote */
.quote h1 { color:#FFF; padding:30px 0 10px 0; line-height:40px; letter-spacing:0.5px; }
.quote p { color:#FFF; opacity:0.5; }
h1 span.quote-img { }
h1 span.quote-img img { width:21px; height:auto; padding:10px; margin-bottom:12px; opacity:0.5;
}
/* Portfolio */
.container.portfolio-title { padding-bottom:0px; }
#portfolio { padding-bottom: 0; }
/* Portfolio Filters */
#filters { margin-top: 10px; margin-bottom: 40px; text-align: center; display: block; float: none; z-index: 2; position: relative; }
#filters ul li { display: inline-block; margin:0 5px; }
#filters ul li a { display: block; }
#filters ul li a h5 { padding: 8px 15px; text-transform:uppercase; background-color:#eeeeee; border-radius:3px; font-size:10px; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s; }
#filters ul li a:hover h5, #filters ul li a.active h5 { color: #fff; }
/* Portfolio Items */
#portfolio-wrap { position: relative; padding: 0; width: 100%; margin: 0 auto; display: block; }
#portfolio-wrap .one-four { margin: 0!important; line-height:0; width: 25%; padding: 0; position:relative; }
.portfolio-item { padding: 0; position: relative; overflow: hidden; } .portfolio-item .portfolio-image { overflow: hidden; display: block; position: relative; } .portfolio-item .portfolio-image img { width: 100%; height: auto; }
.portfolio-item:hover .project-overlay { opacity:1; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s;
-webkit-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s;
-o-transition:all 0.4s ease 0s; }
.project-overlay { width:100%; height:100%; position:absolute; top:0; left:0; opacity:0; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s;
-webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s;
cursor:pointer; }
.open-project-link { width:100%; height:100%; position:absolute; z-index:100; }
.project-info { position:absolute; height:100px; width:100%; top:50%; margin-top:-50px; text-align:center; }
.project-name { color:#fff; text-transform:uppercase; margin-top:50px; opacity:0; transition:all 0.2s ease 0s; -moz-transition:all 0.2s ease 0s;
-webkit-transition:all 0.2s ease 0s; -ms-transition:all 0.2s ease 0s;
-o-transition:all 0.2s ease 0s; }
.portfolio-item:hover .project-name { opacity:1; -webkit-transition: opacity .4s .5s; -moz-transition: opacity .4s .5s; -ms-transition: opacity .4s .5s; -o-transition: opacity .4s .5s; transition: opacity .3s .5s; }
.project-categories { font-size:13px; color:#fff; opacity:0; margin-top:13px; transition:all 0.2s ease 0s; -moz-transition:all 0.2s ease 0s;
-webkit-transition:all 0.2s ease 0s; -ms-transition:all 0.2s ease 0s;
-o-transition:all 0.2s ease 0s;
}
.portfolio-item:hover .project-categories { opacity:0.5; -webkit-transition: opacity .4s .8s; -moz-transition: opacity .4s .8s; -ms-transition: opacity .4s .8s; -o-transition: opacity .3s .8s; transition: opacity .3s .8s; }
.zoom-icon { left: 50%; margin-left:-20px; position:inherit; width:40px; height:40px; margin-top:40px; opacity:0; background:url(images/zoom.png); background-size:40px 40px; transition:all 0.3s ease 0.1s; -moz-transition:all 0.3s ease 0.2s;
-webkit-transition:all 0.3s ease 0.2s; -ms-transition:all 0.3s ease 0.2s;
-o-transition:all 0.3s ease 0.2s; }
.portfolio-item:hover .zoom-icon { opacity:1; margin-top:0px; -webkit-transition: opacity .3s .2s, margin-top .3s .2s; -moz-transition: opacity .3s .2s, margin-top .3s .2s; -ms-transition: opacity .3s .2s, margin-top .3s .2s; -o-transition: opacity .3s .2s, margin-top .3s .2s; transition: opacity .3s .2s, margin-top .3s .2s;
}
/* Portfolio Isotope Transitions */
.isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; }
.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; }
.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; }
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; }
/* Portfolio Expander */
#project-page-holder { display: none; background-color:#FFF; }
#project-page-button-fullscreen { height: auto; z-index:100; position: absolute; right:30px; top:30px; }
#project-page-button-fullscreen li { display:inline-block; font-size:30px; }
#project-page-button-fullscreen li a { background:url(images/close.png) no-repeat #fff; background-size:50px 50px; width:50px; height:50px; display:block; border-radius:50px; opacity:0.5; }
#project-page-button-fullscreen li a:hover { opacity:1; }
#project-page-button { text-align:center; margin-bottom:20px; height: auto; position: relative; z-index:100; }
#project-page-button li { display:inline-block; margin:60px 10px 0px 10px; font-size:30px; }
#project-page-data { margin-bottom: 0px; }
.project-section-title { text-align:center; margin-bottom:40px; }
.project-section-title h1 { margin-bottom:5px!important; letter-spacing:1px; }
.project-page { background-color:#FFF; width:100%; height:auto; left:0; padding-bottom:40px; }
/* Portfolio Normal Expander Project Slider */
.project-image-slider .bx-wrapper .bx-next {
background: url("images/project_slider_right.png") no-repeat;
background-size:35px 65px;
opacity:0.3;
right:-90px;
}
.project-image-slider .bx-wrapper .bx-prev { background: url("images/project_slider_left.png") no-repeat ; background-size:35px 65px; opacity:0.3; left:-90px; }
.project-image-slider .bx-wrapper .bx-next:hover, .project-image-slider .bx-wrapper .bx-prev:hover { opacity:1; background-position:0 }
.project-image-slider .bx-wrapper .bx-controls-direction a { height: 65px; margin-top: -33px; outline: 0 none; position: absolute; text-indent: -9999px; top: 50%; width: 35px; z-index: 100; }
/* Portfolio Normal Expander */
.project-description { margin-top:40px; margin-bottom:20px; width:100%; height:auto; }
.small-border { height:2px; width:50px; background-color:#ddd; margin-bottom:15px; }
.visit-project { width:100%; text-align:center; border-top:1px solid #ddd; margin-top:20px; padding:55px 0 20px 0; }
.project-description h5 { color:#222222; text-transform:uppercase; margin-bottom:5px; }
/* Portfolio FullScreen Expander */
#cycle-loader { height:32px; left:50%; margin:-8px 0 0 -8px; position:absolute; top:50%; width:32px; z-index:999; }
#arrow_left { top:50%; height:60px; position:absolute; left:30px; width:32px; z-index:1000; margin-top:-30px; }
#arrow_right { top:50%; height:60px; position:absolute; right:30px; width:32px; z-index:1000; margin-top:-30px; }
#arrow_left:hover, #arrow_right:hover { margin-top:-28px; }
#arrow_left:active, #arrow_right:active { margin-top:-28px; }
div.mc-image { -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position:center center; background-repeat:no-repeat; height:100%; overflow:hidden; width:100%; }
.in-slide-content div.info-slide { background:#FFF url(images/info.png) no-repeat left bottom; background-size:46px 46px; position:absolute; top:30px; left:30px; width: 46px; height: 46px; margin: 0; display: block; text-indent: 10px; -moz-border-radius: 23px; -webkit-border-radius: 23px; border-radius: 23px; cursor: pointer; z-index:1000; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=0.5); opacity: 0.5; -webkit-transition: all 0.3s ; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; }
.in-slide-content div.info-slide:hover { width:200px; background:#FFF; position:absolute; bottom:40px; padding:10px 20px; text-indent: 0px; moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; z-index:1000; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=1); opacity: 1; }
.in-slide-content h2, .in-slide-content p{ padding: 0; margin: 0; font-size: 12px; line-height:24px; }
.in-slide-content h2{ font-size:14px; color:#444; text-shadow:none; font-weight:normal; text-transform:uppercase; z-index:1001; position:relative; white-space: nowrap; }
.info-slide p{ color:#aaa; font-size:13px; text-shadow:none; z-index:1001; position:relative; margin:0; font-weight:normal; white-space: nowrap;
}
.in-slide-content div.info-slide h2 { display:none; padding:10px 10px 0 10px; }
.in-slide-content div.info-slide p { display:none; padding:0px 10px 10px 10px; }
.in-slide-content div.info-slide:hover h2, .in-slide-content div.info-slide:hover p { display:inherit; padding:0; }
/* Project External */
#project-header { height:600px; z-index:1; }
#project-header .container { height:inherit; }
.table-header { display:table; position:relative; height:inherit; width:100%; }
.table-left { width:50%; left:0; position:absolute; bottom:0; }
.table-right { width:50%; text-align:left; position:relative; right:0; display:table-cell; vertical-align:middle }
.table-header h2 { margin-bottom:25px; }
.table-header p{ margin-bottom:35px; }
#project-url { height:40px; background-color:#222222; text-align:center; position:relative; z-index:10; }
#project-url .site a { color: #FFFFFF; display: block; font-family: Georgia; font-size: 13px; height: 40px; letter-spacing: 1px; line-height: 40px; overflow: hidden; }
#project-url .site .group { display: block; width: 100%; }
#project-url .site .group span { display: block; height: 40px; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s; }
#project-url .site:hover .text { display: block; margin-top:-40px; }
#project-url .site:hover .hover { display: block; }
#project-info .section-title { margin-bottom:0; }
#project-features { background-color:#fff; }
#project-slider .container{ padding-bottom:60px; }
#project-slider .bx-wrapper { margin-bottom:60px!important; }
#project-options { background:#fff; }
#project-options h2 { margin:40px 0; }
#project-options ul { margin-bottom:40px; }
#project-options ul li { line-height:24px; }
#project-counters { background-color:#222; }
#project-counters .counters { margin-top:20px; width:1120px; margin:0 auto; }
#project-counters .counters li { background: none ; border-radius: 3px 3px 3px 3px; color: rgba(255,255,255,0.5); font-family: 'Open Sans', serif; font-size: 14px; padding: 25px 0; text-align: center; text-transform: none; }
#project-counters .counters li .count { border-radius: 3px 3px 3px 3px; color: #fff; font-family: 'Montserrat',sans-serif; font-size: 70px; padding: 25px 0; text-align: center; text-transform: uppercase; display:block; }
/* Shortcode call to action */
.call-action {
color:#222222;
text-transform:uppercase;
width:100%;
text-align:center;
padding:60px 0;
line-height:35px;
}
.call-action a { margin-left:20px; }
/* Contact Parallax */
.contact-details { text-align:center; width:100%; }
.phone-icon { width:60px; height:60px; margin:0 auto; margin-bottom:40px; }
.company-phone a { color:#fff; background-color:rgba(255,255,255,0.15);
text-align: center;
font-size:72px; line-height:72px; font-family: 'Montserrat', sans-serif; padding:10px 20px; border-radius:3px; margin-bottom:30px; display:inline-block; }
.company-phone a:hover { color:#fff; }
h5.company-email { margin-bottom:15px; color:#999999; text-transform:none; }
h5.company-address { margin-bottom:15px; color:#999999; text-transform:none; }
/* Contact Formular */
#contact-formular { text-align:center!important; }
#contact-formular input[type="text"], textarea { color: #999999; font-family: 'Montserrat', sans-serif; font-size: 14px; text-transform:uppercase; height: 20px; padding-left: 3%; padding-right: 3%; padding-top: 15px; padding-bottom: 15px; width: 94%; background:#f5f5f5; border-radius:3px; margin-bottom:20px; border:0; box-shadow: 0 0px 3px rgba(0, 0, 0, 0.22) inset; -moz-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.22) inset; -webkit-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.22) inset; -o-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.22) inset; transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; }
#contact-formular input[type=text]:focus, #contact-formular textarea:focus, input[type=email]:focus { background-color: #e1e1e1; }
#contact-formular textarea { height:160px; resize:none; }
#contact-formular input[type="submit"] { color:#fff; font-family: 'Montserrat', sans-serif; font-size: 14px; text-transform:uppercase; padding:10px 15px; letter-spacing:0; line-height:14px; cursor:pointer; border-radius:3px; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s;
-webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s;
text-align:center; }
.error_message { text-align:center; margin-bottom:30px; font-size:13px; color:#e93735; font-weight:bold; }
#success_page { text-align:center; }
#success_page p { color:#999999; margin-top:20px; }
#message fieldset { border:none; }
#map_canvas { width:100%; height:400px; z-index:0; position:relative; }
/* Footer */
footer {
box-shadow: 0px -1px 5px rgba(0,0,0,0.15);
z-index:100;
position:relative;
padding:40px 0;
text-align:center;
}
footer ul.socials-icons { margin:10px 0 20px 0; }
footer ul.socials-icons li { margin:0 10px; }
#menu_top { height:50px; width:40px; border-radius:3px; left:50%; margin-left:-20px; margin-top:-65px; position:absolute; cursor:pointer; }
#menu_top_inside { background-image:url(images/menu_bottom_top_bg.png); background-size:18px 11px; background-position: 0 0; height: 22px; left: 11px; position: absolute; top: 14px; transition: background-position 0.3s linear 0s; width: 18px; }
#menu_top:hover #menu_top_inside { -webkit-animation: bottom_top_over .3s linear infinite; -moz-animation: bottom_top_over .3s linear infinite; -o-animation: bottom_top_over .3s linear infinite; animation: bottom_top_over .3s linear infinite; }
@-webkit-keyframes bottom_top_over { 0% { background-position: 0px 0px; } 100% { background-position: 0px -11px; } } @-moz-keyframes bottom_top_over { 0% { background-position: 0px 0px; } 100% { background-position: 0px -11px; } } @keyframes bottom_top_over { 0% { background-position: 0px 0px; } 100% { background-position: 0px -11px; } }
/* Blog */
#blog-header { text-align:center; padding:80px 0 100px 0; }
#blog { position:relative; width:100%; }
#blog .container { margin-top:-50px; background-color:#FFF; top:-50px; padding:40px 40px 60px 40px; width:1100px!important; border-radius:3px; }
#blog.masonry .container { margin-top:-50px; background-color:#FFF; top:-50px; padding:25px; width:1130px!important; border-radius:3px; }
.blog-posts-content { width:800px; min-height:500px; float:left; margin-right:50px; }
#blog.masonry .blog-posts-content { width:100%; min-height:500px; float:left; margin-right:50px; }
.blog-post { float:left; }
.blog-post.masonry { background-color:#f7f7f7; border:#ebebeb 1px solid; padding:20px; width:283px; margin:25px; border-radius:3px; }
.blog-post.masonry-quote { margin:25px; width:325px; }
.blog-post.masonry .post-content { width:100%; }
.blog-post.masonry-quote .post-content { width:100%; }
.type-date { width:50px; height:100px; margin-right:30px; float:left; }
.blog-type { width:50px; height:50px; border-radius:3px; float:none; }
.blog-date { text-align:center; text-transform:uppercase; width:50px; height:45px; padding-top:5px; background-color:#fff; float:none; }
.post-content { width:720px; float:left; }
.post-slider { margin-bottom:30px; }
.blog-title { line-height:25px; margin-bottom:10px; text-transform:uppercase; color:#222222; }
.blog-title a { text-transform:uppercase; }
.blog-title a:hover { }
.blog-meta { font-size:12px; line-height:13px; margin-bottom:20px; }
.blog-border { height:2px; width:100px; background-color:#999999; opacity:0.8; }
.blog-content { margin-top:35px; margin-bottom:20px; }
.post-quote { padding:30px; border-radius:3px; transition: all 0.3s linear; -moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; }
.post-quote:hover { }
.post-quote h3 { color:#fff; text-transform:uppercase; line-height:30px; margin-bottom:15px; }
.post-quote p { color:#fff; opacity:0.5; }
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 10px; height: 0; overflow: hidden; margin-bottom:30px; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0; }
hr { background-color:#e9e9e9; height:1px; width:100%; margin:60px 0; float:left; border:none!important; }
.blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4, .blog-content h5 { text-transform:uppercase; color:#222222; margin-bottom:10px; margin-top:30px; }
code { background-color: #F9F9F9; border: 1px solid #E9E9E9; clear: both; display: block; font: 12px "Andale Mono",Courier,"Courier New",monospace; margin-bottom: 20px; overflow: auto; padding: 0px 20px; margin:20px 0; white-space: pre; color:#222222; }
blockquote { background-image: url("images/blockquote.png"); background-size:21px 17px; background-position: left 8px; background-repeat: no-repeat; font-family: Georgia,"Times New Roman",Times,serif; font-size: 22px; font-style: italic; line-height: 30px; padding-left: 35px; }
.blog_comments { border-bottom:1px solid #dfdfdf; margin-bottom:60px; padding-top:20px; }
.blog_comments h4 { color: #222222; margin-bottom: 40px; text-transform:uppercase; }
.user_comment { background: url("images/user.png") no-repeat scroll 0 0 transparent; color: #222222; margin-bottom: 40px; padding-left: 100px; }
.comment-date { color: #ABABAB; font-family: Georgia,"Times New Roman",Times,serif; font-style: italic; margin-bottom: 10px; }
.comment-text { color: #999999; }
.user_comment_reply { background: url("images/user.png") no-repeat scroll 0 0 transparent; color: #2B363C; margin-top: 40px; padding-left: 100px; }
.comment_formular h4 { text-transform:uppercase; color:#222; margin-bottom:40px; }
#commentsform input[type="text"], textarea { color: #999999; font-family: 'Montserrat', sans-serif; font-size: 14px; text-transform:uppercase; height: 20px; padding-left: 5%; padding-right: 5%; padding-top: 15px; padding-bottom: 15px; width: 90%; background:#f5f5f5; border-radius:3px; margin-bottom:20px; border:0; box-shadow: 0 0px 3px rgba(0, 0, 0, 0.22) inset; -moz-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.22) inset; -webkit-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.22) inset; -o-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.22) inset; transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; }
#commentsform input[type=text]:focus, #commentsform textarea:focus, input[type=email]:focus { background-color: #e1e1e1; }
#commentsform textarea { height:90px; resize:none; }
/* Sidebar */
#sidebar { width:250px; min-height:500px; float:left; }
.widget { margin-bottom:60px; font-size:14px; }
.heading h5 { margin-bottom:20px; text-transform:uppercase; color: #222222; }
input#search { background:url("images/zoom-search.png") no-repeat 10px 10px #f5f5f5; background-size:30px 30px; color: #999999; font-family: 'Montserrat', sans-serif; font-size: 14px; text-transform:uppercase; height: 20px; padding: 15px; padding-left:45px; width: 190px; border-radius:3px; border:0; box-shadow: 0 0px 3px rgba(0, 0, 0, 0.22) inset; -moz-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.22) inset; -webkit-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.22) inset; -o-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.22) inset; transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; }
input#search:focus { background:url("images/zoom-search.png") no-repeat 10px 10px #e1e1e1; background-size:30px 30px; }
#sidebar .widget_categories li { background: url("images/arrow-li.png") no-repeat scroll 0 22px transparent; background-size:5px 8px; border-bottom: 1px solid #dfdfdf; display: block; padding: 15px; }
#sidebar .widget_categories li:first-child { border-top: 1px solid #dfdfdf; }
#sidebar .widget_categories li a { color: #222222; }
#sidebar .widget_categories li a:hover { }
#sidebar .recent-posts li { border-top: 1px solid #dfdfdf; padding-top:12px; }
#sidebar .recent-posts p { padding-bottom:12px; font-size:12px; }
#sidebar .recent-posts { border-bottom: 1px solid #dfdfdf; }
#sidebar .recent-posts li a { color: #222222; }
#sidebar .recent-posts li a:hover { }
#sidebar .tags a { border-radius: 2px 2px 2px 2px; background-color:#222222; color: #FFFFFF !important; cursor: pointer; display: inline-block; float: left; font-size: 12px; margin: 5px 5px 0 0; padding: 7px 10px; position: relative; text-transform: capitalize; }
#sidebar .tags a:hover { }
#sidebar .widget_archives li { background: url("images/arrow-li.png") no-repeat scroll 0 22px transparent; background-size:5px 8px; border-bottom: 1px solid #dfdfdf; display: block; padding: 15px; }
#sidebar .widget_archives li:first-child { border-top: 1px solid #dfdfdf; }
#sidebar .widget_archives li a { color: #222222; }
#sidebar .widget_archives li a:hover { }
/* Posts Navigation */
.inner-navigation { margin-bottom:50px; margin-top:50px; }
.inner-navigation.masonry { margin-left:50px; margin-right:50px; margin-bottom:50px; margin-top:50px; }
.inner-navigation li a span { display:inline-block; margin-right:10px; width:30px; height:30px; border-radius:3px; transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; float:left; }
.inner-navigation li { display:inline-block; width:110px; line-height:27px; }
.inner-navigation li:last-child a span {
float:right;
margin-left:10px;
margin-right:0px;
}
.inner-navigation li:last-child { float:right; }
.inner-navigation li a:hover span { color:#999; }
.inner-navigation li a:hover { color:#999999; }
/* Responsive Media Querries */
@media only screen and (max-width: 1300px) {
.container { width:920px; }
.text-slide-vertical { font-size:60px; }
.text-slide-vertical li { line-height:80px; }
.small-screen-left, .small-screen-right { top: 100px; width: 300px; }
.slide-content h1 { font-size:80px; line-height:80px; }
.big-screen { width: 500px; }
.our-team li { margin: 0 20px; }
ul.technology li { padding: 30px 10px; width: 185px; }
#blog .container { width: 920px!important; }
.blog-posts-content { min-height: 100px; width: 680px; margin-right:40px; }
.post-content { float: left; width: 600px; }
#sidebar { width: 200px; }
input#search { width: 140px; }
.inner-navigation.masonry { margin: 50px 0px ; }
#blog.masonry .container { width: 950px !important; }
.blog-post.masonry { margin: 18px; width: 238px; }
.blog-post.masonry-quote { margin: 18px; width: 280px; }
#project-header { height: 500px; }
#project-slider .bx-wrapper .bx-prev { left: -50px; }
#project-slider .bx-wrapper .bx-next { right: -50px; }
.project-page .bx-wrapper .bx-prev { left: -50px; }
.project-page .bx-wrapper .bx-next { right: -50px; }
#project-counters .counters { margin: 0 auto; width: 1040px; }
}
@media only screen and (max-width: 1024px) {
.container {
width:600px;
}
.text-slide-vertical { font-size:60px; }
.text-slide-vertical li { line-height:80px; }
.slide-content h1 { font-size:60px; line-height:60px; }
ul.fullwidth-slider li.slide { background-position: center 0px!important; }
ul.fullwidth-slider li.slide .caption .caption-inside { position: relative; width:100%; height:100%; }
#slider_left { top:90%; height:60px; position:absolute; left:50px; width:32px; z-index:1000; margin-top:-30px; cursor:pointer; }
#slider_right { top:90%; height:60px; position:absolute; right:50px; width:32px; z-index:1000; margin-top:-30px; cursor:pointer; }
#slider_left:hover, #slider_right:hover { margin-top:-28px; }
#slider_left:active, #slider_right:active { margin-top:-28px; }
.ultralarge { font-size:80px; line-height:70px; }
.element_from_left { left: 0px; opacity: 1; }
.element_from_right { right: 0px; opacity: 1; }
.element_fade_in { opacity: 1; right: 0px; }
.parallax { background-position: center top !important; background-attachment: scroll !important; height: auto; margin: 0 auto; width: 100%; }
.one_half {
width: 100%;
}
.one_third { width: 100%; }
.one_fourth { width: 100%; }
.one_fifth { width: 100%; }
.one_sixth { width: 100%; }
.two_fifth { width: 100%; }
.two_fourth { width: 100%; }
.two_third { width: 100%; }
.three_fifth { width: 100%; }
.three_fourth { width: 100%; }
.four_fifth { width: 100%; }
.five_sixth { width: 100%; }
.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .two_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth { margin-bottom: 20px; margin-right: 0%; }
.section-title { width:100%; }
.small-screen-left, .small-screen-right { top: 40px; width: 200px; }
.big-screen { width: 320px; }
.service-item .right { float: left; }
.service-item.text-right { text-align: left; }
.service-item.text-right .fa-stack { margin-left: 0px; margin-right: 20px; }
ul.technology li { padding: 30px 20px; width: 240px; }
#portfolio-wrap .one-four { width: 50%; }
#blog .container { width: 600px!important; }
.blog-posts-content { min-height: 100px; width: 600px; margin-right:40px; }
.post-content { float: left; width: 520px; }
input#search {
width: 540px;
}
#blog.masonry .container { width: 630px !important; }
.blog-post.masonry { background-color: #F7F7F7; border: 1px solid #EBEBEB; border-radius: 3px 3px 3px 3px; margin: 15px; padding: 20px; width: 243px; }
.blog-post.masonry-quote { margin: 15px; width: 285px; }
#project-header { height: 400px; }
#project-counters .counters { margin: 0 auto; width: 100%; }
.recent-post .blog-meta { display:none; }
.price-table { width:49%; }
.newsletter-left { width:100%; float:none; height:50px }
#newsletter input[type="text"] { text-align:center; }
.newsletter-right { width:100%; float:none; text-align:center; height:40px; padding-top:10px; }
}
@media only screen and (max-width: 767px) {
.container { width:400px; }
.text-slide-vertical { font-size:30px; }
.text-slide-vertical li { line-height:40px; }
.slide-content h1 { font-size:40px; line-height:40px; }
.ultralarge { font-size:60px; line-height:50px; }
.big-screen { width: 100%; }
.small-screen-left, .small-screen-right { width: 100%; top:0; position:relative; }
.twitter-feed .bx-wrapper .bx-prev { margin-top: 120px; } .twitter-feed .bx-wrapper .bx-next { margin-top: 120px; }
.service-item .fa-stack { margin-bottom:30px; }
ul.technology li { padding: 30px 20px; width:inherit; margin:0; margin-bottom:20px; }
#filters ul li { display: block; margin: 5px 60px; }
.company-phone a { font-size: 50px; }
#blog .container { width: 400px!important; }
.blog-posts-content { min-height: 100px; width: 400px; margin-right:40px; }
.post-content { float: left; width: 320px; }
input#search { width: 340px; }
#blog.masonry .container { width: 430px !important; }
.blog-post.masonry { margin: 20px; width: 348px; }
.blog-post.masonry-quote { margin: 20px; width: 390px; }
.user_comment_reply { margin-left: -100px; }
#project-header { height: 300px; }
.table-header p{ display:none; }
#project-counters .counters { margin: 0 auto; width: 100%; }
.recent-post .recent-post-date { display:none; }
.four-zero-four { font-size:100px; line-height:100px; }
}
@media only screen and (max-width: 479px) {
.container { width:280px; }
.text-slide-vertical { font-size:30px; }
.text-slide-vertical li { line-height:40px; }
.slide-content h1 { font-size:30px; line-height:30px; }
.ultralarge { font-size:40px; line-height:30px; }
ul.fullwidth-slider, ul.fullwidth-slider .caption-inside { height: 300px; }
.our-team li { margin: 0 auto; }
.twitter-feed .bx-wrapper .bx-prev { margin-top: 150px; } .twitter-feed .bx-wrapper .bx-next { margin-top: 150px; }
.service-item .icon-stack { margin-bottom:60px; }
#portfolio-wrap .one-four { width: 100%; }
.company-phone a { font-size: 30px; }
#map_canvas {
height: 250px;
}
.type-date { display:none; }
#blog .container { width: 280px!important; padding:0px; }
.blog-posts-content { min-height: 100px; width: 280px; margin-right:40px; }
.post-content { float: left; padding: 20px; width: 240px; }
#sidebar { width: 240px; padding: 20px; border-top:#E9E9E9 solid 1px; margin-top:60px; padding-top:60px; }
input#search { width: 180px; }
#blog.masonry .container { width: 280px !important; padding:0; }
.blog-post.masonry { margin: 10px; width: 218px; }
.blog-post.masonry .post-content { padding: 0; }
.blog-post.masonry-quote { margin:10px; width: 260px; }
.blog-post.masonry-quote .post-content { padding:0; }
#project-header { height: 250px; }
#project-counters .counters { margin: 0 auto; width: 100%; }
#project-slider .bx-wrapper .bx-prev { display:none; }
#project-slider .bx-wrapper .bx-next { display:none; }
.project-page .bx-wrapper .bx-prev { display:none; }
.project-page .bx-wrapper .bx-next { display:none; }
#show { display:none!important; }
.recent-post h5 { font-size:11px; }
.price-table { width:98%; }
#newsletter input[type="text"] { font-size:24px; }
}
