%PDF- %PDF-
Direktori : /www/varak.net/www.varak.net/css/ |
Current File : /www/varak.net/www.varak.net/css/style.css |
/*---------------------------------------------------------------------------------- Theme Name: Ronika Theme URI: http://www.spnoy.com Description: Ronika - One Page/Multi Page WordPress Theme Author: Spnoy Author URI: http://www.spnoy.com Version: 1.1.1 License: GNU General Public License License URI: ------------------------------------------------------------------------------------ 0. CSS Reset 1. Document Body 2. Header 3. Ronika Gallery Slider 4. Main Content 5. Contact Form 7 6. Page & Blog 7. WordPress Requirements 8. Comment Form 9. Comments list 10. Widgets 11. Shortcodes #. Media Queries -----------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------*/ /* 0. CSS Reset /*---------------------------------------------------------------------------------*/ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}img {vertical-align: middle;}textarea {resize: vertical;} /*---------------------------------------------------------------------------------*/ /* 1. Document Body /*---------------------------------------------------------------------------------*/ @font-face { font-family: 'Signika'; src: url('../fonts/signika/signika-light-webfont.eot'); src: url('../fonts/signika/signika-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/signika/signika-light-webfont.woff') format('application/font-woff'), url('../fonts/signika/signika-light-webfont.ttf') format('truetype'), url('../fonts/signika/signika-light-webfont.svg#Signika') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Signika'; src: url('../fonts/signika/signika-bold-webfont.eot'); src: url('../fonts/signika/signika-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/signika/signika-bold-webfont.woff') format('application/font-woff'), url('../fonts/signika/signika-bold-webfont.ttf') format('truetype'), url('../fonts/signika/signika-bold-webfont.svg#Signika') format('svg'); font-weight: bold; font-style: normal; } body { font-family: 'Signika', helvetica, arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1; background-color: #556274; color: #ffffff; direction: ltr; font-size: 100%; } a { text-decoration: none; color: #ee4c62; -webkit-transition: background-color 0.3s ease-out, color 0.3s ease-out; -moz-transition: background-color 0.3s ease-out, color 0.3s ease-out; -ms-transition: background-color 0.3s ease-out, color 0.3s ease-out; -o-transition: background-color 0.3s ease-out, color 0.3s ease-out; transition: background-color 0.3s ease-out, color 0.3s ease-out; } h1,h2,h3,h4,h5,h6 { font-family: 'Signika', helvetica, arial, sans-serif; } h1 { font-size: 1.75em; } h2 { font-size: 1.5em; } h3 { font-size: 1.375em; } h4 { font-size: 1.25em; } h5 { font-size: 1.125em; } h6 { font-size: 1em; } input, textarea { font-family: 'Signika', helvetica, arial, sans-serif; } /*---------------------------------------------------------------------------------*/ /* 2. Header /*---------------------------------------------------------------------------------*/ .header { width: 100%; max-height: 120px; background-color: #2d343e; background-color: rgba(45,52,62,0.8); padding: 20px 0; position: fixed; top: 0; left: 0; z-index: 100; -webkit-transition: padding 0.3s ease-out; -moz-transition: padding 0.3s ease-out; -ms-transition: padding 0.3s ease-out; -o-transition: padding 0.3s ease-out; transition: padding 0.3s ease-out; } body.sticky-header-off .header { position: absolute; } .logo { float: left; width: 10%; -webkit-transition: margin 0.3s ease-out; -moz-transition: margin 0.3s ease-out; -ms-transition: margin 0.3s ease-out; -o-transition: margin 0.3s ease-out; transition: margin 0.3s ease-out; } .logo img { max-width: 100%; height: auto; max-height: 80px; } .main-navigation { float: left; width: 75%; } .main-navigation > ul { display: inline-block; width: 100%; padding: 30px 0; } .main-navigation > ul > li { float: left; margin: 0 2.5%; position: relative; } .main-navigation > ul > li a { font-family: 'Signika', Arial, Helvetica, sans-serif; font: 300; color:#ffffff; font-size:1.2em; } .main-navigation > ul > li a:hover, .main-navigation > ul li.current_page_item > a, .main-navigation > ul li.current_page_ancestor > a { color:#ee4c62; } .main-navigation > ul li .sub-menu { visibility: hidden; position: absolute; left: 0; top: 50px; width: 230px; padding: 20px 15px; background-color: #2d343e; background-color: rgba(45,52,62,1); text-align: center; border-radius: 3px; opacity: 0; filter: alpha(opacity=00); -webkit-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); -moz-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); -ms-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); -o-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); -webkit-transition: visibility 0s linear 0.3s, opacity 0.3s ease-out, -webkit-transform 0.3s ease-out; -moz-transition: visibility 0s linear 0.3s, opacity 0.3s ease-out, -moz-transform 0.3s ease-out; -ms-transition: visibility 0s linear 0.3s, opacity 0.3s ease-out, -ms-transform 0.3s ease-out; -o-transition: visibility 0s linear 0.3s, opacity 0.3s ease-out, -o-transform 0.3s ease-out; transition: visibility 0s linear 0.3s, opacity 0.3s ease-out, transform 0.3s ease-out; } .main-navigation > ul li:hover .sub-menu { visibility: visible; -webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 ); -moz-transform: translateY(0) perspective( 600px ) rotateX( 0 ); -ms-transform: translateY(0) perspective( 600px ) rotateX( 0 ); -o-transform: translateY(0) perspective( 600px ) rotateX( 0 ); transform: translateY(0) perspective( 600px ) rotateX( 0 ); opacity: 1; filter: alpha(opacity=100); transition-delay: 0s; } .main-navigation > ul li .sub-menu:before { position: absolute; top: -30px; left: 0; content:""; width: 100%; height: 50px; } .main-navigation > ul li .sub-menu:after { position: absolute; top: -10px; left: 110px; content:""; width: 0px; height: 0px; border-style: solid; border-width: 0 6px 10.4px 6px; border-color: transparent transparent #2d343e transparent; -webkit-transform:rotate(360deg); } .main-navigation > ul li .sub-menu li { display: inline-block; width: 100%; margin-bottom: 15px; font-size: 13px; } .main-navigation > ul li .sub-menu li:last-child { margin-bottom: 0; } .selectnav { display: none; } /* WordPress Default Menu */ .main-navigation > .menu > ul { display: inline-block; width: 100%; padding: 30px 0; } .main-navigation > .menu > ul > li { float: left; margin: 0 2.5%; position: relative; } .main-navigation > .menu > ul > li a { font-family: 'Signika', Arial, Helvetica, sans-serif; font: 300; color:#ffffff; font-size:1.2em; } .main-navigation > .menu > ul > li a:hover, .main-navigation > .menu > ul li.current_page_item > a, .main-navigation > .menu > ul li.current_page_ancestor > a { color:#ee4c62; } .main-navigation > .menu > ul li .sub-menu { visibility: hidden; position: absolute; left: 0; top: 50px; width: 230px; padding: 20px 15px; background-color: #2d343e; background-color: rgba(45,52,62,1); text-align: center; border-radius: 3px; opacity: 0; filter: alpha(opacity=00); -webkit-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); -moz-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); -ms-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); -o-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); -webkit-transition: visibility 0s linear 0.3s, opacity 0.3s ease-out, -webkit-transform 0.3s ease-out; -moz-transition: visibility 0s linear 0.3s, opacity 0.3s ease-out, -moz-transform 0.3s ease-out; -ms-transition: visibility 0s linear 0.3s, opacity 0.3s ease-out, -ms-transform 0.3s ease-out; -o-transition: visibility 0s linear 0.3s, opacity 0.3s ease-out, -o-transform 0.3s ease-out; transition: visibility 0s linear 0.3s, opacity 0.3s ease-out, transform 0.3s ease-out; } .main-navigation > .menu > ul li:hover .sub-menu { visibility: visible; -webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 ); -moz-transform: translateY(0) perspective( 600px ) rotateX( 0 ); -ms-transform: translateY(0) perspective( 600px ) rotateX( 0 ); -o-transform: translateY(0) perspective( 600px ) rotateX( 0 ); transform: translateY(0) perspective( 600px ) rotateX( 0 ); opacity: 1; filter: alpha(opacity=100); transition-delay: 0s; } .main-navigation > .menu > ul li .sub-menu:before { position: absolute; top: -30px; left: 0; content:""; width: 100%; height: 50px; } .main-navigation > .menu > ul li .sub-menu:after { position: absolute; top: -10px; left: 110px; content:""; width: 0px; height: 0px; border-style: solid; border-width: 0 6px 10.4px 6px; border-color: transparent transparent #2d343e transparent; -webkit-transform:rotate(360deg); } .main-navigation > .menu > ul li .sub-menu li { display: inline-block; width: 100%; margin-bottom: 15px; font-size: 13px; } .main-navigation > .menu > ul li .sub-menu li:last-child { margin-bottom: 0; } .main-navigation > .menu > ul li .children { display: none; } /* WordPress Default Menu */ .top-social-icons { float: right; width: 15%; padding: 20px 0; } .top-social-icons ul { display: inline-block; width: 100%; } .top-social-icons ul li { float: right; margin-left: 8px; } .top-social-icons ul li:last-child { margin-left: 0; } .top-social-icons ul li a { display: inline-block; background-color: #556274; border-radius: 50%; height: 38px; width: 38px; color: #ee4c62; text-align: center; padding: 11px 0; } .top-social-icons ul li a:hover { background-color: #ee4c62; color: #fff; } .header.on-scroll { padding: 0; } .header.on-scroll .logo { margin-top: -100px; } .header.on-scroll.on-touch .main-navigation { padding-bottom: 20px; } .header.on-scroll .main-navigation ul { padding: 32px 0 29px; } .header.on-scroll.on-touch .logo { margin-top: -80px; } .header.on-scroll.on-touch .top-social-icons { display: none; } /*---------------------------------------------------------------------------------*/ /* 3. Ronika Gallery Slider /*---------------------------------------------------------------------------------*/ .ronika-gallery-slider-bg { float: left; width: 100%; background: url(../images/slider/image-bg.jpg) no-repeat center; height: 800px; background-size: cover; padding-top: 187px; overflow: hidden; } .ronika-gallery-slider { width: 100%; height: 545px; overflow: hidden; } .ronika-gallery-items { width: 100%; height: 100%; } .ronika-gallery-items .item { width: 376px; margin: 3px; opacity: 0; filter: alpha(opacity=00); } .ronika-gallery-items .item-image img { max-width: 100%; } .ronika-gallery-items .item:hover .item-hover { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 ); -moz-transform: translateY(0) perspective( 600px ) rotateX( 0 ); -ms-transform: translateY(0) perspective( 600px ) rotateX( 0 ); -o-transform: translateY(0) perspective( 600px ) rotateX( 0 ); transform: translateY(0) perspective( 600px ) rotateX( 0 ); } .ronika-gallery-items .item-hover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 38px; background-color: rgb(238,76,98); background-color: rgba(238,76,98,0.8); text-align: left; overflow: hidden; opacity: 0; filter: alpha(opacity=00); z-index: 5; -webkit-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); -moz-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); -ms-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); -o-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); -webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-out; -ms-transition: -ms-transform 0.3s ease-out, opacity 0.3s ease-out; -o-transition: -o-transform: 0.3s ease-out, opacity 0.3s ease-out; transition: transform: 0.3s ease-out, opacity 0.3s ease-out; } .ronika-gallery-items .item.one-third .item-hover { padding: 48px 38px; } .ronika-gallery-items .item-hover a { color: #fff; } .ronika-gallery-items .item-hover h3 { font-size: 150%; padding-bottom: 10px; opacity: 0; filter: alpha(opacity=00); -webkit-transform: translate(0,-10px); -moz-transform: translate(0,-10px); -ms-transform: translate(0,-10px); -o-transform: translate(0,-10px); transform: translate(0,-10px); -webkit-transition: opacity 0.5s ease-out, -webkit-transform 0.5s ease-out; -moz-transition: opacity 0.5s ease-out, -moz-transform 0.5s ease-out; -ms-transition: opacity 0.5s ease-out, -ms-transform 0.5s ease-out; -o-transition: opacity 0.5s ease-out, -o-transform 0.5s ease-out; transition: opacity 0.5s ease-out, transform 0.5s ease-out; } .ronika-gallery-items .one-third .item-hover h3 { position: relative; z-index: -5; padding-bottom: 5px; margin-top: 5px; } .ronika-gallery-items .item:hover h3 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0); } .ronika-gallery-items .item-hover p { font-size: 87.5%; line-height: 140%; opacity: 0; filter: alpha(opacity=00); -webkit-transform: translate(0,30px); -moz-transform: translate(0,30px); -ms-transform: translate(0,30px); -o-transform: translate(0,30px); transform: translate(0,30px); -webkit-transition: opacity 0.3s ease-out, -webkit-transform 0.3s ease-out; -moz-transition: opacity 0.3s ease-out, -moz-transform 0.3s ease-out; -ms-transition: opacity 0.3s ease-out, -ms-transform 0.3s ease-out; -o-transition: opacity 0.3s ease-out, -o-transform 0.3s ease-out; transition: opacity 0.3s ease-out, transform 0.3s ease-out; } .ronika-gallery-items .item:hover .item-hover h3, .ronika-gallery-items .item:hover .item-hover p { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0); } .ronika-gallery-items .item-hover .item-link { background:#fff; border-radius:50%; height:40px; width:40px; color:#ee4c62; text-align:center; padding:11px 0; display: inline-block; position: absolute; bottom: 20px; right: 23px; opacity: 0; filter: alpha(opacity=00); -webkit-transform: translate(0,-10px); -moz-transform: translate(0,-10px); -ms-transform: translate(0,-10px); -o-transform: translate(0,-10px); transform: translate(0,-10px); -webkit-transition: opacity 0.5s linear, -webkit-transform 0.5s ease-out; -moz-transition: opacity 0.5s linear, -moz-transform 0.5s ease-out; -ms-transition: opacity 0.5s linear, -ms-transform 0.5s ease-out; -o-transition: opacity 0.5s linear, -o-transform 0.5s ease-out; transition: opacity 0.5s linear, transform 0.5s ease-out; } .ronika-gallery-items .item-hover .item-link span:before { content: "\e0af"; } .ronika-gallery-items .item-hover .item-view { background:#fff; border-radius:50%; height:40px; width:40px; color:#ee4c62; text-align:center; padding:11px 0; display: inline-block; position: absolute; bottom: 20px; right: 68px; opacity: 0; filter: alpha(opacity=00); -webkit-transform: translate(0,-10px); -moz-transform: translate(0,-10px); -ms-transform: translate(0,-10px); -o-transform: translate(0,-10px); transform: translate(0,-10px); -webkit-transition: opacity 0.5s linear, -webkit-transform 0.5s ease-out; -moz-transition: opacity 0.5s linear, -moz-transform 0.5s ease-out; -ms-transition: opacity 0.5s linear, -ms-transform 0.5s ease-out; -o-transition: opacity 0.5s linear, -o-transform 0.5s ease-out; transition: opacity 0.5s linear, transform 0.5s ease-out; } .ronika-gallery-items .item:hover .item-link, .ronika-gallery-items .item:hover .item-view { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0); } .ronika-gallery-items .item-hover .item-view.image span:before { content: "\e152"; } .ronika-gallery-items .item-hover .item-view.video span:before { content: "\e0dc"; } .ronika-gallery-items .item-hover .item-format { float: left; width: 60px; height: 60px; padding: 11px 0; display: inline-block; background:#fff; border-radius:50%; color:#ee4c62; text-align: center; font-size: 2em; margin-right: 15px; opacity: 0; filter: alpha(opacity=00); -webkit-transform: translate(0,-10px); -moz-transform: translate(0,-10px); -ms-transform: translate(0,-10px); -o-transform: translate(0,-10px); transform: translate(0,-10px); -webkit-transition: opacity 0.5s ease-out, -webkit-transform 0.5s ease-out; -moz-transition: opacity 0.5s ease-out, -moz-transform 0.5s ease-out; -ms-transition: opacity 0.5s ease-out, -ms-transform 0.5s ease-out; -o-transition: opacity 0.5s ease-out, -o-transform 0.5s ease-out; transition: opacity 0.5s ease-out, transform 0.5s ease-out; } .ronika-gallery-items .item-hover .item-format.image span:before { content: "\e015"; } .ronika-gallery-items .item-hover .item-format.video span:before { content: "\e01a"; } .ronika-gallery-items .item-hover .item-format.video { padding: 13px 0; } .ronika-gallery-items .item:hover .item-format { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0); } .ronika-gallery-items .item-hover .item-meta { display: inline-block; width: 70%; font-size: 0.875em; opacity: 0; filter: alpha(opacity=00); -webkit-transform: translate(0,10px); -moz-transform: translate(0,10px); -ms-transform: translate(0,10px); -o-transform: translate(0,10px); transform: translate(0,10px); -webkit-transition: opacity 0.5s ease-out, -webkit-transform 0.5s ease-out; -moz-transition: opacity 0.5s ease-out, -moz-transform 0.5s ease-out; -ms-transition: opacity 0.5s ease-out, -ms-transform 0.5s ease-out; -o-transition: opacity 0.5s ease-out, -o-transform 0.5s ease-out; transition: opacity 0.5s ease-out, transform 0.5s ease-out; } .ronika-gallery-items .item:hover .item-meta { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0); } .isotope-item { z-index: 2; opacity: 0; filter: alpha(opacity=00); -webkit-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); -moz-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); -ms-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); -o-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); } .isotope-item.stage-ready { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 ); -moz-transform: translateY(0) perspective( 600px ) rotateX( 0 ); -ms-transform: translateY(0) perspective( 600px ) rotateX( 0 ); -o-transform: translateY(0) perspective( 600px ) rotateX( 0 ); transform: translateY(0) perspective( 600px ) rotateX( 0 ); -webkit-transition: -webkit-transform 0.9s ease-out, opacity 0.9s ease-out; -moz-transition: -moz-transform 0.9s ease-out, opacity 0.9s ease-out; -ms-transition: -ms-transform 0.9s ease-out, opacity 0.9s ease-out; -o-transition: -o-transform: 0.9s ease-out, opacity 0.9s ease-out; transition: transform: 0.9s ease-out, opacity 0.9s ease-out; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } #scrollbar { opacity: 0; filter: alpha(opacity=00); height: 12px; border-radius: 0; background-color: rgba(45, 52, 62, 0.25); border: none; margin-top: -12px; position: relative; } html.touch #scrollbar, html.no-opacity #scrollbar { opacity: 1; filter: alpha(opacity=100); } #scrollbar .handle { height: 12px; border-radius: 0; background-color: #ee4c62; border: none; } /* overlay at start */ .mfp-fade.mfp-bg { opacity: 0; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } /* overlay animate in */ .mfp-fade.mfp-bg.mfp-ready { opacity: 0.8; } /* overlay animate out */ .mfp-fade.mfp-bg.mfp-removing { opacity: 0; } /* content at start */ .mfp-fade.mfp-wrap .mfp-content { opacity: 0; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } /* content animate it */ .mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; } /* content animate out */ .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; } /*---------------------------------------------------------------------------------*/ /* 4. Main Content /*---------------------------------------------------------------------------------*/ .content-container { float: left; width: 100%; padding: 80px 0; line-height: 1.5em; overflow: hidden; } .content-container.bg-image { overflow-y: hidden; } .peresentaion-page { color: #ffffff !important; background-color: #556274 !important; } .image-content { color: rgb(255, 255, 255); padding-top: 130px; padding-bottom: 130px; text-align: center; background-image: url(../images/image-bg.jpg); background-position: 50% -656.8000000000001px; background-repeat: no-repeat no-repeat; } .image-content h3 { font-size: 3.5em !important; } .content-container.parallax-effect { background-attachment: fixed; } .dark-background { background-color: #2d343e; color: #fff; } .light-background { background-color: #ffffff; color: #2d343e; } .services { color: #ffffff; background-color: #2d343e; padding-top: 80px; padding-bottom: 80px; } .testimonial { color: rgb(255, 255, 255); padding-top: 80px; padding-bottom: 50px; text-align: center; background-image: url(../images/testimonial/Ronika-4162013-1140-.png); background-position: 50% -1050px; background-repeat: no-repeat no-repeat; } .content-typography h1 { font-size: 3em; line-height: 1.2em; } .content-typography h2 { font-size: 2.75em; line-height: 1.2em; } .content-typography h3 { font-size: 1.875em; line-height: 1.2em; } .content-typography h4 { font-size: 1.5em; line-height: 1.2em; } .content-typography h5 { font-size: 1.25em; line-height: 1.2em; } .content-typography h6 { font-size: 1em; line-height: 1.2em; } .content-typography p { font-size: 1em; line-height: 1.4em; } .content-title { font-size: 3.4375em !important; line-height: 1em !important; margin-bottom: 70px; overflow: hidden; } .content-title.shortcode { margin-bottom: 0; } .content-title span { display: inline-block; color:#ee4c62; margin:0 5px 0 -4px; position: relative; z-index: 5; } .content-title strong { display: inline-block; font-style: normal; font-weight: normal; } .centering .content-title span { display: none; } .footer { float: left; width: 100%; background-color: #556274; padding: 30px 0; text-align: center; font-size: 1.125em; line-height: 1.6em; } .footer-social-icons { display: inline-block; width: 100%; text-align: center; margin-top: 10px; } .footer-social-icons li { display: inline-block; } .footer-social-icons li a { padding: 0 5px; } /*---------------------------------------------------------------------------------*/ /* 5. Contact Form 7 /*---------------------------------------------------------------------------------*/ .wpcf7 label { width:22%; float: left; font-size: 1.5em; line-height:1.2em; } .wpcf7 p { margin-bottom: 30px; display: inline-block; width: 100%; } .wpcf7 p:last-child { margin-bottom: 0; } .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="url"], .wpcf7 input[type="number"], .wpcf7 input[type="date"], .wpcf7 select { border: none; background: #556274; width: 78%; height: 40px; font-size: 1em; color: #ffffff; padding: 10px; outline: none; border-radius: 3px; } .wpcf7 input[type="range"] { padding: 0; margin: 0; width: 78%; } .wpcf7 textarea { border: none; background: #556274; width: 78%; height: 160px; font-size: 1em; color: #ffffff; outline: none; padding: 10px; text-align: left; resize: none; border-radius: 3px; } .wpcf7 .wpcf7-submit { float: right; color: #ffffff; width: 110px; height: 40px; background: #ee4c62; font-size: 1.25em; border-radius: 3px; border: 0; -webkit-transition: background-color 0.3s ease-out, color 0.3s ease-out; -moz-transition: background-color 0.3s ease-out, color 0.3s ease-out; -ms-transition: background-color 0.3s ease-out, color 0.3s ease-out; -o-transition: background-color 0.3s ease-out, color 0.3s ease-out; transition: background-color 0.3s ease-out, color 0.3s ease-out; } .wpcf7-not-valid-tip { display: none; } input.wpcf7-not-valid, textarea.wpcf7-not-valid { border: 1px solid red !important; } .wpcf7 .wpcf7-submit:hover{ background: #ffffff; color: #ee4c62; cursor: pointer; } .wpcf7 .wpcf7-submit:focus{ background: #ffffff; color: #ee4c62; } .wpcf7-response-output { border: 0 !important; margin: 0 !important; padding: 15px 0 0 0 !important; font-size: 14px !important; line-height: 140%; } div.wpcf7-mail-sent-ng { color: #ff0000; } div.wpcf7-mail-sent-ok { color: #398f14; } div.wpcf7-spam-blocked { color: #ffa500; } div.wpcf7-validation-errors { color: #f7e700; } .wpcf7 p input::-webkit-input-placeholder, .wpcf7 textarea::-webkit-input-placeholder { color: #aeaeae; } .wpcf7 p input::-moz-input-placeholder, .wpcf7 textarea::-moz-input-placeholder { color: #aeaeae; } .wpcf7 p input:-ms-input-placeholder, .wpcf7 textarea:-ms-input-placeholder { color: #aeaeae; } /*---------------------------------------------------------------------------------*/ /* 6. Page & Blog /*---------------------------------------------------------------------------------*/ .blog-container { float: left; width: 100%; background-color: #fff; padding: 70px 0; margin-top: 120px; color: #2d343e; } .blog-container.blog-1 .blog-title { margin-bottom: 120px; } .blog-container.blog-2 .blog-title { margin-bottom: 70px; } .blog-container article { display: inline-block; width: 100%; margin-bottom: 100px; } .blog-container.blog-2 article { margin-bottom: 70px; } body.page-template-default .blog-container.blog-2 article { margin-bottom: 0; } .entry-format { display: inline-block; width: 80px; height: 80px; text-align: center; padding: 22px 0; background-color: #ee4c62; color: #fff; border-radius: 50%; font-size: 2em; } .entry-format:before { content: "\e02c"; } .entry-format.gallery:before { content: "\e012"; } .entry-format.audio:before { content: "\e019"; } .entry-format.video:before { content: "\e01d"; } .entry-format.link:before { content: "\e0af"; } .entry-format.quote:before { content: "\e06a"; } .entry-meta { margin-top: 30px; padding-left: 13px; border-left: 2px solid #ee4c62; color: #ababab; } .entry-meta span { display: inline-block; width: 100%; margin-bottom: 6px; line-height: 140%; } .entry-meta span:last-child { margin-bottom: 0; } .entry-content > h2 { font-size: 2.25em; padding-bottom: 25px; word-wrap: break-word; -ms-word-wrap: break-word; } .blog-container.blog-2 .entry-content > h2 { padding-bottom: 15px; } .blog-container.blog-2 article.meta-hide .entry-content > h2 { padding-bottom: 20px; } .entry-content > h2 a:hover { color: #2d343e; } .entry-content > figure { padding-bottom: 25px; } .entry-content > figure > iframe { width: 100%; } .entry-content > .content { /*color: #2d343e;*/ line-height: 1.5em; } .entry-content > .content p { margin-bottom: 15px; word-wrap: break-word; -ms-word-wrap: break-word; } .entry-content > .content p:last-child { margin-bottom: 0; } .entry-content > .more-link { display: inline-block; color: #2d343e; font-weight: bold; margin-top: 25px; } .entry-content > .more-link:hover { color: #ee4c62; } .entry-meta-mobile { display: none; margin: 14px 0 18px 2px; padding-left: 13px; border-left: 2px solid #ee4c62; color: #ababab; } .entry-meta span { display: inline-block; margin-left: 10px; } .entry-tags { display: block; margin-top: 30px; line-height: 140%; } .entry-tags .entry-tags-title { color: #2d343e; } .blog-container.blog-2 .entry-meta-mobile { display: block; margin-top: 0; } .post-link { text-align: center; margin-bottom: 10px; background: #fafafa; padding: 10px 25px; } .post-quote { display: inline-block; width: 100%; text-align: center; padding: 0 50px 0 50px; margin: 20px 0 25px 0; } .post-quote h4 { font-size: 150% !important; line-height: 140% !important; font-weight: normal !important; margin: 0 !important; } .post-quote span { display: inline-block; margin-top: 10px; color: #909090; } .sidebar { padding-left: 70px; padding-top: 5px; } .search-box { display: inline-block; width: 100%; position: relative; border: 2px solid #c2c3c5; height: 45px; } .search-box .search-box-text { width: 100%; height: 100%; padding: 5px 15px; border: none; font-size: 1em; } .search-box .search-box-submit { position: absolute; right: 0; top: 0; width: 35px; height: 100%; border: none; background: url('images/search-button.png') no-repeat center center; } .search-box .search-box-submit:hover { cursor: pointer; } .ronika-pagination { display: inline-block; width: 100%; } .ronika-pagination span { float: left; margin-right: 5px; background-color: #ee4c62; color: #fff; border-radius: 50%; padding: 11px; width: 38px; height: 38px; text-align: center; } .ronika-pagination a { float: left; display: inline-block; background-color: #556274; color: #fff; border-radius: 50%; padding: 11px; width: 38px; height: 38px; text-align: center; margin-right: 5px; } .ronika-pagination a:hover { background-color: #ee4c62; } .page-container { float: left; width: 100%; background-color: #fff; padding: 70px 0; margin-top: 120px; color: #2d343e; } .page-container .content-title { margin-bottom: 40px; } .single-sharing { margin-top: 30px; } .single-sharing > span { float: left; font-size: 1.125em; font-weight: bold; margin-top: 7px; } .single-sharing ul { float: right; } .single-sharing ul li { float: right; margin: 0 0 0 10px; } .single-sharing ul li a { float: right; display: inline-block; background-color: #ee4c62; color: #fff; border-radius: 50%; height: 38px; width: 38px; text-align: center; padding: 11px 0; } .single-sharing ul li a:hover { color: #ee4c62; background-color: #556274; } .post-password-required input[type="password"] { padding: 5px; } .post-password-required input[type="submit"] { padding: 5px 10px; background-color: #ee4c62; color:#fff; margin: 0; padding: 8px 18px; border:none; font-size: 14px; border-radius: 3px; -webkit-transition: background-color 0.1s linear, color 0.2s linear; -moz-transition: background-color 0.1s linear, color 0.2s linear; -o-transition: background-color 0.1s linear, color 0.2s linear; -ms-transition: background-color 0.1s linear, color 0.2s linear; transition: background-color 0.1s linear, color 0.2s linear; } .post-password-required input[type="submit"]:hover { cursor: pointer; background-color: #556274; color: #ffffff; } .entry-content > .content h1, .entry-content > .content h2, .entry-content > .content h3, .entry-content > .content h4, .entry-content > .content h5, .entry-content > .content h6 { line-height: 120%; word-wrap: break-word; -ms-word-wrap: break-word; } .entry-content > .content h1 { font-size: 2.75em; margin: 20px 0; } .entry-content > .content h2 { font-size: 2.25em; margin: 22px 0; } .entry-content > .content h3 { font-size: 1.875em; margin: 24px 0; } .entry-content > .content h4 { font-size: 1.5em; margin: 28px 0; } .entry-content > .content h5 { font-size: 1.25em; margin: 30px 0; } .entry-content > .content h6 { font-size: 1em; margin: 33px 0; } .entry-content > .content ul,ol,dl { margin-left: 15px; } .entry-content > .content ol { list-style: decimal inside; } .entry-content > .content ul { list-style: square inside; } .entry-content > .content ul, .entry-content > .content ol { margin-bottom: 15px; } .entry-content > .content ul ul, .entry-content > .content ol ol, .entry-content > .content ul ol, .entry-content > .content ol ul { margin-bottom: 0; } .entry-content > .content ul, .entry-content > .content ul ul { margin: 0; list-style: none; } .entry-content > .content address { margin-bottom: 15px; } .entry-content > .content .ronika-gallery-items .item-hover h3 { font-size: 150%; padding: 0 0 10px 0; margin: 0; line-height: 1; } .entry-content > .content .ronika-gallery-items .one-third .item-hover h3 { padding: 0 0 5px 0; margin: 5px 0 0 0; line-height: 1; } .entry-content > .content .ronika-gallery-items .item-hover p { font-size: 87.5%; line-height: 140%; margin: 0; padding: 0; } /*---------------------------------------------------------------------------------*/ /* 7. WordPress Requirements /*---------------------------------------------------------------------------------*/ .wp-caption { text-align: center; margin: 0 20px 20px 20px; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; max-width: 100%; } .wp-caption .wp-caption-text { margin: 0; padding: 5px; } .sticky{ } .gallery-caption{ } .bypostauthor{ } .hidden { display: none; } .alignleft { float: left; } .alignright { float: right; } .aligncenter { margin-left: auto; margin-right: auto; display: block; clear: both; } .wp-caption.aligncenter { margin: 20px auto; } .wp-caption.alignleft { margin-left: 0; } .wp-caption.alignright { margin-right: 0; } .wp-caption.alignnone { margin-left: 0; } blockquote { margin-left: 20px; margin-bottom: 20px; margin-top: 20px; padding: 5px 0 5px 10px; border-left: 5px solid #eaeaea; font-style: italic; } blockquote.featured-quote { padding: 0; margin: 0 auto; border: none; color: inherit; font-style: normal; } img.alignleft { float: left; margin: 0 30px 20px 0; } img.alignright { display: block; margin: 0 0 20px 30px; } img.aligncenter { display: block; clear: both; margin: 0 auto; } img.alignnone { display: block; margin: 0 0; } caption { text-align: left; } address { font-style: italic; } abbr[title], acronym[title], dfn[title] { cursor: help; border-bottom: 1px dotted #666; } strong { font-weight: bold; } em,dfn,cite { font-style: italic; } dfn { font-weight: bold; } sup { font-size: 11px; vertical-align: top; } sub { font-size: 11px; vertical-align: bottom; } small { font-size: 11px; } del { text-decoration: line-through; } ins { text-decoration: underline; } code, pre { line-height: 18px; } var, kbd, samp, code, pre { font: 14px/19px Courier, "Courier New", monospace; background: #f5f5f5; color: #333; margin-left: 5px; margin-right: 5px; } kbd { font-weight: bold; } samp, var { font-style: italic; } code { padding:0px 3px; } pre { background: #f5f5f5; color: #666; font-family: monospace; font-size: 14px; margin: 20px 0; overflow: auto; padding: 20px; white-space: pre; white-space: pre-wrap; word-wrap: break-word; } table { border: 1px solid #999; border-width: 1px; line-height: 18px; text-align: left; border-collapse:collapse; width: 100%; } table .even { background: #ddd; } caption { text-align: left; } tr { border-bottom: 1px solid #999; } th, td { padding: 5px; vertical-align: middle; text-align: center; } dt { font-weight: bold; } dd { margin-bottom: 20px; } .not-found-404 { text-align: center; color: #ee4c62; padding: 50px 0; } .not-found-404 h2 { font-size: 12em; } .not-found-404 h3 { font-size: 4em; } /* ========================================================================== 8. Comment Form ========================================================================== */ #respond-inputs p { float: left; width: 31%; margin-left: 3.5%; } #respond-inputs p:first-child { margin-left: 0; } #respond-inputs p input { display: inline-block; width: 100%; padding: 8px 18px; background-color: #d2d3d4; border:none; font-size: 100%; color: #ffffff; border-radius: 3px; } #comment-text textarea { display: inline-block; width: 100%; padding: 8px 18px; background-color: #d2d3d4; border:none; font-size: 100%; color: #ffffff; margin: 20px 0 30px 0; border-radius: 3px; } #respond-inputs p input::-webkit-input-placeholder, #comment-text textarea::-webkit-input-placeholder { color: #ffffff; } #respond-inputs p input::-moz-input-placeholder, #comment-text textarea::-moz-input-placeholder { color: #ffffff; } #respond-inputs p input:-ms-input-placeholder, #comment-text textarea:-ms-input-placeholder { color: #ffffff; } #reply-title { margin: 50px 0 20px 0; } #submit { float: right; background-color: #ee4c62; color:#fff; margin: 0; padding: 8px 18px 9px; border:none; font-size: 106.3%; border-radius: 3px; -webkit-transition: background-color 0.1s linear, color 0.2s linear; -moz-transition: background-color 0.1s linear, color 0.2s linear; -o-transition: background-color 0.1s linear, color 0.2s linear; -ms-transition: background-color 0.1s linear, color 0.2s linear; transition: background-color 0.1s linear, color 0.2s linear; } #submit:hover { cursor: pointer; background-color: #556274; color: #ee4c62; } /* ========================================================================== 9. Comments list ========================================================================== */ .nocomments { margin: 0; } .comments-title { font-size: 137.5%; margin: 0 0 35px 0; padding-bottom: 10px; border-bottom: 5px solid #d2d3d5; } .comments-title span { color: #ee4c62; font-size: 125%; } .comments-list { display: inline-block; width: 100%; } .comments-list li { margin: 0 0 25px 100px; } .comments-list li .dipest-comment { margin: 0 0 25px 0px; } .comments-list li > div { position: relative; padding: 0 0 18px 0; } .avatar-border { position: absolute; left: -100px; top: 0; } .avatar-border img { border-radius: 50%; } .comment-meta { display: inline-block; width: 100%; padding-bottom: 15px; } .comment-author { font-size: 1.5em; color: #30353b; } .comment-author cite { font-style: normal; } .comment-author a { color: #30353b; } .comment-reply-link { float: right; color:#ee4c62; font-size: 13px; margin-top: 4px; margin-left: 15px; } .comment-reply-link:hover { text-decoration: underline; } .comment-time { display: block; color: #aeaeae; font-size: 13px; margin-top: 15px; } .comment-body { font-size: 14px; line-height: 150%; } .comment-triangle { background: url(images/comment-triangle.png) no-repeat center center; width: 16px; height: 24px; position: absolute; top: 21px; left: -16px; } .comment-edit-link { font-size: 81.5%; } #cancel-comment-reply-link:before { content: " / "; } #cancel-comment-reply-link { font-size: 13px; } .comment #respond input, .comment #respond textarea { box-shadow: 0px 0px 2px #DBDBF4; } .moderation { display: inline-block; font-size: 81.5%; padding: 5px 10px; margin-bottom: 10px; color:#fff; background-color: #ee4c62; } .nopassword { font-size: 14px; } .comment .children { margin-top: 20px; } .children li { margin-bottom: 20px; } .comment #reply-title { margin-top: 0; } .logged-in-as { font-size: 14px; } .pings-title { margin: 30px 0 0 0; } .pinglist { margin: 25px 0 0 0; } .pinglist li { display: inline-block; width: 100%; margin-bottom: 15px; background-color: #fff; line-height: 150%; font-size: 14px; } .comment-body h1 { line-height: 140%; margin-bottom: 20px; } .comment-body h2 { line-height: 140%; margin-bottom: 20px; } .comment-body h3 { line-height: 140%; margin-bottom: 20px; } .comment-body h4 { line-height: 140%; margin-bottom: 20px; } .comment-body h5 { line-height: 140%; margin-bottom: 20px; } .comment-body h6 { line-height: 140%; margin-bottom: 20px; } .comment-body p { margin-bottom:10px; } .comment-body p:last-child { margin-bottom:0; } .comment-body ul, ol{ margin-left:15px; } .comment-body ul, ol, dl { margin-bottom:20px; } .comment-body dd { margin-bottom:10px; } .comment-body ul li { margin: 0; list-style: square inside; } .comment-body ol li { margin: 0; list-style: decimal inside; } .comment-body table { margin-bottom: 30px; } /*---------------------------------------------------------------------------------*/ /* 10. Widgets /*---------------------------------------------------------------------------------*/ .widget { display: inline-block; width: 100%; margin-bottom: 70px; } .widget > h3 { font-size: 1.5em; margin-bottom: 30px; } .widget > h3 span { display: inline-block; color:#ee4c62; margin:0 8px 0 0; position: relative; z-index: 5; } .widget.widget_latest_portfolio ul { display: inline-block; width: 100%; text-align: center; } .widget.widget_latest_portfolio ul li { display: inline-block; width: 45%; max-width: 136px; border: 5px solid #c2c3c5; margin: 0 2.1% 20px; -webkit-transition: border 0.3s ease-out; -moz-transition: border 0.3s ease-out; -ms-transition: border 0.3s ease-out; -o-transition: border 0.3s ease-out; transition: border 0.3s ease-out; } .widget.widget_latest_portfolio ul li:hover { border-color: #ee4c62; } .widget ul li { margin: 0 0 13px 16px; line-height: 140%; } .widget ul li:last-child { margin-bottom: 0; } .widget ul li a:hover { color: #2d343e; } .widget select { padding: 10px 15px; } #wp-calendar { width: 100%; } #wp-calendar caption { padding-bottom: 10px; } .widget ul li .children { margin: 15px 0 0 15px; } .widget_rss ul li { margin-bottom: 15px; } .widget_rss ul li:last-child { margin-bottom: 15px; } .rss-date { font-size: 12px; color: #999; } .rssSummary { margin-top: 5px; font-size: 13px; } .textwidget { line-height: 140%; } .tagcloud { display: inline-block; } .tagcloud a { float: left; margin: 0 10px 10px 0; padding:10px; background-color: #ee4c62; color: #fff; font-size: 1em !important; } .tagcloud a:hover { color: #ee4c62; background-color: #fff; } /*---------------------------------------------------------------------------------*/ /* 11. Shortcodes /*---------------------------------------------------------------------------------*/ .gap { clear: both; width: 100%; margin: 0; } .alert-message { display: inline-block; width: 100%; padding: 18px 20px; text-align: left; margin-bottom: 10px; line-height: 150%; font-size: 16px; border-radius: 3px; } .alert-message:hover { cursor: pointer; } .alert-message.notification { background: #fff; color: #2d343e; box-shadow: 0px 0px 1px #c2c3c5; } .alert-message.warning { background: #eeaf4c; color: #fff; } .alert-message .retina-icon { float: right; font-size: 1.5em; } .alert-message.error { background: #ee4c62; color: #fff; } .alert-message.success { background: #4cee9c; color: #fff; } .alert-message.info { background: #4c98ee; color: #fff; } .ronika-button { display: inline-block; padding: 9px 20px; font-size: 20px; border-radius: 3px; } .ronika-button.default { color: #fff; background-color: #ee4c62; } .ronika-button.default:hover { background-color: #fff; color: #ee4c62; } .ronika-button.red { color: #fff; background-color: #ee4c62; } .ronika-button.red:hover { color: #ee4c62; background-color: #fff; box-shadow: inset 0 0 0 1px #ee4c62; } .ronika-button.white { color: #ee4c62; background-color: #fff; box-shadow: inset 0 0 0 1px #ee4c62; } .ronika-button.white:hover { background-color: #ee4c62; color: #fff; } .ronika-button.blue { color: #fff; background-color: #4c98ee; } .ronika-button.blue:hover { background-color: #fff; color: #4c98ee; box-shadow: inset 0 0 0 1px #4c98ee; } .ronika-button.black { color: #fff; background-color: #303030; } .ronika-button.black:hover { background-color: #fff; color: #303030; box-shadow: inset 0 0 0 1px #303030; } .ronika-button.small { font-size: 16px; padding: 5px 20px; } .ronika-button.medium { font-size: 20px; } .ronika-button.large { font-size: 24px; padding-top: 13px; padding-bottom: 13px; line-height: 1; } .skill { display: inline-block; padding: 12px 15px; background-color: #ee4c62; color: #fff; margin-bottom: 10px; border-radius: 3px; } .skill:last-child { margin-bottom: 0; } .icon-container { display: inline-block; width: 100%; font-size: 1.125em; padding: 0 0 0 0; margin-bottom: 15px; line-height: 1.6em; } .ronika-icon { float: left; width: 38px; height: 38px; padding: 11px 0; text-align: center; background-color: #556274; color: #ee4c62; border-radius: 50%; font-size: 16px; line-height: 1; } .ronika-icon.medium { font-size: 32px; width: 58px; height: 58px; padding: 12px 0; } .ronika-icon.large { font-size: 64px; width: 98px; height: 98px; padding: 15px 0; } .icon-content { font-size: 18px; margin-left: 53px; margin-top: 5px; } .icon-content.medium { margin-left: 73px; } .icon-content.large { margin-left: 113px; } .ronika-tagline { display: inline-block; width: 100%; padding: 0 3.5%; text-align:left; } .ronika-tagline h2 { float:left; font-size: 2.25em; line-height: 1.4em; color:#ffffff; } .ronika-tagline-button { float: right; background: #ee4c62; color: #ffffff; font-size: 1.5em; padding: 13px 1.14035087719298%; border-radius: 3px; } .ronika-tagline-button:hover { background: #ffffff; color: #ee4c62; } .services-container { text-align: center; } .service-circle-container { display: inline-block; width: 33%; text-align: center; vertical-align: middle; } .service-circle { display: inline-block; background-color: #ee4c62; border-radius: 50%; height: 350px; width: 100%; max-width: 350px; text-align: center; -webkit-transition: background-color 0.3s ease-out, color 0.3s ease-out; -moz-transition: background-color 0.3s ease-out, color 0.3s ease-out; -ms-transition: background-color 0.3s ease-out, color 0.3s ease-out; -o-transition: background-color 0.3s ease-out, color 0.3s ease-out; transition: background-color 0.3s ease-out, color 0.3s ease-out; } .service-circle h2 { font-size:2.25em; line-height:1em; margin-top: 10px; } .service-circle h2 a { color: #fff; } .service-circle p { margin-top: 10px; font-size:0.875em; line-height:1.4em; padding:0 25px; max-height:108px; } .service-circle:hover { background:#ffffff; color:#ee4c62; } .service-circle:hover a { color:#ee4c62; } .service-circle-content { padding: 17% 8%; } .service-circle-font-icon { font-size: 4.375em; } .ronika-highlight { /*display: inline-block;*/ color:#ffffff; background-color:#ee4c62; padding:4px 8px; } .featured-portfolio { text-align: center; margin-top: 100px !important; } .portfolio-item { /*height: 315px;*/ margin-bottom: 45px; } .featured-portfolio .portfolio-image { position: relative; } .featured-portfolio .portfolio-image img { width: 100%; } .featured-portfolio h3 { padding: 25px 0 10px; font-size: 1.5em; } .featured-portfolio h3 a { color: #2d343e; } .featured-portfolio h3 a:hover { color: #ee4c62; } .featured-portfolio p { padding: 0 5%; line-height: 1.4em; } .featured-portfolio .portfolio-hover { position: absolute; width: 100%; height: 100%; background: rgb(238,76,98); background: rgba(238,76,98,0.8); opacity: 0; filter: alpha(opacity=00); left: 0; top: 0; display: table; -webkit-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); -moz-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); -ms-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); -o-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); -webkit-transition: opacity 0.3s ease-out, -webkit-transform 0.3s ease-out; -moz-transition: opacity 0.3s ease-out, -moz-transform 0.3s ease-out; -ms-transition: opacity 0.3s ease-out, -ms-transform 0.3s ease-out; -o-transition: opacity 0.3s ease-out, -o-transform 0.3s ease-out; transition: opacity 0.3s ease-out, transform 0.3s ease-out; } .featured-portfolio .portfolio-hover .item-format-center { display: table-cell; vertical-align: middle; text-align: center; } .featured-portfolio .portfolio-hover .item-format { width: 60px; height: 60px; padding: 11px 0; display: inline-block; background:#fff; border-radius:50%; color:#ee4c62; text-align: center; font-size: 32px; opacity: 0; filter: alpha(opacity=00); -webkit-transform: translate(0,-10px); -moz-transform: translate(0,-10px); -ms-transform: translate(0,-10px); -o-transform: translate(0,-10px); transform: translate(0,-10px); -webkit-transition: opacity 0.5s ease-out, -webkit-transform 0.5s ease-out; -moz-transition: opacity 0.5s ease-out, -moz-transform 0.5s ease-out; -ms-transition: opacity 0.5s ease-out, -ms-transform 0.5s ease-out; -o-transition: opacity 0.5s ease-out, -o-transform 0.5s ease-out; transition: opacity 0.5s ease-out, transform 0.5s ease-out; } .featured-portfolio .portfolio-hover .item-format.image span:before { content: "\e015"; } .featured-portfolio .portfolio-hover .item-format.video span:before { content: "\e01a"; } .featured-portfolio .portfolio-hover .item-format.video { padding: 13px 0; } .featured-portfolio .portfolio-image:hover .item-format { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0); } .featured-portfolio .portfolio-image:hover .portfolio-hover { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 ); -moz-transform: translateY(0) perspective( 600px ) rotateX( 0 ); -ms-transform: translateY(0) perspective( 600px ) rotateX( 0 ); -o-transform: translateY(0) perspective( 600px ) rotateX( 0 ); transform: translateY(0) perspective( 600px ) rotateX( 0 ); } .wtsay-content { width: 95%; margin: 0 auto; text-align: left; } .wtsay-content ul { display: inline-block; width: 100%; } .wtsay-content ul li { float: left; width: 47%; margin-left: 3%; margin-bottom: 30px; } .wtsay-content ul li h3 { font-size:1.75em; line-height:1.4em; } .wtsay-content ul li p { font-size:0.875em; line-height:1.5em; } .wtsay-circle { float:left; margin:0 4% 0 0; width:27%; max-width: 136px; background-color: #c7d3df; border-radius: 50%; border: 8px solid #ffffff; -webkit-transition: border 0.3s ease-out; -moz-transition: border 0.3s ease-out; -ms-transition: border 0.3s ease-out; -o-transition: border 0.3s ease-out; transition: border 0.3s ease-out; } .wtsay-circle:hover { background-color: #ffffff; border: 8px solid #ee4c62; } .wtsay-circle img { border-radius: 50%; } .wtsay-context { float: left; width: 69%; } .our-team { margin-top: 40px; } .team-members { display: inline-block; width: 100%; text-align: center; } .team-members > li { display: inline-block; height:253px; width:253px; background-color: #849899; border-radius: 50%; margin: 0 1% 20px; position: relative; -webkit-backface-visibility: hidden; } .team-members > li img { width: 100%; height: 100%; border-radius: 50%; border: 0 solid #ee4c62; -webkit-transition: border 0.3s ease-out; -moz-transition: border 0.3s ease-out; -ms-transition: border 0.3s ease-out; -o-transition: border 0.3s ease-out; transition: border 0.3s ease-out; } .team-members > li:hover img { border: 10px solid #ee4c62; } .team-members > li .team-hover { position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 50%; background: rgb(238,76,98); background: rgba(238,76,98,0.8); opacity: 0; filter: alpha(opacity=00); padding: 60px 30px; color: #fff; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -ms-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } .team-members > li:hover .team-hover { opacity: 1; filter: alpha(opacity=100); } .team-members > li h4 { font-size: 1.5em; padding-bottom: 5px; } .team-members > li p { font-size: 0.875em; } .team-social-icons { display: inline-block; width: 100%; text-align: center; margin-top: 30px; } .team-social-icons li { display: inline-block; margin: 0 5px; } .team-social-icons li a { color: #fff; font-size: 1.5em; } .featured-quote { width: 70%; margin: 0 auto 0 auto; text-align: center; } .featured-quote div { font-size: 2em; } .featured-quote p { display: inline; } .featured-quote a { display: inline-block; padding: 20px 0; font-size: 1.5em; color: #ee4c62; } .qoute-icon-font { font-size: 1em; } .leftqoute-div { width: 10%; float: left; padding-top: 20px; } .rightqoute-div { width: 10%; float: right; padding-top: 20px; } .default-animate { opacity: 0; filter: alpha(opacity=00); } .title-animate span, .title-animate strong { opacity: 0; filter: alpha(opacity=00); } html.touch .title-animate span, html.touch .title-animate strong { opacity: 1; filter: alpha(opacity=100); } html.touch body.touch-animation-on .title-animate span, html.touch body.touch-animation-on .title-animate strong { opacity: 0; filter: alpha(opacity=00); } html.no-opacity .title-animate span, html.no-opacity .title-animate strong { opacity: 1; filter: alpha(opacity=100); } .effect-scale-up, .effect-scale-down, .effect-fade, .effect-fade-from-top, .effect-fade-from-bottom, .effect-fade-from-left, .effect-fade-from-right { opacity: 0; filter: alpha(opacity=00); } html.touch .effect-scale-up, html.touch .effect-scale-down, html.touch .effect-fade, html.touch .effect-fade-from-top, html.touch .effect-fade-from-bottom, html.touch .effect-fade-from-left, html.touch .effect-fade-from-right { opacity: 1; filter: alpha(opacity=100); } html.touch body.touch-animation-on .effect-scale-up, html.touch body.touch-animation-on .effect-scale-down, html.touch body.touch-animation-on .effect-fade, html.touch body.touch-animation-on .effect-fade-from-top, html.touch body.touch-animation-on .effect-fade-from-bottom, html.touch body.touch-animation-on .effect-fade-from-left, html.touch body.touch-animation-on .effect-fade-from-right { opacity: 0; filter: alpha(opacity=00); } html.no-opacity .effect-scale-up, html.no-opacity .effect-scale-down, html.no-opacity .effect-fade, html.no-opacity .effect-fade-from-top, html.no-opacity .effect-fade-from-bottom, html.no-opacity .effect-fade-from-left, html.no-opacity .effect-fade-from-right { opacity: 1; filter: alpha(opacity=100); } /*---------------------------------------------------------------------------------*/ /* # Media Queries /*---------------------------------------------------------------------------------*/ @media screen and (max-width: 1182px) { body { font-size: 87.5%; } .ronika-tagline { padding: 0; } .wtsay-content { width: 100%; } .service-circle { height: 305px; } .portfolio-item { margin-bottom: 35px; } .main-navigation > ul > li a { font-size: 16px; } .main-navigation > ul { padding-top: 32px; } } @media screen and (max-width: 961px) { body { font-size: 100%; } .header { max-height: none; } .js #main-navigation { display: none; } #selectnav1 { width:100%; height:40px; color:#ffffff; border:none; outline:none; background-color:#556274; font-size: 1em; padding: 8px; } .js .selectnav { display: block; } .logo { float: none; width: 100%; text-align: center; } .main-navigation { float: none; width: 100%; text-align: center; padding-left: 0; padding: 20px 0 0 0; } .top-social-icons { float: none; width: 100%; text-align: center; padding-bottom: 0; } .top-social-icons ul { width: auto; } .ronika-gallery-slider-bg { padding-top: 288px; } .ronika-gallery-slider { height: 480px; } .ronika-gallery-items .item { width: 340px; } .ronika-gallery-items .item-hover { padding: 28px; } .ronika-gallery-items .item.one-third .item-hover { padding: 41px 28px 0; } .service-circle { height: 350px; } .ronika-tagline { text-align: center; } .ronika-tagline h2 { float: none; display: inline-block; width: 100%; text-align: center; } .ronika-tagline .ronika-tagline-button { float: none; display: inline-block; margin-top: 20px; font-size: 1.25em; } .service-circle-container { width: 100%; margin-bottom: 30px; } .service-circle-container:last-child { margin-bottom: 0; } .wtsay-content { width: 75%; } .wtsay-content ul li { float: none; display: inline-block; width: 100%; margin: 0 0 30px 0; text-align: center; } .wtsay-content ul li:last-child { margin-bottom: 0; } .wtsay-title { padding-bottom: 45px; } .wtsay-circle { float: none; display: inline-block; margin: 0 0 5px 0; width: 120px; height: 120px; } .wtsay-context { float: none; display: inline-block; width: 100%; } .works-content { margin-bottom: 40px; } .works-image { text-align: center; } .sidebar { padding-left: 1.34375em; } .widget.widget_latest_portfolio ul li { display: inline-block; } .blog-container { /*margin-top: 241px;*/ -webkit-transition: margin 0.3s ease-out; -moz-transition: margin 0.3s ease-out; -ms-transition: margin 0.3s ease-out; -o-transition: margin 0.3s ease-out; transition: margin 0.3s ease-out; } .featured-portfolio.row { margin-left: 0; margin-right: 0; text-align: center; } .featured-portfolio .portfolio-item { float: none; display: inline-block; max-width: 527px; padding: 0; margin-bottom: 35px; } .featured-portfolio .portfolio-item:last-child { float: none; } .entry-side { display: none; } .entry-meta-mobile { display: block; } .entry-content > h2 { padding-bottom: 0; } .blog-container.blog-1 .blog-title { margin-bottom: 70px; } .page-container { /*margin-top: 241px;*/ -webkit-transition: margin 0.3s ease-out; -moz-transition: margin 0.3s ease-out; -ms-transition: margin 0.3s ease-out; -o-transition: margin 0.3s ease-out; transition: margin 0.3s ease-out; } .page-container.sticky-header-on, .blog-container.sticky-header-on { /*margin-top: 150px;*/ } .single-sharing > span { float: none; display: inline-block; width: 100%; text-align: center; } .single-sharing ul { display: inline-block; width: 100%; margin-top: 20px; text-align: center; } .single-sharing ul li { float: none; display: inline-block; } .content-title strong { display: inline; } .comments-list li { margin: 100px 0 25px 0; } .comments-list li li { margin-top: 120px; } .comment-meta { position: absolute; top: -83px; right: 0; width: 82%; } .comment-time.romina-tip { display: none; } .comment-time.tablet { display: inline-block; width: 100%; margin-top: 10px; } .comment-reply-link { margin-top: 2px; } .avatar-border { top: -90px; left: 0; } .avatar-border img { width: 65px; height: auto; } .content-container.parallax-effect { background-position: center center !important; } } @media screen and (max-width: 480px) { .content-container { padding: 60px 0; } .content-typography h1 { font-size: 2.75em; line-height: 1.2em; } .content-typography h2 { font-size: 1.875em; line-height: 1.2em; } .content-typography h3 { font-size: 1.5em; line-height: 1.2em; } .content-typography h4 { font-size:: 1.25em; line-height: 1.2em; } .content-typography h5 { font-size: 1.125em; line-height: 1.2em; } .content-typography h6 { font-size: 1em; line-height: 1.2em; } .content-typography p { font-size: 0..875em; line-height: 1.4em; } .content-title { font-size: 3em !important; margin-bottom: 40px; } .wtsay-content { width: 100%; } .featured-quote { width: 100%; } .wpcf7 label { display: none; } .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="url"], .wpcf7 input[type="number"], .wpcf7 input[type="date"], .wpcf7 input[type="range"], .wpcf7 select, .wpcf7 textarea { width: 100%; } .wpcf7 .wpcf7-submit { width: 100%; } .comment-reply-link { display: none; } .service-circle { width: 305px; height: 305px; } .service-circle-content { padding: 25px 8%; } .service-circle p { font-size: 13px; } } @media screen and (max-width: 320px) { .service-circle { width: 277px; height: 280px; } .service-circle-content { padding: 25px 8%; } .service-circle h2 { margin-top: 0; font-size: 1.75em; margin-top: 5px; } .service-circle p { margin-top: 5px; } }