/*--------------------- Copyright (c) 2018 ----------------------- [Master Stylesheet] Project: Portfolio Responsive HTML Template Version: 1.0.0 Assigned to: ThemeForest ------------------------------------------------------------------- [Table of contents] 1. Body 2. Typography css / a 3. Main Wrapper / .prt_main_wrapper 4. About css Start / .prt_about_wrapper 5. Contact Page css Start / .prt_contact_wrapper 6. Services css Start / .prt_services_wrapper 7. Portfolio css Start / .prt_portfolio_wrapper 8. Footer css Start / .prt_footer_wrapper 9. Responsive css Start / .prt_counter_box -------------------------------------------------------------------*/ /*--------- Body Strat -------*/ body { font-family: 'Montserrat', sans-serif; font-size: 15px; line-height: 1.5; color: #b7b7b7; background-color: #010101; -webkit-font-smoothing: antialiased; } .typed-cursor { display: none; } /*--------- Body End -------*/ /*---------- Typography Css Start -------*/ a { color: #b7b7b7; text-decoration: none; cursor: pointer; } a:hover, a:focus { color: #b7b7b7; text-decoration: none; } a:focus { outline: none; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Montserrat', sans-serif; font-weight: 400; line-height: 1.1; color: #fffefe; } img { max-width: 100%; } input, textarea, select, button { outline: none; box-shadow: none; } input:focus, textarea:focus, select:focus, button:focus { outline: none; box-shadow: none; } .prt_toppadder10 { padding-top: 10px; } .prt_toppadder20 { padding-top: 20px; } .prt_toppadder30 { padding-top: 30px; } .prt_toppadder40 { padding-top: 40px; } .prt_toppadder50 { padding-top: 50px; } .prt_toppadder60 { padding-top: 60px; } .prt_toppadder70 { padding-top: 70px; } .prt_toppadder80 { padding-top: 80px; } .prt_toppadder90 { padding-top: 90px; } .prt_toppadder100 { padding-top: 100px; } .prt_toppadder115 { padding-top: 115px; } .prt_bottompadder10 { padding-bottom: 10px; } .prt_bottompadder20 { padding-bottom: 20px; } .prt_bottompadder30 { padding-bottom: 30px; } .prt_bottompadder40 { padding-bottom: 40px; } .prt_bottompadder50 { padding-bottom: 50px; } .prt_bottompadder60 { padding-bottom: 60px; } .prt_bottompadder70 { padding-bottom: 70px; } .prt_bottompadder80 { padding-bottom: 80px; } .prt_bottompadder90 { padding-bottom: 90px; } .prt_bottompadder100 { padding-bottom: 100px; } .prt_bottompadder115 { padding-bottom: 115px; } .prt_padderboth120 { padding: 120px 0px; } .skill_type { padding-top: 100px; } /*---------- Preloader Css Start -------*/ #preloader { background-color: #010101; bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 2147483647; width: 100%; height: 100%; } #status { background-position: center center; background-repeat: no-repeat; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); } #status img { width: 200px; -webkit-animation: rotate 2s linear infinite; -moz-animation: rotate 2s linear infinite; -o-animation: rotate 2s linear infinite; -ms-animation: rotate 2s linear infinite; animation: rotate 2s linear infinite; } /*---------- Heading Css Start -------*/ .prt_heading_wrapper { text-align: center; } .prt_heading { margin-bottom: 50px; display: inline-block; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_heading h1 { font-size: 40px; margin: 0px; text-transform: uppercase; position: relative; width: auto; font-family: NoeText-Semibold; font-weight: 500; padding-bottom: 15px; } .prt_heading h2 { font-size: 30px; margin: 0px; text-transform: uppercase; position: relative; width: auto; font-family: NoeText-Semibold; font-weight: 500; padding-bottom: 15px; } .prt_heading h1:after { content: ""; position: absolute; background-color: #ffffff; width: 100%; height: 2px; top: 100%; left: 0; } .prt_heading p { text-align: right; width: auto; text-transform: uppercase; background-color: #010101; margin: 0px; padding-left: 10px; position: absolute; right: 0; bottom: -10px; color: #f6483b; font-weight: 500; } .prt_heading_wrapper_2 { text-align: left; } .prt_heading_wrapper_2 .prt_heading { margin-bottom: 30px; } /*---------- Button css End -------*/ .prt_btn { height: 50px; line-height: 50px; color: #ffffff; font-size: 15px; font-weight: 400; border-radius: 0px; padding: 0 20px; min-width: 140px; outline: none; cursor: pointer; display: inline-block; text-align: center; text-transform: capitalize; background-color: #f6483b; border: 1px solid #f6483b; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_btn:hover, .prt_btn:focus { color: #f6483b; background-color: #111111; border: 1px solid #f6483b; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } /*---------- Typography css End -------*/ /*---------- Main Wrapper css Start -------*/ .prt_main_wrapper { position: relative; overflow-x: hidden; } .prt_main_wrapper::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #666666; } .prt_main_wrapper::-webkit-scrollbar { width: 0.1px; background-color: #F5F5F5; } .prt_main_wrapper::-webkit-scrollbar-thumb { background-color: #000000; } .prt_home_wrapper { background-image: url(../images/content/background.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; overflow-y: auto; padding: 200px 0px; } .prt_home_wrapper h1 { position: absolute; top: 50%; font-size: 150px; color: #ffffff; font-weight: bold; background: white; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: cover; font-family: NoeText-Semibold; background-position: -41px 140px; } .prt_logo_wrapper img { position: fixed; width: 50px; left: 50px; top: 50px; z-index: 2; -webkit-animation: rotate 10s linear infinite; -moz-animation: rotate 10s linear infinite; -o-animation: rotate 10s linear infinite; -ms-animation: rotate 10s linear infinite; animation: rotate 10s linear infinite; } @-webkit-keyframes rotate { 100% { -webkit-transform: rotatey(360deg); } } @-moz-keyframes rotate { 100% { -moz-transform: rotatey(360deg); } } @keyframes rotate { 100% { transform: rotatey(360deg); } } .prt_close_wrapper img { position: fixed; right: 50px; top: 50px; cursor: pointer; z-index: 2; } .prt_menu_wrapper { text-align: center; } .prt_menu_wrapper a { position: absolute; text-transform: uppercase; color: #ffffff; font-size: 18px; margin: 0px auto; z-index: 1; font-weight: 500; font-family: NoeText-Semibold; letter-spacing: 5px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_menu_wrapper a:hover { -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .6) 30%, #000 50%, rgba(0, 0, 0, .6) 70%); -moz-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .6) 30%, #000 50%, rgba(0, 0, 0, .6) 70%); -ms-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .6) 30%, #000 50%, rgba(0, 0, 0, .6) 70%); -o-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .6) 30%, #000 50%, rgba(0, 0, 0, .6) 70%); -webkit-mask-size: 200%; -moz-mask-size: 200%; -ms-mask-size: 200%; -o-mask-size: 200%; -webkit-animation: shine 1.3s infinite; -moz-animation: shine 1.3s infinite; -o-animation: shine 1.3s infinite; -ms-animation: shine 1.3s infinite; animation: shine 1.3s infinite; } @-webkit-keyframes shine { from { -webkit-mask-position: 150%; } to { -webkit-mask-position: -50%; } } .prt_menu_wrapper a.prt_top { top: 45px; left: 0px; right: 0px; width: 100px; } .prt_menu_wrapper a.prt_bottom { bottom: 45px; left: 0px; right: 0px; width: 150px; } .prt_menu_wrapper a.prt_left { top: 50%; left: -15px; transform: rotateZ(-90deg); margin-top: -15px; } .prt_menu_wrapper a.prt_right { top: 50%; right: 0px; transform: rotateZ(90deg); margin-top: -15px; } /*---------- About css Start -------*/ .prt_about_wrapper { background-color: #010101; position: absolute; width: 100%; top: -100%; z-index: 1; display: none; } .prt_about_info { display: inline-block; width: 100%; } .prt_about_img { display: inline-block; width: 100%; text-align: center; } .prt_about_img img { display: inline-block; } .prt_about_details { display: inline-block; width: 100%; } .prt_about_details p { margin-bottom: 30px; } .prt_about_details a.prt_btn { margin-right: 20px; margin-bottom: 10px; } .prt_about_edulearn_wrapper { display: inline-block; width: 100%; } .prt_about_learnsection { display: inline-block; width: 100%; position: relative; z-index: 1; } .prt_about_learnsection:after { content: ""; position: absolute; background-color: #202020; width: 2px; top: 0; bottom: 0; left: 0; right: 0; margin: 0px auto; z-index: -1; } .prt_about_learnbox_right { display: table; width: 100%; margin-bottom: 30px; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_about_learnbox_right:after { content: ""; position: absolute; background-color: #000000; width: 15px; height: 15px; border-radius: 100%; border: 3px solid #ffffff; top: 50%; left: -22px; margin-top: -7px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_about_learnbox_right:hover:after { background-color: #ffffff; border: 3px solid #f6483b; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_about_learnbox_left { display: table; width: 100%; margin-bottom: 30px; text-align: right; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_about_learnbox_left:after { content: ""; position: absolute; background-color: #000000; width: 15px; height: 15px; border-radius: 100%; border: 3px solid #ffffff; top: 50%; right: -22px; margin-top: -7px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_about_learnbox_left:hover:after { background-color: #ffffff; border: 3px solid #f6483b; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_about_learnbox_right:hover .prt_about_learnbox_year h1 { color: #f6483b; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_about_learnbox_left:hover .prt_about_learnbox_year h1 { color: #f6483b; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_about_learnbox_left .prt_about_learnbox_year { float: right; padding-top: 30px; } .prt_about_learnbox_year { display: table-cell; width: 200px; vertical-align: middle; } .prt_about_learnbox_year h1 { font-size: 60px; margin: 0px; color: #202020; font-weight: 500; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_about_learnbox_right:hover .prt_about_learnbox_year h1 { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -ms-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -webkit-animation-delay: 300ms; -moz-animation-delay: 300ms; -ms-animation-delay: 300ms; -o-animation-delay: 300ms; animation-delay: 300ms; animation-iteration-count: infinite; animation-name: pulse; } .prt_about_learnbox_left:hover .prt_about_learnbox_year h1 { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -ms-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -webkit-animation-delay: 300ms; -moz-animation-delay: 300ms; -ms-animation-delay: 300ms; -o-animation-delay: 300ms; animation-delay: 300ms; animation-iteration-count: infinite; animation-name: pulse; } .prt_about_learnbox_left .prt_about_learnbox_info { float: left; } .prt_about_learnbox_info { display: table-cell; width: calc(100% - 200px); } .prt_about_learnbox_info h4 { font-size: 18px; text-transform: capitalize; margin-top: 0px; } .prt_about_learnbox_info span { display: inline-block; width: 100%; color: #ffffff; text-transform: capitalize; margin-bottom: 10px; } .prt_about_learnbox_info p { margin: 0px; } .prt_about_experience_wrapper { display: inline-block; width: 100%; } .prt_about_experience { display: inline-block; width: 100%; } .prt_about_experiencebox { display: table; width: 100%; margin-bottom: 50px; position: relative; z-index: 1; padding: 50px 10px 50px 0px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_about_experiencebox:after { content: ""; position: absolute; background-color: #111111; top: 0; right: 0; bottom: 0; width: 8%; z-index: -1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_about_experiencebox:hover:after { background-color: rgba(255, 255, 255, 0.2); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_about_experiencebox:hover .prt_about_experience_year h1 { color: #f6483b; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_about_experience_year { display: table-cell; width: 230px; vertical-align: middle; } .prt_about_experience_year h1 { font-size: 100px; margin: 0px; color: #202020; font-weight: 500; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_about_experience_year h4 { font-size: 18px; text-transform: capitalize; margin: 0px; text-align: right; color: #b7b7b7; } .prt_about_experience_info { display: table-cell; width: calc(100% - 230px); padding-left: 30px; } .prt_about_experience_info h4 { font-size: 18px; text-transform: capitalize; margin-top: 0px; } .prt_about_experience_info span { display: inline-block; width: 100%; color: #ffffff; text-transform: capitalize; margin-bottom: 10px; } .prt_about_experience_info p { margin: 0px; } .prt_profile_info { display: inline-block; width: 100%; } .prt_profile_slider { display: inline-block; width: 100%; padding-top: 30px; text-align: center; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_profile_slider .owl-theme .owl-nav.disabled + .owl-dots { margin-top: 20px; } .prt_profile_slider i { display: inline-block; width: 100%; font-size: 76px; color: #202020; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_profile_slider .item:hover i.pl_clr1 { color: #1b73ff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_profile_slider .item:hover i.pl_clr2 { color: #c82663; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_profile_slider .item:hover i.pl_clr3 { color: #76c239; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_profile_slider h4 { display: inline-block; width: 100%; margin-bottom: 0px; color: #fffefe; margin-top: 20px; text-transform: capitalize; } .prt_profile_details { display: inline-block; width: 100%; } .prt_profile_details p { margin-bottom: 0px; } /*---------- Contact Page css Start -------*/ .prt_contact_wrapper { background-color: #010101; position: absolute; left: 100%; width: 100%; min-height: 100%; top: 0; z-index: 1; display: none; } .prt_contact_container { height: 100%; } .prt_contact_info { display: inline-block; margin-bottom: 50px; width: 100%; } .prt_contact_info h1 { font-size: 30px; display: inline-block; margin: 0px 0px 35px 0px; text-transform: uppercase; } .prt_contact_form { display: inline-block; width: 100%; } .prt_contact_form input, .prt_contact_form textarea { width: 100%; display: inline-block; margin-bottom: 30px; border: 0px; background-color: #111111; padding: 0px 15px; height: 50px; line-height: 50px; color: #ffffff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_contact_form input:hover, .prt_contact_form input:focus, .prt_contact_form textarea:hover, .prt_contact_form textarea:focus { background-color: rgba(255, 255, 255, 0.2); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_contact_form textarea { height: auto; resize: vertical; } .prt_contact_form .prt_btn { margin-top: 0px; } .prt_contact_map { display: inline-block; width: 100%; margin-bottom: 50px; } .prt_contact_map iframe { display: inline-block; width: 100%; height: 513px; border: 0px; } .prt_contact_details { display: inline-block; width: 100%; } .prt_contact_details_box { padding: 80px 0px; text-align: center; background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1; margin-top: 50px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_contact_details_box:hover { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .prt_contact_details_box:after { content: ""; position: absolute; background-color: rgba(0, 0, 0, 0.85); top: 0px; left: 0px; bottom: 0px; right: 0px; z-index: -1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_contact_details_box:hover:after { background-color: rgba(0, 0, 0, 0.75); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_contact_details_box h4 { font-size: 18px; margin-top: 0px; margin-bottom: 20px; text-transform: capitalize; } .prt_contact_details_box p { margin: 0px; } .prt_contact_details_box p a { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_contact_details_box p a:hover { color: #f6483b; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_contact_details_box.details_box1 { background-image: url(https://www.citizencall.fr/wp-content/uploads/2020/08/phoning-1080x675.jpeg); } .prt_contact_details_box.details_box2 { background-image: url(https://us.experteer.com/wordpress/wp-content/uploads/2015/08/glenn-carstens-peters-203007-1024x681.jpg); } .prt_contact_details_box.details_box3 { background-image: url(http://placehold.it/450X250); } /*---------- Services css Start -------*/ .prt_services_wrapper { background-color: #010101; position: absolute; width: 100%; top: 100%; z-index: 1; display: none; } .prt_services_slider_wrapper { display: inline-block; width: 100%; } .prt_services_slider_imgs { display: inline-block; width: 100%; text-align: center; position: relative; z-index: 1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_services_slider_imgs img.img_1, .prt_services_slider_imgs img.img_2, .prt_services_slider_imgs img.img_3, .prt_services_slider_imgs img.img_4 { position: absolute; left: 0; top: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_services_slider_imgs .img_2 { z-index: 3; -webkit-transform: translateX(-44px) scale(0.9); -moz-transform: translateX(-44px) scale(0.9); -ms-transform: translateX(-44px) scale(0.9); -o-transform: translateX(-44px) scale(0.9); transform: translateX(-44px) scale(0.9); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_services_slider_imgs .img_3 { z-index: 2; -webkit-transform: translateX(-85px) scale(0.8); -moz-transform: translateX(-85px) scale(0.8); -ms-transform: translateX(-85px) scale(0.8); -o-transform: translateX(-85px) scale(0.8); transform: translateX(-85px) scale(0.8); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_services_slider_imgs .img_4 { z-index: 1; -webkit-transform: translateX(-125px) scale(0.7); -moz-transform: translateX(-125px) scale(0.7); -ms-transform: translateX(-125px) scale(0.7); -o-transform: translateX(-125px) scale(0.7); transform: translateX(-125px) scale(0.7); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_services_slider_imgs img.active { -webkit-transform: translateX(0) scale(1); -moz-transform: translateX(0) scale(1); -ms-transform: translateX(0) scale(1); -o-transform: translateX(0) scale(1); transform: translateX(0) scale(1); z-index: 4; -webkit-animation: fadeIn 0.5s; -moz-animation: fadeIn 0.5s; -ms-animation: fadeIn 0.5s; -o-animation: fadeIn 0.5s; animation: fadeIn 0.5s; } .prt_services_slider_box { display: inline-block; width: 100%; } .prt_services_slider_text { float: left; width: 50%; text-align: center; overflow: hidden; height: 175px; margin-bottom: 30px; cursor: pointer; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_services_slider_text:hover img, .prt_services_slider_text.active img { width: 86px; height: 100px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_services_slider_text img { display: inline-block; width: 60px; height: 70px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_services_slider_text h4 { text-transform: capitalize; font-size: 18px; margin-bottom: 0px; margin-top: 20px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_services_slider_text:hover h4, .prt_services_slider_text.active h4 { margin-top: 30px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_services_slider_text:hover p, .prt_services_slider_text.active p { opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_services_slider_text p { margin-bottom: 0px; margin-top: 20px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_couter_wrapper { display: inline-block; width: 100%; background-image: url(http://placehold.it/1920X600); background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; position: relative; z-index: 1; } .prt_couter_wrapper:after { content: ""; position: absolute; background-color: rgba(0, 0, 0, 0.85); top: 0px; left: 0px; bottom: 0px; right: 0px; z-index: -1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_counter_box { display: inline-block; width: 100%; text-align: left; padding-left: 100px; margin-bottom: 30px; } .prt_counter_box h3 { font-size: 40px; margin: 0px; font-weight: 500; margin-top: -90px; margin-left: 80px; } .prt_counter_box p { font-size: 18px; margin-left: 80px; } .circles-text { font-size: 36px !important; color: #ffffff; font-weight: 500; } #canvas { display: inline-block; width: 100%; } #canvas .circle { display: inline-block; margin: 1em; width: 100px; height: 100px; } .iconify { display: inline-block; margin: 1em; width: 100px; height: 100px; } #canvas h5 { font-size: 18px; text-align: center; } #circles-1 { background-image: url(http://placehold.it/200X200); border-radius: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } #circles-2 { background-image: url(http://placehold.it/200X200); border-radius: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } #circles-3 { background-image: url(http://placehold.it/200X200); border-radius: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } #circles-4 { background-image: url(http://placehold.it/200X200); border-radius: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } .circles-decimals { font-size: .4em; } .prt_skills_wrapper { display: inline-block; width: 100%; } .prt_skills_bars { display: inline-block; width: 100%; } .prt_client_slider_wrapper { display: inline-block; width: 100%; } .prt_client_slider { display: inline-block; width: 100%; text-align: center; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_client_slider .owl-theme .owl-nav.disabled + .owl-dots { margin-top: 20px; } .prt_client_slider .owl-carousel .owl-item img { width: auto !important; display: inline-block; opacity: 0.4; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_client_slider .owl-carousel .owl-item img:hover { opacity: 1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } /*---------- Portfolio css Start -------*/ .prt_portfolio_wrapper { background-color: #010101; position: absolute; right: 100%; width: 100%; top: 0; z-index: 1; display: none; } .prt_loadmore { display: none; } .prt_portfolio_box { display: inline-block; width: 100%; } .prt_portfolio_box a { display: inline-block; margin-bottom: 30px; text-align: center; } .prt_portfolio_img { display: inline-block; width: auto; text-align: center; position: relative; overflow: hidden; z-index: 1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_portfolio_img:after { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: rgba(255, 255, 255, 0.5); z-index: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_portfolio_img:hover:after { opacity: 1; visibility: visible; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_portfolio_img img { display: inline-block; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_portfolio_img:hover img { display: inline-block; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_portfolio_img:hover .prt_portfolio_text { bottom: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_portfolio_text { position: absolute; bottom: -111px; left: 0px; width: 100%; text-align: left; padding: 30px; z-index: 1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_portfolio_text h4 { font-size: 18px; text-transform: uppercase; color: #000000; margin-top: 0px; } .prt_portfolio_text p { margin: 0px; text-transform: capitalize; color: #000000; } /*---------- Footer css Start -------*/ .prt_footer_wrapper { background-color: #0a0a0a; margin-top: 115px; } .prt_footer_wrapper p { display: inline-block; width: auto; text-align: left; color: #ffffff; margin: 0px; padding-top: 5px; } .prt_footer_wrapper p a { color: #ffffff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_footer_wrapper p a:hover { color: #f6483b; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_footer_wrapper ul { float: right; width: auto; margin: 0px; padding: 0px; } .prt_footer_wrapper ul li { display: inline-block; width: auto; list-style: none; margin: 0px 5px; } .prt_footer_wrapper ul li:last-child { margin-right: 0px; } .prt_footer_wrapper ul li:first-child { margin-left: 0px; } .prt_footer_wrapper ul li a { display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; background-color: #1c1c1c; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .prt_footer_wrapper ul li a:hover { color: #ffffff; background-color: #f6483b; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .link:hover { color: #f6483b; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } /*---------- Main Wrapper css End -------*/ /*---------- Responsive css Start -------*/ @media (min-width: 992px) and (max-width: 1199px) { .prt_counter_box { padding-left: 50px; } .prt_home_wrapper h1 { font-size: 120px; margin: 0px; } } @media (min-width: 768px) and (max-width: 991px) { .prt_profile_slider { padding-top: 0px; margin-bottom: 50px; } .prt_counter_box { padding-left: 0px; } .prt_about_learnbox_right:after { top: 0%; left: 0%; margin-top: 0 } .prt_about_learnbox_left:after { top: 0%; right: 0%; margin-top: 0 } .prt_about_learnsection:after { display: none; } .prt_about_learnbox_left, .prt_about_learnbox_right { border-bottom: 1px solid #202020; padding-bottom: 30px; } .prt_services_slider_wrapper { height: 1020px; position: relative; } .prt_services_slider_imgs { margin-left: 150px; } .prt_services_slider_box { position: absolute; top: 450px; left: 0; right: 0; margin: 0px auto; } .prt_home_wrapper h1 { font-size: 90px; margin: 0px; } } @media (max-width: 767px) { .prt_home_wrapper h1 { font-size: 90px; margin: 0px; text-align: center; } .prt_profile_slider { padding-top: 0px; margin-bottom: 50px; } .prt_about_learnbox_right:after { top: 0%; left: 0%; margin-top: 0 } .prt_about_learnbox_left:after { top: 0%; right: 0%; margin-top: 0 } .prt_about_learnsection:after { display: none; } .prt_about_learnbox_left, .prt_about_learnbox_right { border-bottom: 1px solid #202020; padding-bottom: 30px; } .prt_footer_wrapper p { width: 100%; text-align: center; margin: 0px 0px 20px 0px; } .prt_footer_wrapper ul { width: 100%; text-align: center; } .prt_services_slider_wrapper { height: 1020px; position: relative; } .prt_services_slider_imgs { margin-left: 150px; } .prt_services_slider_box { position: absolute; top: 450px; left: 0; right: 0; margin: 0px auto; } } @media (min-width: 620px) and (max-width: 700px) { .prt_services_slider_imgs { margin-left: 120px; } } @media (min-width: 540px) and (max-width: 619px) { .prt_services_slider_imgs { margin-left: 50px; } } @media (max-width: 539px) { .prt_services_slider_imgs { margin-left: 0px; } } @media (min-width: 480px) and (max-width: 767px) { } @media (max-width: 479px) { .prt_services_slider_imgs { margin-left: 0px; } .prt_heading h1 { font-size: 34px; } .prt_home_wrapper h1 { font-size: 50px; } .prt_counter_box { padding-left: 0px; } .prt_about_learnbox_year { display: table-caption; width: 100%; vertical-align: middle; padding-top: 0px; } .prt_about_learnbox_info { width: 100%; } .prt_about_experience_year { display: inline-block; width: 100%; } .prt_about_experience_year h4 { margin-bottom: 50px; text-align: left; } .prt_about_experience_info { display: inline-block; width: 100%; padding-left: 0px; } .prt_footer_wrapper ul li { margin: 0px 2px; } .prt_about_learnbox_right:after { display: none; } .prt_about_learnbox_left:after { display: none; } } @media (max-width: 390px) { .prt_services_slider_box { top: 350px; } .prt_services_slider_wrapper { height: 900px; } }