/* * @project: One - Flat Theme; * @author: SF Theme; */ /*------------------------------------------------------------------ [Color Codes] Dark Red: #28313C; Light Red: #F56C21; Dark Grey: #363b3f; Dark Grey 2: #b6b7b7; Social Buttons: #444749; Light Grey: #f7f8f8; Bubbles:#BFBFBF; White: #ffffff; Black: #000000; -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 1. Welcome 2. Navbar 3. About 4. Skills 5. Work Experience 6. Portfolio 7. Contact 8. Footer -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [0. General Body] -------------------------------------------------------------------*/ body { color: #363b3f; background: #f7f8f8; } .section { padding: 30px 0 50px 0px; } .section h1, .section h2, .section h3, .section h4 { font-family: "Open Sans", "Lato", sans-serif; font-weight: 700; color: #4C4C4C; } .section p { font-family: "Open Sans", "Lato", sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; } .section .heading { text-align: left; padding-bottom: 40px; } .section .profilePic { text-align: center; margin: 0 auto; float: none; } .section .divider { width: 200px; height: 0px; background: #BE3732; margin: 0 auto; } section.colored h1, section.colored h2, section.colored h3, section.colored h4, section.colored p { color: white; } .btn, .filter a { font-family: "Open Sans", "Lato", sans-serif; font-weight: 400; font-size: 14px; text-decoration: none; background: white; color: #b6b7b7; border: 1px solid #b6b7b7; padding: 18px; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .btn:hover, .filter a:hover, .btn:focus, .filter a:focus { background-color: #BE3732; border-color: #BE3732; color: white; } .borderBtn, .contactform button { font-family: "Open Sans", "Lato", sans-serif; font-weight: 700; font-size: 13px; text-decoration: none; color: white; border: 1px solid white; padding: 18px 50px 18px 50px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .borderBtn:hover, .contactform button:hover, .borderBtn:focus, .contactform button:focus { background-color: white; color: #BE3732; text-decoration: none; } .actives { background-color: white; color: #333; text-decoration: none; } section .centered { margin: 0 auto; float: none; } .hidethis { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); opacity: 0; } .loader { width: 100%; height: 100%; background: white; position: fixed; top: 0px; left: 0px; z-index: 1000; } .loader .inner { width: 100%; height: 100%; background: url(../images/loading.gif) center center no-repeat; } /*------------------------------------------------------------------ [1. Welcome] -------------------------------------------------------------------*/ .overlay { width: 100%; height: 100%; position: absolute; z-index: 3; background: url(../images/overlayy.png); } .slides-container { display: none; } .slides-navigation { margin: 0 auto; position: absolute; z-index: 11; top: 46%; width: 100%; } .slides-navigation .prev, .slides-navigation .next { position: absolute; display: block; width: 47px; height: 47px; background: url(../images/prevnext.png); } .slides-navigation .prev { left: 20px; background-position: bottom; } .slides-navigation .next { right: 20px; background-position: top; } .welcome-message { position: absolute; width: 100%; height: 250px; top: 50%; margin-top: -125px; z-index: 10; text-align: center; } .welcome-message .heading { padding: 18px 0px; } .welcome-message p { font-family: "Open Sans", "Lato", sans-serif; font-size: 55px; color: white; -webkit-text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4); -moz-text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4); -o-text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4); -ms-text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4); text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4); } .highlight { background-color:#BE3732; width:auto; padding-left:20px; padding-right:10px; } .highlightdark { background-color:#363B3F; width:auto; padding-left:10px; padding-right:20px; } .welcome-message p.small { font-family: "Open Sans", "Lato", sans-serif; font-size: 20px; color: white; } .welcome-message .borderBtn, .welcome-message .contactform button, .contactform .welcome-message button { -webkit-text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4); -moz-text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4); -o-text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4); -ms-text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4); text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4); } .welcome-message .borderBtn:hover, .welcome-message .contactform button:hover, .contactform .welcome-message button:hover { -webkit-text-shadow: 0px 2px 5px rgba(0, 0, 0, 0); -moz-text-shadow: 0px 2px 5px rgba(0, 0, 0, 0); -o-text-shadow: 0px 2px 5px rgba(0, 0, 0, 0); -ms-text-shadow: 0px 2px 5px rgba(0, 0, 0, 0); text-shadow: 0px 2px 5px rgba(0, 0, 0, 0); } /*------------------------------------------------------------------ [2. Navbar] -------------------------------------------------------------------*/ .navbar-flat { background: #BE3732; margin-bottom: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; } .navbar-flat .navbar-collapse { text-align: center; } .navbar-flat .navbar-toggle .icon-bar { background: white; } .navbar-flat ul { float: none; } .navbar-flat li { display: inline-block; float: none; } .navbar-flat li a:hover { background: #28313C; color: white; } .navbar-flat li a:focus { background: #28313C; color: white; } .navbar-flat li.active a { background: #28313C; color: white; } .navbar-flat a { font-family: "Open Sans", "Lato", sans-serif; font-weight: 700; color: #f7f8f8; -webkit-transition: all 0.3s ease-in, 1s; -moz-transition: all 0.3s ease-in, 1s; -o-transition: all 0.3s ease-in, 1s; -ms-transition: all 0.3s ease-in, 1s; transition: all 0.3s ease-in, 1s; } .navbar-flat .navbar-brand { display: none; } /*------------------------------------------------------------------ [3. About] -------------------------------------------------------------------*/ .hero { background: #BE3732; color: white; } .hero .borderBtn, .hero .contactform button, .contactform .hero button { margin-top: 20px; } .hero h3 { color: black !important; } .firstSec { padding-top: 30px; } .firstSec.fixed { padding-top: 80px; } .services .services-inner { margin-top: 20px; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service a { color:#363B3F; text-decoration:none;} .service a:hover { color:#fff; text-decoration:none;} .service { width:190px; border: 1px solid #e3e5e5; padding-top: 50px; padding-bottom: 50px; text-align: center; color: #BE3732; margin-left: -1px; -webkit-transition: all 0.3s ease-in, 1s; -moz-transition: all 0.3s ease-in, 1s; -o-transition: all 0.3s ease-in, 1s; -ms-transition: all 0.3s ease-in, 1s; transition: all 0.3s ease-in, 1s; } .service_heart { width:190px; border: 1px solid #e3e5e5; padding-top: 30px; padding-bottom: 30px; text-align: center; color: #BE3732; margin-left: -1px; -webkit-transition: all 0.3s ease-in, 1s; -moz-transition: all 0.3s ease-in, 1s; -o-transition: all 0.3s ease-in, 1s; -ms-transition: all 0.3s ease-in, 1s; transition: all 0.3s ease-in, 1s; } .service_heart h3 { font-size: 16px; font-weight:normal; color: black; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service_heart i { width: 99px; height: 99px; margin: 0 auto; display: block; background: url(../images/loga/lazienkowy.png) no-repeat; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service_coding { width:190px; border: 1px solid #e3e5e5; padding-top: 30px; padding-bottom: 30px; text-align: center; color: #BE3732; margin-left: -1px; -webkit-transition: all 0.3s ease-in, 1s; -moz-transition: all 0.3s ease-in, 1s; -o-transition: all 0.3s ease-in, 1s; -ms-transition: all 0.3s ease-in, 1s; transition: all 0.3s ease-in, 1s; } .service_coding h3 { font-size: 16px; font-weight:normal; color: black; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service_coding i { width: 99px; height: 99px; margin: 0 auto; display: block; background: url(../images/loga/instalacje.png) no-repeat; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service_camera { width:190px; border: 1px solid #e3e5e5; padding-top: 30px; padding-bottom: 30px; text-align: center; color: #BE3732; margin-left: -1px; -webkit-transition: all 0.3s ease-in, 1s; -moz-transition: all 0.3s ease-in, 1s; -o-transition: all 0.3s ease-in, 1s; -ms-transition: all 0.3s ease-in, 1s; transition: all 0.3s ease-in, 1s; } .service_camera h3 { font-size: 16px; font-weight:normal; color: black; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service_camera i { width: 99px; height: 99px; margin: 0 auto; display: block; background: url(../images/loga/fachowcy.png) no-repeat; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service_music { width:190px; border: 1px solid #e3e5e5; padding-top: 30px; padding-bottom: 30px; text-align: center; color: #BE3732; margin-left: -1px; -webkit-transition: all 0.3s ease-in, 1s; -moz-transition: all 0.3s ease-in, 1s; -o-transition: all 0.3s ease-in, 1s; -ms-transition: all 0.3s ease-in, 1s; transition: all 0.3s ease-in, 1s; } .service_music h3 { font-size: 16px; font-weight:normal; color: black; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service_music i { width: 99px; height: 99px; margin: 0 auto; display: block; background: url(../images/loga/porady.png) no-repeat; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service_went { width:190px; border: 1px solid #e3e5e5; padding-top: 30px; padding-bottom: 30px; text-align: center; color: #BE3732; margin-left: -1px; -webkit-transition: all 0.3s ease-in, 1s; -moz-transition: all 0.3s ease-in, 1s; -o-transition: all 0.3s ease-in, 1s; -ms-transition: all 0.3s ease-in, 1s; transition: all 0.3s ease-in, 1s; } .service_went h3 { font-size: 16px; font-weight:normal; color: black; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service_went i { width: 99px; height: 99px; margin: 0 auto; display: block; background: url(../images/loga/wentylacyjny.png) no-repeat; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service_kuch { width:190px; border: 1px solid #e3e5e5; padding-top: 30px; padding-bottom: 30px; text-align: center; color: #BE3732; margin-left: -1px; -webkit-transition: all 0.3s ease-in, 1s; -moz-transition: all 0.3s ease-in, 1s; -o-transition: all 0.3s ease-in, 1s; -ms-transition: all 0.3s ease-in, 1s; transition: all 0.3s ease-in, 1s; } .service_kuch h3 { font-size: 16px; font-weight:normal; color: black; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service_kuch i { width: 99px; height: 99px; margin: 0 auto; display: block; background: url(../images/loga/kuchenny.png) no-repeat; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service h3 { font-size: 16px; font-weight:normal; color: black; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service i { width: 51px; height: 45px; margin: 0 auto; display: block; background: url(../images/icons.png) no-repeat; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service .heart { background-position: left top; } .service .bulp { background-position: -51px top; } .service .graph { background-position: -102px top; } .service .coding { background-position: -152px top; } .service .globe { background-position: -204px top; } .service .music { background-position: -255px top; } .service .pencil { background-position: -306px top; } .service .camera { background-position: -357px top; } .service .vcamera { background-position: -408px top; } .service .cloud { background-position: -459px top; } .service:hover, .service:focus { background-color: #BE3732; border-color: #BE3732; color: white; } .service:hover h3, .service:focus h3 { color: white; } /*.service_heart:hover, .service_heart:focus { background-color: #01a1bb; border-color: #01a1bb; color: white; text-decoration:none;} .service_heart:hover h3, .service_heart:focus h3 { color: white; } .service_heart:hover .heart, .service_heart:focus .heart { background-position: left bottom; }*/ .service_heart:hover, .service_heart:focus { width:190px; border: 1px solid #01a1bb; background-color: #01a1bb; padding-top: 30px; padding-bottom: 30px; text-align: center; color: #BE3732; margin-left: -1px; -webkit-transition: all 0.3s ease-in, 1s; -moz-transition: all 0.3s ease-in, 1s; -o-transition: all 0.3s ease-in, 1s; -ms-transition: all 0.3s ease-in, 1s; transition: all 0.3s ease-in, 1s; } .service_heart:hover h3, .service_heart:focus h3 { font-size: 16px; font-weight:normal; color: white; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service_heart:hover i, .service_heart:focus i { width: 99px; height: 99px; margin: 0 auto; display: block; color: white; border-color: #01a1bb; background: url(../images/loga/lazienkowy2.png) no-repeat; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service_heart:hover a, .service_heart:focus a { text-decoration:none; } /*.service_coding:hover, .service_heart:focus { background-color: #BE3732; border-color: #BE3732; color: white; text-decoration:none;} .service_coding:hover h3, .service_coding:focus h3 { color: white; } .service_coding:hover .coding, .service_coding:focus .coding { background-position: left bottom; }*/ .service_coding:hover, .service_coding:focus { width:190px; border: 1px solid #BE3732; background-color: #BE3732; padding-top: 30px; padding-bottom: 30px; text-align: center; color: #BE3732; margin-left: -1px; -webkit-transition: all 0.3s ease-in, 1s; -moz-transition: all 0.3s ease-in, 1s; -o-transition: all 0.3s ease-in, 1s; -ms-transition: all 0.3s ease-in, 1s; transition: all 0.3s ease-in, 1s; } .service_coding:hover h3, .service_coding:focus h3 { font-size: 16px; font-weight:normal; color: white; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service_coding:hover i, .service_coding:focus i { width: 99px; height: 99px; margin: 0 auto; display: block; color: white; border-color: #BE3732; background: url(../images/loga/instalacje2.png) no-repeat; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service_coding:hover a, .service_coding:focus a { text-decoration:none; } /*.service_camera:hover, .service_camera:focus { background-color: #7fbc51; border-color: #7fbc51; color: white; text-decoration:none;} .service_camera:hover h3, .service_camera:focus h3 { color: white; } .service_camera:hover .camera, .service_camera:focus .camera { background-position: left bottom; }*/ .service_camera:hover, .service_camera:focus { width:190px; border: 1px solid #7fbc51; background-color: #7fbc51; padding-top: 30px; padding-bottom: 30px; text-align: center; color: #BE3732; margin-left: -1px; -webkit-transition: all 0.3s ease-in, 1s; -moz-transition: all 0.3s ease-in, 1s; -o-transition: all 0.3s ease-in, 1s; -ms-transition: all 0.3s ease-in, 1s; transition: all 0.3s ease-in, 1s; } .service_camera:hover h3, .service_camera:focus h3 { font-size: 16px; font-weight:normal; color: white; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service_camera:hover i, .service_camera:focus i { width: 99px; height: 99px; margin: 0 auto; display: block; color: white; border-color: #7fbc51; background: url(../images/loga/fachowcy2.png) no-repeat; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service_camera:hover a, .service_camera:focus a { text-decoration:none; } /*.service_music:hover, .service_music:focus { background-color: #d36a15; border-color: #d36a15; color: white; text-decoration:none;} .service_music:hover h3, .service_music:focus h3 { color: white; } .service_music:hover .music, .service_music:focus .music { background-position: left bottom; }*/ .service_music:hover, .service_music:focus { width:190px; border: 1px solid #d36a15; background-color: #d36a15; padding-top: 30px; padding-bottom: 30px; text-align: center; color: #BE3732; margin-left: -1px; -webkit-transition: all 0.3s ease-in, 1s; -moz-transition: all 0.3s ease-in, 1s; -o-transition: all 0.3s ease-in, 1s; -ms-transition: all 0.3s ease-in, 1s; transition: all 0.3s ease-in, 1s; } .service_music:hover h3, .service_music:focus h3 { font-size: 16px; font-weight:normal; color: white; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service_music:hover i, .service_music:focus i { width: 99px; height: 99px; margin: 0 auto; display: block; color: white; border-color: #d36a15; background: url(../images/loga/porady2.png) no-repeat; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service_music:hover a, .service_music:focus a { text-decoration:none; } /*.service_went:hover, .service_went:focus { background-color: #5c85ad; border-color: #5c85ad; color: white; text-decoration:none;} .service_went:hover h3, .service_went:focus h3 { color: white; } .service_went:hover .went, .service_went:focus .went { background-position: left bottom; }*/ .service_went:hover, .service_went:focus { width:190px; border: 1px solid #5c85ad; background-color: #5c85ad; padding-top: 30px; padding-bottom: 30px; text-align: center; color: #BE3732; margin-left: -1px; -webkit-transition: all 0.3s ease-in, 1s; -moz-transition: all 0.3s ease-in, 1s; -o-transition: all 0.3s ease-in, 1s; -ms-transition: all 0.3s ease-in, 1s; transition: all 0.3s ease-in, 1s; } .service_went:hover h3, .service_went:focus h3 { font-size: 16px; font-weight:normal; color: white; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service_went:hover i, .service_went:focus i { width: 99px; height: 99px; margin: 0 auto; display: block; color: white; border-color: #5c85ad; background: url(../images/loga/wentylacyjny2.png) no-repeat; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service_went:hover a, .service_went:focus a { text-decoration:none; } /*.service_kuch:hover, .service_kuch:focus { background-color: #423b87; border-color: #423b87; color: white; text-decoration:none;} .service_kuch:hover h3, .service_kuch:focus h3 { color: white; } .service_kuch:hover .kuch, .service_kuch:focus .kuch { background-position: left bottom; }*/ .service_kuch:hover, .service_kuch:focus { width:190px; border: 1px solid #423b87; background-color: #423b87; padding-top: 30px; padding-bottom: 30px; text-align: center; color: #BE3732; margin-left: -1px; -webkit-transition: all 0.3s ease-in, 1s; -moz-transition: all 0.3s ease-in, 1s; -o-transition: all 0.3s ease-in, 1s; -ms-transition: all 0.3s ease-in, 1s; transition: all 0.3s ease-in, 1s; } .service_kuch:hover h3, .service_kuch:focus h3 { font-size: 16px; font-weight:normal; color: white; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service_kuch:hover i, .service_kuch:focus i { width: 99px; height: 99px; margin: 0 auto; display: block; color: white; border-color: #423b87; background: url(../images/loga/kuchenny2.png) no-repeat; -webkit-transition: all 0.3s ease-in, 0s; -moz-transition: all 0.3s ease-in, 0s; -o-transition: all 0.3s ease-in, 0s; -ms-transition: all 0.3s ease-in, 0s; transition: all 0.3s ease-in, 0s; } .service_kuch:hover a, .service_kuch:focus a { text-decoration:none; } /*.service:hover .bulp, .service:focus .bulp { background-position: -51px bottom; } .service:hover .graph, .service:focus .graph { background-position: -103px bottom; } .service:hover .coding, .service:focus .coding { background-position: -152px bottom; } .service:hover .globe, .service:focus .globe { background-position: -204px bottom; } .service:hover .music, .service:focus .music { background-position: -255px bottom; } .service:hover .pencil, .service:focus .pencil { background-position: -306px bottom; } .service:hover .camera, .service:focus .camera { background-position: -357px bottom; } .service:hover .vcamera, .service:focus .vcamera { background-position: -408px bottom; } .service:hover .cloud, .service:focus .cloud { background-position: -459px bottom; }*/ /*------------------------------------------------------------------ [4. Skills] -------------------------------------------------------------------*/ section.skills { background: #f7f8f8; display: none;} section.skills h4 { color: black !important; } .skill { margin: 0 auto 20px auto; float: none; text-align: center;} .chart { position: relative; width: 152px; height: 152px; display: inline-block; margin: 0 0 25px 0px; text-align: center; } .chart2 { position: relative; width: 152px; height: 152px; display: inline-block; margin: 0 0 25px 0px; text-align: center; } .chart3 { position: relative; width: 152px; height: 152px; display: inline-block; margin: 0 0 25px 0px; text-align: center; } .chart4 { position: relative; width: 152px; height: 152px; display: inline-block; margin: 0 0 25px 0px; text-align: center; } .chart5 { position: relative; width: 152px; height: 152px; display: inline-block; margin: 0 0 25px 0px; text-align: center; } .chart6 { position: relative; width: 152px; height: 152px; display: inline-block; margin: 0 0 25px 0px; text-align: center; } .chart7 { position: relative; width: 152px; height: 152px; display: inline-block; margin: 0 0 25px 0px; text-align: center; } .chart canvas { position: absolute; left: 0px; top: 0px; } .chart2 canvas { position: absolute; left: 0px; top: 0px; } .chart3 canvas { position: absolute; left: 0px; top: 0px; } .chart4 canvas { position: absolute; left: 0px; top: 0px; } .chart5 canvas { position: absolute; left: 0px; top: 0px; } .chart6 canvas { position: absolute; left: 0px; top: 0px; } .chart7 canvas { position: absolute; left: 0px; top: 0px; } .chart .percent { font-family: "Open Sans", "Lato", sans-serif; color: black; line-height: 152px; display: inline-block; font-size: 35px; } .chart2 .percent { font-family: "Open Sans", "Lato", sans-serif; color: black; line-height: 152px; display: inline-block; font-size: 35px; } .chart3 .percent { font-family: "Open Sans", "Lato", sans-serif; color: black; line-height: 152px; display: inline-block; font-size: 35px; } .chart4 .percent { font-family: "Open Sans", "Lato", sans-serif; color: black; line-height: 152px; display: inline-block; font-size: 35px; } .chart5 .percent { font-family: "Open Sans", "Lato", sans-serif; color: black; line-height: 152px; display: inline-block; font-size: 35px; } .chart6 .percent { font-family: "Open Sans", "Lato", sans-serif; color: black; line-height: 152px; display: inline-block; font-size: 35px; } .chart7 .percent { font-family: "Open Sans", "Lato", sans-serif; color: black; line-height: 152px; display: inline-block; font-size: 35px; } .chart .percent:after { content: ' l/24h'; font-size: 20px;} .chart2 .percent:after { content: ' %'; font-size: 20px; } .chart3 .percent:after { content: ' m3'; font-size: 20px; } .chart4 .percent:after { content: ' m3/h'; font-size: 20px; } .chart5 .percent:after { content: ' kg'; font-size: 20px; } .chart6 .percent:after { content: ' dBA'; font-size: 20px; } .chart7 .percent:after { content: ' kW/24h'; font-size: 20px; } /*------------------------------------------------------------------ [5. Work Experience] -------------------------------------------------------------------*/ .timeline { float: left; width: 100%; padding: 50px 0 42px 0px; /* Animations */ } .timeline ul { float: left; width: 100%; } .timeline li { float: left; width: 50%; position: relative; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); opacity: 0; } .timeline .point { width: 57px; height: 57px; background: url(../images/timeline-item.png); position: absolute; right: -28px; top: 4px; } .timeline .bubble-arrow { width: 16px; height: 25px; background: url(../images/bubbles-arrow.png) left top no-repeat; position: absolute; top: 20px; right: -10px; } .timeline .bubble { float: right; width: 64.4%; margin: 0px 30px 0 0px; padding: 22px 32px 25px 30px; background: #363b3f; position: relative; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 1px 2px 2px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 2px 2px 2px rgba(0, 0, 0, 0.1); -o-box-shadow: 1px 2px 2px 2px rgba(0, 0, 0, 0.1); -ms-box-shadow: 1px 2px 2px 2px rgba(0, 0, 0, 0.1); box-shadow: 1px 2px 2px 2px rgba(0, 0, 0, 0.1); -webkit-transition: all 0.2s linear, 1s; -moz-transition: all 0.2s linear, 1s; -o-transition: all 0.2s linear, 1s; -ms-transition: all 0.2s linear, 1s; transition: all 0.2s linear, 1s; } .timeline .bubble:hover { -webkit-transform: scale(1.05, 1.05); -moz-transform: scale(1.05, 1.05); -o-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); } .timeline .bubble p { font-family: "Open Sans", "Lato", sans-serif; font-size: 14px; line-height: 1.3; font-weight: 400; color: white; margin: 0px; text-align: left; margin: 0 0 15px 0px; } .timeline .bubble p.name { font-size: 20px; font-weight: 700; margin: 0px; } .timeline .bubble p.title { font-size: 14px; font-weight: 400; margin: 0px; } .timeline .odd { margin: 80px 0 0 0; } .timeline .odd .bubble-arrow { left: -10px; right: auto; background-position: right top; } .timeline .odd .bubble { margin: 0px 0px 0 30px; } .timeline .odd .point { left: -29px; } .timeline .odd .timestamp { float: left; } .timeline .odd .timestamp p.date, .timeline .odd .timestamp p.time { text-align: left; margin: 0 0 0 50px; } .timeline .odd .timestamp p.date { margin-top: 10px; } .timeline .odd .bubble { float: left; } .timeline .odd .bubble img { left: auto; right: -34px; } .timeline li:nth-child(1) { animation-delay: 0.2s; -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; -ms-animation-delay: 0.2s; } .timeline li:nth-child(2) { animation-delay: 0.4s; -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; -ms-animation-delay: 0.4s; } .timeline li:nth-child(3) { animation-delay: 0.8s; -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -o-animation-delay: 0.8s; -ms-animation-delay: 0.8s; } .timeline li:nth-child(4) { animation-delay: 1s; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; -ms-animation-delay: 1s; } .timeline li:nth-child(5) { animation-delay: 1.2s; -webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s; -o-animation-delay: 1.2s; -ms-animation-delay: 1.2s; } .timeline li:nth-child(6) { animation-delay: 1.4s; -webkit-animation-delay: 1.4s; -moz-animation-delay: 1.4s; -o-animation-delay: 1.4s; -ms-animation-delay: 1.4s; } .timeline li:nth-child(7) { animation-delay: 1.6s; -webkit-animation-delay: 1.6s; -moz-animation-delay: 1.6s; -o-animation-delay: 1.6s; -ms-animation-delay: 1.6s; } .timeline li:nth-child(8) { animation-delay: 1.8s; -webkit-animation-delay: 1.8s; -moz-animation-delay: 1.8s; -o-animation-delay: 1.8s; -ms-animation-delay: 1.8s; } .timeline li:nth-child(9) { animation-delay: 2s; -webkit-animation-delay: 2s; -moz-animation-delay: 2s; -o-animation-delay: 2s; -ms-animation-delay: 2s; } .timeline li:nth-child(10) { animation-delay: 2.2s; -webkit-animation-delay: 2.2s; -moz-animation-delay: 2.2s; -o-animation-delay: 2.2s; -ms-animation-delay: 2.2s; } /*------------------------------------------------------------------ [6. Portfolio] -------------------------------------------------------------------*/ .filter { text-align: center; width: 100%; } .filter li { display: inline-block; padding: 5px; } .filter a { display: block; padding-top: 10px; padding-bottom: 10px; } .filter .current { background-color: #BE3732; border-color: #BE3732; color: white; } section.portfolio { background: white; } .portfolio-items { -webkit-transition: all 0.2s linear, 1s; -moz-transition: all 0.2s linear, 1s; -o-transition: all 0.2s linear, 1s; -ms-transition: all 0.2s linear, 1s; transition: all 0.2s linear, 1s; } .portfolio-items li { padding: 5px; display: block; z-index: 2; } .portfolio-items li img { -webkit-transition: all 0.2s linear, 1s; -moz-transition: all 0.2s linear, 1s; -o-transition: all 0.2s linear, 1s; -ms-transition: all 0.2s linear, 1s; transition: all 0.2s linear, 1s; } .portfolio-items .item { position: relative; display: block; overflow: hidden; } .portfolio-items .mask { width: 100%; height: 100%; background: url(../images/mask.png); position: absolute; left: 0px; top: 0px; z-index: 2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s linear, 1s; -moz-transition: all 0.2s linear, 1s; -o-transition: all 0.2s linear, 1s; -ms-transition: all 0.2s linear, 1s; transition: all 0.2s linear, 1s; } .portfolio-items .icons { position: absolute; width: 90px; height: 40px; left: 50%; top: 50%; margin: -21px auto 0 -47px; text-align: center; z-index: 3; } .portfolio-items .icons i { color: white; font-size: 40px; margin-top: 9px; } .portfolio-items .projectlink, .portfolio-items .fullwidth { width: 40px; height: 40px; background: none; position: relative; -webkit-transition: all 0.2s ease-in-out, 0.2s; -moz-transition: all 0.2s ease-in-out, 0.2s; -o-transition: all 0.2s ease-in-out, 0.2s; -ms-transition: all 0.2s ease-in-out, 0.2s; transition: all 0.2s ease-in-out, 0.2s; } .portfolio-items .fullwidth { text-align:center; bottom: -200px; } .portfolio-items .projectlink { float: right; bottom: -200px; } .portfolio-items li .item:hover img { -webkit-transform: scale(1.05, 1.05); -moz-transform: scale(1.05, 1.05); -o-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); } .portfolio-items li .item:hover .mask { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 100 ")"; filter: alpha(opacity=1); opacity: 1; } .portfolio-items li .item:hover .fullwidth { top: 0px; } .portfolio-items li .item:hover .projectlink { bottom: 0px; } .fancybox-close { top: 0px; right: 0px; } /*------------------------------------------------------------------ [7. Contact] -------------------------------------------------------------------*/ section.contact .details { text-align: center; padding: 0 0 30px 0px; } section.contact .details p { font-family: "Open Sans", "Lato", sans-serif; font-size: 30px; font-weight: 300; } section.contact .details p.bigger { font-size: 40px; font-weight: 700; margin-top: 20px; } .contactform input, .contactform textarea { border: 1px solid #b6b7b7; color: #363b3f; background: none; padding: 15px 30px; margin: 0 3% 20px 0px; resize: none; } .contactform .error, .contactform .form-error { border-color: #28313C !important; } .contactform .no-margin { margin-right: 0px; } .contactform input.col-lg-6 { width: 48.5%; } .contactform button { background: #BE3732; } .contactform button:hover, .contactform button:focus { border-color: #BE3732; } .contactform p { text-align: center; } .form a { color: white; } #map { float: left; width: 100%; height: 390px; border-top: 4px solid #BE3732; } /*------------------------------------------------------------------ [8. Footer] -------------------------------------------------------------------*/ footer { background: #363b3f; } footer p { font-size: 12px; color: white; text-align: center; } footer ul { width: 100%; text-align: center; margin-top: 20px; } footer li { display: inline-block; margin: 0 4px; } footer li a { display: block; text-decoration: none; border-bottom: none; padding: 18px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-transition: all 0.3s ease-in, 1s; -moz-transition: all 0.3s ease-in, 1s; -o-transition: all 0.3s ease-in, 1s; -ms-transition: all 0.3s ease-in, 1s; transition: all 0.3s ease-in, 1s; } footer .facebook { background: url(../images/facebook.png) center no-repeat #444749; } footer .facebook:hover { background-color: #4265b9; } footer .twitter { background: url(../images/twitter.png) center no-repeat #444749; } footer .twitter:hover { background-color: #9ae4e8; } footer .google { background: url(../images/google.png) center no-repeat #444749; } footer .google:hover { background-color: #d62408; } footer .youtube { background: url(../images/youtube.png) center no-repeat #444749; } footer .youtube:hover { background-color: #df3333; } footer .flickr { background: url(../images/flickr.png) center no-repeat #444749; } footer .flickr:hover { background-color: #E2408F; } footer .dribbble { background: url(../images/dribbble.png) center no-repeat #444749; } footer .dribbble:hover { background-color: #e94c89; } footer .behance { background: url(../images/behance.png) center no-repeat #444749; } footer .behance:hover { background-color: #3fbff0; } img { max-width: 100%; height: auto; } .clear { clear: both; } ::selection { background-color: #BE3732; color: white; } ::-moz-selection { background-color: #BE3732; color: white; } input, textarea { -webkit-appearance: none; } a:hover { text-decoration:none;} /* OWL */ .owl-theme .owl-controls .owl-page span { background: white; } /* CSS Keyframe Animations */ .animated { -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -moz-animation-timing-function: ease-in-out; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translateY(20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; } @media only screen and (max-width: 768px) { .navbar-flat li { display: inline-block; } } @media only screen and (max-width: 765px) { .navbar-brand { display: block !important; } .navbar-flat li { display: inline; } .timeline { background-position: 38px top; } .timeline li, .timeline .odd { margin: 0px 0 20px 43px; width: 85%; } .timeline .point, .timeline .odd .point { left: -32px; right: auto; } .timeline .timestamp, .timeline .bubble { float: left; } .timeline .bubble, .timeline .odd .bubble { margin: 0px 0 0 30px; width: 80%; padding: 22px 30px 25px 32px; } .timeline .bubble-arrow { background-position: right top; left: -10px; right: auto; } } /* Skrollr */ #skrollr-body { width: 100%; } #budowosuszacza { width:100%; text-align:center;} #budowosuszacza img{ margin-left:auto; margin-right:auto; }