/* Theme Name: Brainguys Theme URI: http://silviuandrei.eu/ Description: Brainguys Site Template Author: Silviu Andrei Author URI: http://silviuandrei.eu/ License: GNU General Public License version 3.0 License URI: http://www.gnu.org/licenses/gpl-3.0.html Version: 1.0 */ /* GENERAL ================================================== */ /* Light 300 Light 300 Italic Normal 400 Normal 400 Italic Semi-Bold 600 Semi-Bold 600 Italic Bold 700 Bold 700 Italic Extra-Bold 800 Extra-Bold 800 Italic @import url(http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic); */ body { background: #fff; font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333333; } h1, h2, h3, h4, h5, h6 { color: #333333; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; } h1.page_title { font-size: 24px; margin: 0; line-height: normal; } h1.page_title a { text-decoration: none; } h3#reply-title, h2.comments-title { font-size: 20px; line-height: normal; margin-top: 40px; } #secondary .widget-title, h2.widgettitle { font-size: 20px; line-height: normal; margin-bottom: 10px; } /* #background ================================================== */ #background {} /* #wp related ================================================== */ .widget-title { overflow: hidden; } .widget-title a:first-child { margin: 5px 5px 0 0; } .widget-title a:last-child { color: #333333 !important; } .widget-title .rsswidget { float: left; } .widget_calendar table { width: 100%; } .widget_calendar table tr { text-align: center; } [id^="gallery"] .gallery-item a img { display: inline-block; } [class$="_container"] ul { list-style: square outside; margin-left: 30px; } ul ul, ul ol, ol ol, ol ul { font-size: 100%; margin: 12px 0 12px 30px; } ul ul li, ul ol li, ol ol li, ol ul li { margin-bottom: 12px; } .sticky {} .gallery-caption {} .bypostauthor {} .aligncenter {} .wp-caption { max-width: 100% !important; } .wp-caption img { max-width: 100% !important; display: block; } .alignleft { float: left; margin: 0 24px 24px 0; } .alignright { float: right; margin: 0 0 24px 24px; } div.alignleft, div.alignright { margin-bottom: 0; } .wp-caption-text { font-size: 10px; margin-bottom: 5px !important; } .tct_main { position: relative; width: 980px; width: 1053px; margin: 0 auto; overflow: hidden; } .sw_smc_l { float: left; margin-bottom: 40px; width: 54%; } .sw_smc_r { float: right; margin-bottom: 40px; width: 54%; } .sw_sidebar_r { float: right !important; margin: 6px 0 40px 0; } .sw_sidebar_l { float: left; margin: 6px 0 40px 0; } .single-format-standard article, .single-format-standard article *:last-child { margin-bottom: 0; } h1.site-title { line-height: normal; font-size: 24px; font-weight: bold; /*text-transform: uppercase;*/ margin: -15px 0 30px; } h1.site-title a { text-decoration: none; } .no_posts { width: 940px; margin: 20px auto 0; color: #fff; font-size: 12px; } input[type="text"], input[type="search"], input[type="email"], textarea { padding: 12px; border: 1px solid #dedede; width: 60%; color: #777777; } textarea { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ width: 100%; } [id^="gallery"] { margin-bottom: 20px !important; } [id^="gallery"] .gallery-item { margin: 0 !important; } [id^="gallery"] .gallery-item a { display: block; } [id^="gallery"] .gallery-item a img { display: block; height: auto; max-width: 100%; border: none !important; } input[type="search"] { width: auto; padding: 6px 12px; } input[type="submit"], input[type="submit"]:hover { background: none; color: #fff; text-shadow: none; box-shadow: none; border-radius: 0; border: none; margin: 0; transition: all 0.3s; } input[type="submit"]:hover { background: none; } .cright p:last-child, .wpcf7-form { margin-bottom: 0; } .wpcf7-form { overflow: hidden; } .wpcf7-form input[type="text"], .wpcf7-form input[type="email"] { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ width: 100%; } .wpcf7-form textarea { height: 163px; } .wpcf7 .cleft { float: left; width: 35%; } .wpcf7 .cright { float: right; width: 61%; } .wpcf7-form input[type="submit"] { float: right; } .wpcf7-form p { margin: 0; overflow: hidden; } p.form-submit { margin: 0; } p.form-allowed-tags, p.comment-notes, p.logged-in-as { font-size: 12px; } #commentform { margin-bottom: 0; } .comment-list { list-style: none; margin: 25px 0 0; font-size: 12px; line-height: 18px; } .comment-list li { padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid rgba(0,0,0,0.1); } .comment-author.vcard img { float: left; margin: 0 10px 20px 0; } .comment-content, .reply { margin-left: 50px; } .comment-content p:last-child { margin-bottom: 10px; } .comment-awaiting-moderation { margin: 0; } .comment-meta { margin-bottom: 10px; } .children { font-size: 100%; margin: 25px 0 0 50px; } .children li { border-bottom: none; margin: 0; padding: 0; } .bl_img.bl_img_f { float: left; width: 25%; margin: 0 50px 0 0; } .bl_img.bl_img_f.smaller_th { width: 15%; margin: 20px 50px 64px 0; } .bl_img.bl_img_f img { margin: 0; } .bl_img img { width: 100%; height: auto; display: block; } .bl_img { margin-bottom: 39px; height: auto; overflow: hidden; } .pagination { overflow: hidden; padding-bottom: 5px; } .pagination ul { margin: 0; float: left; text-align: center; } .pagination ul li { float: left; margin: 0 10px 0 0; line-height: 15px; } .pagination span.pages { float: left; line-height: 15px; } p.read_more { margin-top: 24px; } .screen-reader-text { display: none; } nav.paging-navigation { overflow: hidden; } nav.paging-navigation .nav-previous { float: left; width: 50%; } nav.paging-navigation .nav-next { float: right; width: 50%; text-align: right; } #comments { clear: both; } #secondary { background: rgba(0,0,0,0.05); padding: 20px; } #secondary, #secondary a { color: #999999; transition: color 0.5s; } #secondary a:hover { color: #333333; } #secondary a { text-decoration: none; } #secondary aside.widget { margin-bottom: 25px; } #secondary aside.widget ul { margin: 0; } #secondary aside.widget ul li { margin-bottom: 5px; } /* #filter ================================================== */ img.gray { filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ } /* FONT, SIZE AND COLOR ================================================== */ /**************************************************************************************************** */ /* .site ================================================== */ .site {} /* .site .site-header ================================================== */ .site-header { margin: 0 auto; padding-top: 125px; } /* .site .site-header .site-branding ================================================== */ /* .site .site-header .main-navigation ================================================== */ .main-navigation ul { float: right; margin: 5px 0 0; } .main-navigation ul li { float: left; margin: 0; } .main-navigation ul li a { color: #cbcbcb; font-size: 12px; text-decoration: none; padding-left: 33px; transition: color 0.3s; } .main-navigation ul li a:hover, .main-navigation ul li a.active, .main-navigation div ul.menu li.current-menu-item > a { color: #fff; background: url(images/menu_arrow.png) 20px center no-repeat; } /* .site .site-content ================================================== */ /* .site .site-content .content-area ================================================== */ .carousel { margin: 0 auto; position: relative; overflow: hidden; } .carousel ul { padding: 50px 0 50px 55px; margin: 0; } .carousel ul li { float: left; list-style: none; margin: 33px 60px 0 0; } #home_carousel ul li { margin-bottom: 25px; margin: 0 59px 0 0; } .carousel .nav, .car_nav { position: absolute; right: 0; top: 102px; z-index: 2; } .carousel .nav a, .car_nav a { float: left; transition: opacity 0.3s; display: block; width: 17px; height: 17px; background: url(images/slider_arrow.png) top left; text-indent: -9999px; opacity: 0.5; } .carousel .nav a.next, .car_nav a.next { background: url(images/slider_arrow.png) top right; } .carousel .nav a:hover, .car_nav a:hover { opacity: 1; } .car_nav { right: 0px; top: 40px; } .carousel .carousel_selected .carousel_item { width: 318px; margin: -33px -22px -22px; } .carousel .carousel_selected .carousel_item h1 { padding-top: 50px; } .carousel .carousel_selected .carousel_item .w_mar, .carousel .carousel_selected .carousel_item .wo_mar { height: 305px; } .ov_hid { overflow: hidden } div.m_margin { margin: -50px -50px 38px; width: 940px; max-height: 375px; overflow: hidden; } div.m_margin.sps_thumb { width: auto; margin: 0 0 38px; } div.m_margin img { min-width: 100%; height: auto; } img.w_margin { margin: 0 0 30px; width: 840px; } .carousel .carousel_item { width: 273px; transition: all 0.5s; /*background: #fff;*/ background: none; text-align: center; position: relative; } .carousel .carousel_item div { /*background: #e8e8e8;*/ background: none; text-align: center; transition: height 0.5s; height: 272px; position: relative; margin-top: 52px; } .carousel .carousel_item div.excerpt_container { background: #fff; text-align: center; transition: all 0.5s; height: auto; position: inherit; margin-top: 0; } .carousel .carousel_item div.excerpt_container { padding-bottom: 40px; } .carousel .carousel_selected .carousel_item div.excerpt_container { padding-bottom: 63px; } .carousel .carousel_item div img { position: relative; } .carousel .carousel_item div img.no_pos { max-width: 100%; } .carousel .carousel_item div img.w_pos { position: absolute; bottom: 0; max-width: 90%; left: 15px; } /*.carousel .carousel_item div.w_mar img { position: absolute; bottom: 0; width: 100%; height: auto; left: 0; }*/ .carousel .carousel_item div.wo_mar { overflow: hidden; } .carousel .carousel_item div.wo_mar img { width: 100%; height: auto; display: block; position: static; } .carousel .carousel_item h1 { transition: all 0.5s; font-size: 20px; line-height: 22.5px; padding: 40px 0 15px; margin: 0; color: #666666; } .carousel .carousel_item p { font-size: 12px; line-height: 24px; padding: 0 30px; color: #999999; } .carousel .carousel_item a.learn_more, a.learn_more, .read_more a, input[type="submit"], input[type="submit"]:hover { font-size: 11px; color: #999999; text-decoration: none; border: 1px solid #cccccc; display: inline-block; padding: 5px 25px 5px 18px; background: url(images/link_arrow.png) right 11px center no-repeat; } input[type="submit"], input[type="submit"]:hover { padding: 8.5px 25px 8.5px 18px; } #secondary input[type="submit"], #secondary input[type="submit"]:hover, .error404 input[type="submit"], .error404 input[type="submit"]:hover { padding: 7px 25px 7px 18px; } .carousel .carousel_item div.t_circle { background: #3c3e4d; width: 120px; height: 120px; position: absolute; top: -95px; right: -35px; display: block; z-index: 1; border: 3px solid #aeb1c6; border-radius: 200px; } .carousel .carousel_item div.t_circle p { font-weight: bold; font-size: 11px; color: 868896; line-height: normal; padding: 38px 15px 0; } .carousel .carousel_item div.t_circle p strong { font-size: 13px; color: #fff; display: block; margin-bottom: 5px; } #main_page_first { background: #fff; margin: 70px auto 50px; padding: 50px 50px 50px; width: 840px; } #main_page_first .b_page article.hentry { margin-bottom: 50px; } #main_page_first .b_page article.hentry p { margin-bottom: 0; } #main_page_first .b_page article.hentry:last-child { margin-bottom: 0; } .main_page_first_container { } span.meta { font-size: 12px; color: #999999; margin: 10px 0 30px; display: block; } span.meta a { color: #999999; text-decoration: none; border-bottom: 1px solid #b9b9b9; transition: all 0.3s; } span.meta a:hover { color: #333333; border-bottom: 1px solid #666666; } .main_page_second_container { width: 54%; float: right; } .main_page_sidebar_container { width: 40%; float: left; } .main_page_second_container *:last-child, .main_page_first_container.s_page article.post *:last-child { margin-bottom: 0; } .main_page_sidebar_container.big_thumb img { margin: -50px 0 -50px -50px; min-width: 386px; min-height: 623px; display: block; } .main_page_sidebar_container img { max-width: 100%; margin-bottom: 0; height: auto; display: block; } #folio_carousel.carousel { width: 1170px; overflow: hidden; } #folio_carousel.carousel ul { padding: 111px 0 50px; } #folio_carousel.carousel ul ul.c_social { overflow: hidden; padding: 10px 20px; margin: 30px 30px 0; text-align: center; border-top: 1px solid rgba(0,0,0,0.15); border-bottom: 1px solid rgba(0,0,0,0.15); } #folio_carousel.carousel ul ul.c_social li { margin: 0; float: left; width: 25%; } #folio_carousel.carousel ul ul.c_social li a { color: rgba(0,0,0,0.35); font-size: 20px; transition: all 0.3s; } #folio_carousel.carousel ul ul.c_social li a:hover { color: rgba(0,0,0,0.45); } #folio_carousel.carousel .nav { z-index: 10; } #folio_carousel.carousel ul li { position: relative; z-index: 1; opacity: 0.5; transition: all 0.5s; } #folio_carousel.carousel ul li .carousel_item { width: 195px; } #folio_carousel.carousel ul li .carousel_item p { font-size: 11px; line-height: 18px; transition: all 0.5s; } #folio_carousel.carousel ul li .carousel_item h1 { font-size: 18px; line-height: normal; padding: 30px 0 15px; transition: all 0.5s; } #folio_carousel.carousel ul li .carousel_item div { height: 193px; transition: all 0.5s; } #folio_carousel.carousel ul li .carousel_item div.w_mar { height: 255px; margin: 0; transition: all 0.5s; } #folio_carousel.carousel ul li .carousel_item div.w_mar img { width: 100%; height: auto; } #folio_carousel.carousel ul li .carousel_item div.wo_mar { height: 192px; margin: 63px 0 0; transition: all 0.5s; } #folio_carousel.carousel ul li .carousel_item div.excerpt_container { height: auto; transition: none; } #folio_carousel.carousel ul li.carousel_item01, #folio_carousel.carousel ul li.carousel_item02, #folio_carousel.carousel ul li.carousel_item03 { margin:-31px 60px 0 -140px; opacity: 1; } #folio_carousel.carousel ul li.carousel_item01 .carousel_item , #folio_carousel.carousel ul li.carousel_item02 .carousel_item, #folio_carousel.carousel ul li.carousel_item03 .carousel_item { width: 273px; } #folio_carousel.carousel ul li.carousel_item01 .carousel_item h1, #folio_carousel.carousel ul li.carousel_item02 .carousel_item h1, #folio_carousel.carousel ul li.carousel_item03 .carousel_item h1 { font-size: 20px; line-height: 22.5px; padding: 40px 0 15px; } #folio_carousel.carousel ul li.carousel_item01 .carousel_item p, #folio_carousel.carousel ul li.carousel_item02 .carousel_item p, #folio_carousel.carousel ul li.carousel_item03 .carousel_item p { font-size: 12px; line-height: 24px; padding: 0 30px; } #folio_carousel.carousel ul li .carousel_item h1 a { text-decoration: none; } #folio_carousel.carousel ul li.carousel_item01 .carousel_item div, #folio_carousel.carousel ul li.carousel_item02 .carousel_item div, #folio_carousel.carousel ul li.carousel_item03 .carousel_item div { height: 357px; } #folio_carousel.carousel ul li.carousel_item02 .carousel_item div.wo_mar { height: 315px; margin-top: 102px; } #folio_carousel.carousel ul li.carousel_item01 .carousel_item div.wo_mar, #folio_carousel.carousel ul li.carousel_item03 .carousel_item div.wo_mar { height: 269px; margin-top: 88px; } #folio_carousel.carousel ul li.carousel_item01 .carousel_item div.excerpt_container, #folio_carousel.carousel ul li.carousel_item02 .carousel_item div.excerpt_container, #folio_carousel.carousel ul li.carousel_item03 .carousel_item div.excerpt_container { height: auto; } #folio_carousel.carousel ul li.carousel_item02 .carousel_item div { height: 417px; } #folio_carousel.carousel ul li.carousel_item02 .carousel_item div.excerpt_container { height: auto; } #folio_carousel.carousel ul li.carousel_item02, #folio_carousel.carousel ul li.carousel_item03 { margin:-45px 60px 0 0; z-index: 5; } #folio_carousel.carousel ul li.carousel_item03 { margin:-31px 60px 0 0; z-index: 5; } #folio_carousel.carousel ul li.carousel_item02 .carousel_item { margin: -33px -22px 0; width: 318px; } #folio_carousel.carousel ul li.carousel_item02 .carousel_item div.excerpt_container { padding-bottom: 60px; } #folio_carousel.carousel ul li.carousel_item02 .carousel_item h1 { padding-top: 45px; } #folio_carousel.carousel ul li.carousel_item04 { margin: 33px 60px 0 -139px; z-index: 1; } /* .site .site-content .widget-area ================================================== */ /* .site .site-footer ================================================== */ /* .site .site-footer .site-info ================================================== */ /**** Isotope Filtering ****/ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } /**** Isotope CSS3 transitions ****/ .isotope, .isotope .isotope-item, .content-area.index, .content-area.index .post-box { -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, .content-area.index { -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, .content-area.index .post-box { -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; } /**** disabling Isotope CSS3 transitions ****/ .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; } .gal-item { margin-bottom: 50px; } .gal-item:last-child { margin-bottom: 0; } #gallery { overflow: hidden; margin: -10px; } #gallery a { float: left; display: block; padding: 11px; } #gallery a img { display: block; } .p-n_gal div a { margin-top: 50px; display: inline-block; } .c_page_c { float: right; width: 65%; } .c_extra_i { float: left; width: 30%; } .c_extra_i img { float: left; } .c_extra_i div { margin: -5px 0 0 40px; overflow: hidden; } .c_extra_i div p { color: #666666; float: left; font-size: 14px; margin-bottom: 0; } .c_extra_i div p span { color: #333333; display: block; font-weight: bold; } .c_extra_i div p:nth-child(2), .c_extra_i div p:nth-child(3), .c_extra_i div p:nth-child(4), .c_extra_i div p:nth-child(5) { margin-top: 21px; } #filters ul { overflow: hidden; margin-bottom: 40px; } #filters ul li { float: left; margin: 0; } #filters ul li:last-child span { display: none; } #portfolio-wrapper { margin: -40px -10px 0; } #portfolio-wrapper li { float: left; width: 195px; margin: 40px 10px 10px; } #portfolio-wrapper li img { max-width: 100%; } #portfolio-wrapper li h3 { font-size: 17px; font-weight: bold; line-height: normal; margin: 15px 0 20px; } .slides > li, .flex-direction-nav li { margin-bottom: 0; } .slides li img { display: block; } .m_margin.v_post iframe { height: 375px !important; } .m_margin.v_post.sps_thumb iframe { height: 325px !important; } article.post.type-post.format-audio iframe { } article.post.type-post.format-video iframe { height: 325px !important; } article.post.type-post.format-video .bl_img.bl_img_f iframe, article.post.type-post.format-audio .bl_img.bl_img_f iframe { height: 210px !important; } article.post.type-post.format-video .bl_img.bl_img_f.smaller_th iframe, article.post.type-post.format-audio .bl_img.bl_img_f.smaller_th iframe { height: 126px !important; } .entry-quote { font-size: 16px; line-height: 24px; } .entry-quote a { text-decoration: none; } .quote-source a { color: rgba(0,0,0,0.55); font-size: 12px; } .archive .a_e_page_title, .error404 .page_title { text-transform: capitalize; margin-bottom: 45px; } .error404 ul { margin: 0; } .error404 ul li { margin-bottom: 5px; } .error404 ul li:last-child { margin-bottom: 0; } .search-form { overflow: hidden; } .search-form label { float: left; } .search-form label input { margin: 0 1px 0 0; } .main-navigation ul li { position: relative; } .main-navigation ul li ul.sub-menu { position: absolute; top: 80%; left: -18px; margin: 0; display: none; opacity: 0; /*transition: all 0.5s;*/ background: url(images/hover_menu_bg.png) top center no-repeat; width: 98px; padding: 35px 15px 15px; z-index: 13; } .main-navigation ul li ul.sub-menu:after { content: ""; background: url(images/hover_menu_bg.png) bottom center no-repeat; position: absolute; top: 100%; display: block; width: 98px; padding: 0 15px; height: 5px; left: 0; } .main-navigation ul li ul.sub-menu li { text-align: center; border-bottom: 1px solid #d8d8d8; padding-bottom: 7px; margin-bottom: 7px; } .main-navigation ul li ul.sub-menu li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .main-navigation ul li ul.sub-menu li a { padding: 0; } .main-navigation ul li ul.sub-menu li a:hover, .main-navigation ul li ul.sub-menu li.current-menu-item a { color: #565656; } .main-navigation ul li:hover ul.sub-menu {} .main-navigation ul li ul.sub-menu li { float: none; } .menu-item-has-children { padding-bottom: 1px; } .site-branding a { display: inline-block; } #slideshow, #no_slideshow { position: absolute; z-index: -1; } #slideshow img, #no_slideshow img { position: fixed; left: 0; top: 0; width: 100%; min-width: 1024px; height: auto; min-height: 100%; } #slideshow img.active { opacity: 1; z-index: 10; } #slideshow img.last-active { z-index: 9; } /* This is the visible area of you carousel. Set a width here to define how much items are visible. The width can be either fixed in px or flexible in %. Position must be relative! */ #folio_carousel, #home_carousel { position: relative; overflow: visible; } /* This is the container of the carousel items. You must ensure that the position is relative or absolute and that the width is big enough to contain all items. */ #folio_carousel > ul, #home_carousel > ul { width: 20000em; position: relative; /* Optional, required in this case since it's a