/* ==================================================== Theme Name : MHC Version : 1.5 Author : Mohamad Hajj Chehade ==================================================== TOC 1. PRIMARY STYLES 2. COMMONS FOR PAGE DESIGN 3. HEADER 4. INTRO SECTION 5. PORFOLIO SECTION 6. ABOUT SECTION 7. EXPERIENCE SECTION 8. EDUCATION SECTION 9. COUNTER SECTION 10. FOOTER 11. GOOGLE FONTS ==================================================== /* --------------------------------- 1. PRIMARY STYLES --------------------------------- */ html { font-size: 100%; height: 100%; overflow-x: hidden; margin: 0px; padding: 0px; touch-action: manipulation; } body { font-size: 16px; font-family: 'Poppins', serif; width: 100%; height: 100%; margin: 0; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; word-wrap: break-word; color: #333; } h1, h2, h3, h4, h5, h6, p, a, ul, span, li, img, inpot, button, email { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, email { line-height: 1.5; font-weight: inherit; } h1, h2, h3 { font-family: 'Poppins', cursive; } p { line-height: 1.6; font-size: 1.05em; font-weight: 400; color: #777; } h1 { font-size: 4em; line-height: 1; } h2 { font-size: 2.2em; line-height: 1.1; } h3 { font-size: 1.8em; } h4 { font-size: 1.3em; } h5 { font-size: 1em; } h6 { font-size: .9em; letter-spacing: 1px; } email { font-size: .9em; letter-spacing: 0px; } a, button { display: inline-block; text-decoration: none; color: inherit; line-height: 1; -webkit-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } a:focus, a:active, a:hover, button:focus, button:active, button:hover, a b.light-color:hover { text-decoration: none; color: #FFA804; } b { font-weight: 600; } img { width: 100%; } li { list-style: none; display: inline-block; } span { display: inline-block; } button { outline: 0; border: 0; background: none; cursor: pointer; } .icon { font-size: 1.1em; display: inline-block; line-height: inherit; } [class^="icon-"]:before, [class*=" icon-"]:before { line-height: inherit; } b.max-bold { font-weight: 700; } #MHCALERT { position: fixed; position: -webkit-sticky; position: sticky; bottom: 0; width: 100%; text-align: center; font-size: 20px; z-index: 11000000; height: auto; } /* --------------------------------- 2. COMMONS FOR PAGE DESIGN --------------------------------- */ .section { padding: 100px 0 50px; } .section .heading { margin-bottom: 60px; } .section .heading:before { content: ''; height: 10px; width: 50px; border-radius: 5px; margin-bottom: 20px; display: block; background: #04ff0c; } .margin-t-10 { margin-top: 10px; } .margin-b-30 { margin-bottom: 30px; } .margin-b-50 { margin-bottom: 50px; } .margin-tb-30 { margin-top: 30px; margin-bottom: 30px; } .font-yellow { color: #FFA600; } .font-blue { color: rgba(1, 159, 255, 0.92); } .font-pistachio { color: #04ff0c; } .font-white { color: #FFF; } .font-semi-white { color: #ddd; } .font-black { color: #000; } .font-lite-black { color: #999; } .center-text { text-align: center; } /* --------------------------------- 3. HEADER --------------------------------- */ header { position: absolute; top: 30px; left: 0; right: 0; z-index: 100; } header .heading-wrapper { border-radius: 5px; padding: 30px 40px 20px; background: linear-gradient(5deg, rgb(0, 165, 241), rgb(140, 171, 79)); color: #fff; border: solid 1px #fff; } header .info { margin-bottom: 10px; } header .info .icon { float: left; font-size: 30px; } header .info .right-area { margin-left: 45px; } header .downlad-btn { padding: 15px 30px; border-radius: 4px; float: right; margin-top: 30px; box-shadow: inset 0 0px 4px rgba(0, 0, 0, .3); background: linear-gradient(15deg, rgb(0, 45, 104), rgb(5, 165, 236)); color: #fff; opacity: 0.9; -webkit-transition: all .2s ease; transition: all .2s ease; } header .downlad-btn:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); border: solid 1px #fff; } /* --------------------------------- 4. INTRO SECTION --------------------------------- */ .intro-section { padding-top: 200px; position: relative; background-size: cover; z-index: 1; background-image: url(../images/triangle.jpg); } .intro-section:before { content: ''; z-index: -1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, .2); } .intro-section:after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 150px; z-index: -1; background: #fff; } .intro { padding: 0 20px; margin-top: 100px; text-align: center; background: #fff; } .intro .profile-img { height: 200px; width: 200px; border-radius: 100px; margin: 0 auto; overflow: hidden; position: relative; top: -100px; margin-bottom: -70px; border-bottom:2px solid rgb(0, 165, 241); border-top:2px solid rgb(140, 171, 79); } .intro .information>li { display: block; margin: 5px 0; } .intro .social-icons>li>a { height: 35px; line-height: 35px; width: 35px; border-radius: 20px; overflow: hidden; z-index: 1; position: relative; margin: 0 5px 5px; background: #fff; border: solid 1px; color: rgba(1, 159, 255, 0.92); } .intro .social-icons>li>a:after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; top: 0; z-index: -1; border-radius: 20px; background: rgba(1, 159, 255, 0.92); -webkit-transition: all .2s ease; transition: all .2s ease; -webkit-transform: scale(0); transform: scale(0); } .intro .social-icons>li>a:hover:after { -webkit-transform: scale(1); transform: scale(1); } .intro .social-icons>li>a:hover { color: #fff; } .intro .information.website { border-radius: 20px; overflow: hidden; margin: 0 5px 5px; background: #fff; border: solid 1px; color: rgba(1, 159, 255, 0.92); } .intro .information.website img.qcode { width: 150px; height: 150px; } .intro .information.website { display: none; } /* --------------------------------- 5. PORFOLIO SECTION --------------------------------- */ .portfolio-section { padding-bottom: 0; } .portfolio-section .portfolioFilter { margin-top: 60px; color: #666; } .portfolio-section .portfolioFilter a { margin: 10px 10px 0 0; } .portfolio-section .portfolioFilter a.current { color: #FFA804; } .portfolio-section .portfolioContainer { margin-left: -15px; margin-right: -15px; } .portfolio-section .p-item { width: 33.333%; padding: 0 7.5px 0px; margin-top: 15px; } .portfolio-section .p-item a { display: inline; } .portfolio-section .p-item.p-item-2 .img:first-child { float: left; width: 50%; padding-right: 7.5px; } .portfolio-section .p-item.p-item-2 .img:last-child { float: right; width: 50%; padding-left: 7.5px; } /* --------------------------------- 6. ABOUT SECTION --------------------------------- */ .radial-progress { position: relative; max-width: 200px; margin: 0 auto; } .radial-progress .progressbar-text { font-size: 2.2em; font-weight: 500; padding-bottom: 25px!important; color: #333!important; } .radial-progress .progressbar-text:after { content: '%'; } .radial-progress .progress-title { position: absolute; top: 50%; left: 50%; width: 100%; letter-spacing: 0; text-align: center; transform: translate(-50%, 15px); color: #777; } /* --------------------------------- 7. EXPERIENCE SECTION --------------------------------- */ .experience-section { background: linear-gradient(155deg, rgb(0, 165, 241), rgb(185, 156, 76)); color: #fff; } .experience .list>li, .oneevent .list>li { display: block; position: relative; margin-top: 10px; padding-left: 20px; } .experience .list>li:before, .oneevent .list>li:before { content: ''; position: absolute; top: 50%; left: 0; height: 10px; width: 10px; margin-top: -5px; display: block; border-radius: 10px; border: 2px solid #fff; } .timeline-wrapper { position: relative; } .timeline-wrapper:after { content: ''; position: absolute; top: 8px; bottom: 0; left: -51px; width: 2px; background: #ccc; } .timeline-wrapper .oneevent { position: relative; } .timeline-wrapper .oneevent:after { content: ''; position: absolute; top: 8px; left: -58px; width: 16px; height: 16px; border-radius: 10px; z-index: 1; box-shadow: 0 0 0 8px rgba(73, 133, 255, 0.83); background: #04ff0c; } .timeline-wrapper .oneevent .list { max-height: 250px; overflow-y: auto; } .experience-section .timeline-wrapper .oneevent:first-child:after { box-shadow: 0 0 0 8px rgb(255, 255, 255); } .experience-section .timeline-wrapper .oneevent:nth-child(1):after { box-shadow: 0 0 0 8px rgb(255, 255, 255); } .experience-section .timeline-wrapper .oneevent:nth-child(2):after { box-shadow: 0 0 0 8px rgb(255, 255, 255); } .experience-section .timeline-wrapper .oneevent:nth-child(3):after { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.45); background: #d8d8d8; } .experience-section .timeline-wrapper .oneevent:nth-child(4):after { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.25); background: #d8d8d8; } /* --------------------------------- 8. EDUCATION SECTION --------------------------------- */ .education-wrapper { position: relative; overflow: hidden; text-align: center; } .education-wrapper:after { content: ''; position: absolute; top: 8px; bottom: 0; left: 50%; margin-left: -1px; width: 2px; background: #ccc; } .education-wrapper .education { width: 50%; clear: both; position: relative; margin-top: -30px; } .education-wrapper .education:first-child { margin-top: 0; } .education-wrapper .education.left { float: left; padding-right: 50px; text-align: right; } .education-wrapper .education.right { float: right; padding-left: 50px; text-align: left; } .education-wrapper .education:after { content: ''; position: absolute; top: 8px; width: 16px; height: 16px; border-radius: 10px; z-index: 1; box-shadow: 0 0 0 8px rgba(255, 171, 0, .4); background: #FFAB00; } .education-wrapper .education.left:after { right: -8px; } .education-wrapper .education.right:after { left: -8px; } .education-section.section .heading { margin-bottom: 60px; display: inline-block; } .education-section.section .heading:before { content: ''; height: 10px; width: 50px; border-radius: 5px; margin: 0 auto 20px; display: block; background: #FFA804; } /* --------------------------------- 9. COUNTER SECTION --------------------------------- */ .counter-section { position: relative; padding: 100px 0 70px; background-size: cover; z-index: 1; background-image: url( ../images/triangle.jpg); color: #fff; } .counter-section:after { content: ''; z-index: -1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, .2); } .counter { position: relative; } .counter .title { text-align: right; margin-right: 130px; } .counter .desc { position: absolute; bottom: 4px; right: 0px; width: 110px; } .counter-section .col-sm-4.col-md-4.col-lg-4:first-child .desc{ /*width: 119px; */ } /* RADIAL PREOGRESS SECTION */ .radial-progress { position: relative; max-width: 200px; margin: 0 auto; } .radial-progress .progressbar-text { font-size: 2.2em; font-weight: 500; padding-bottom: 25px!important; color: #333!important; } .radial-progress .progressbar-text:after { content: '%'; } .radial-progress .progress-title { position: absolute; top: 50%; left: 50%; width: 100%; letter-spacing: 0; text-align: center; transform: translate(-50%, 15px); color: #777; } /* --------------------------------- 10. FOOTER --------------------------------- */ .copyright { text-align: center; padding: 30px 0; background: #28023D; } /* --------------------------------- 11. GOOGLE map --------------------------------- */ .gmap-section { display: none; } #MHCmap { width: 100%; height: 100%; min-height: 40vh; border-radius: 150px; } #MHCmap.notLoaded:before { content: ''; position: absolute; border-top: 16px solid rgb(0, 110, 255); border-right: 16px solid rgba(0, 110, 255, 0.8); border-bottom: 16px solid rgba(0, 110, 255, 0.493); border-left: 16px solid rgba(0, 110, 255, 0.276); border-radius: 45%; width: 120px; height: 120px; animation: spin 2s linear infinite; top: 50%; left: 50%; margin-top: -60px; margin-left: -60px; } #MHCmap a[href*="google"], #MHCmap .poi-info-window .view-link, #MHCmap .gmnoprint .gm-style-cc, .gmnoprint.gm-style-cc { display: none !important; } .gmap-section.section .heading:before { content: ''; height: 10px; width: 50px; border-radius: 5px; margin: 0 auto 20px; display: block; background: linear-gradient(150deg, rgb(255, 1, 0), rgb(255, 235, 0), rgb(120, 255, 0)) } /* ---page loader*/ .gm-style-iw .content .title{ background: #339933; color:#FFF; font-weight:600; border-radius:10px; padding:0px 10px; margin-bottom:2px; } .gm-style-iw .content .title.red { background: #ff0033; } .gm-style-iw.gm-style-iw-c{ padding:3px; box-shadow: 0 2px 7px 1px rgb(0, 0, 0); } .gm-style-iw .content .data span{ font-weight:600; } /* --------------------------------- page loade --------------------------------- */ #pageloader { position: fixed; display: block; width: 100%; height: 100%; background-color: rgba(199, 199, 199, 0.88); z-index: 100000000000; cursor: wait; text-align: center; } #pageloader .loader { content: ''; position: absolute; border-top: 16px solid rgb(0, 110, 255); border-right: 16px solid rgba(0, 110, 255, 0.8); border-bottom: 16px solid rgba(0, 110, 255, 0.493); border-left: 16px solid rgba(0, 110, 255, 0.276); border-radius: 45%; width: 120px; height: 120px; animation: spin 2s linear infinite; top: 50%; left: 50%; margin-top: -60px; margin-left: -60px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #oldie { display: none; } .OldIE #oldie { display: block!important; } .OldIE #oldie:before { content: 'For a better responsive website kindly use a newer version of IE or another browser'; display: block!important; position: fixed; position: -webkit-sticky; position: sticky; bottom: 0; color: rgb(255, 255, 255); background-color: rgba(0, 0, 0, 0.7); width: 100%; text-align: center; font-size: 20px; z-index: 10000000; height: auto; } /* --------------------------------- 12. GOOGLE FONTS --------------------------------- */ /* latin-ext */ @font-face { font-family: 'Allura'; font-style: normal; font-weight: 400; src: local('Allura Regular'), local('Allura-Regular'), url(../fonts/9oRPNYsQpS4zjuA_hQgWDto.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Allura'; font-style: normal; font-weight: 400; src: local('Allura Regular'), local('Allura-Regular'), url(../fonts/9oRPNYsQpS4zjuA_iwgW.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* devanagari */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; src: local('Poppins Regular'), local('Poppins-Regular'), url(../fonts/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } /* latin-ext */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; src: local('Poppins Regular'), local('Poppins-Regular'), url(../fonts/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; src: local('Poppins Regular'), local('Poppins-Regular'), url(../fonts/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* devanagari */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; src: local('Poppins Medium'), local('Poppins-Medium'), url(../fonts/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } /* latin-ext */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; src: local('Poppins Medium'), local('Poppins-Medium'), url(../fonts/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; src: local('Poppins Medium'), local('Poppins-Medium'), url(../fonts/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* devanagari */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; src: local('Poppins SemiBold'), local('Poppins-SemiBold'), url(../fonts/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } /* latin-ext */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; src: local('Poppins SemiBold'), local('Poppins-SemiBold'), url(../fonts/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; src: local('Poppins SemiBold'), local('Poppins-SemiBold'), url(../fonts/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* devanagari */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; src: local('Poppins Bold'), local('Poppins-Bold'), url(../fonts/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } /* latin-ext */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; src: local('Poppins Bold'), local('Poppins-Bold'), url(../fonts/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; src: local('Poppins Bold'), local('Poppins-Bold'), url(../fonts/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /*EDGED FONTS*/ @font-face { font-family: 'Allura'; font-style: normal; font-weight: 400; src: local('Allura Regular'), local('Allura-Regular'), url(../fonts/9oRPNYsQpS4zjuA_iwgQ.woff) format('woff'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; src: local('Poppins Regular'), local('Poppins-Regular'), url(../fonts/pxiEyp8kv8JHgFVrJJfedA.woff) format('woff'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; src: local('Poppins Medium'), local('Poppins-Medium'), url(../fonts/pxiByp8kv8JHgFVrLGT9Z1xlEw.woff) format('woff'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; src: local('Poppins SemiBold'), local('Poppins-SemiBold'), url(../fonts/pxiByp8kv8JHgFVrLEj6Z1xlEw.woff) format('woff'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; src: local('Poppins Bold'), local('Poppins-Bold'), url(../fonts/pxiByp8kv8JHgFVrLCz7Z1xlEw.woff) format('woff'); }