/********************************************************************* Template Name: Purex - Creative Agency HTML Template Description: Purex is a responsive agency template built to create modern powerful agency website. Author: BasicTheme Version: 1.1 Note: This is style scss. *********************************************************************/ /*=========================================================================== CSS INDEX ============================================================================= 01.Basic Styles 02. Section title 03. Button styles 04. Header styles 05. Slider styles 06. Footer styles 07. Feature styles 08. About styles 09. Service styles 10. Work styles 11. Small layouts 12. Portfolio Styles 13. Skill styles 14. Slider Styles 15. Team styles 16. Testimonial 17. Contact styles 18. Left nav styles 19. Blog styles 20. Blog grid styles 21. Blog list styles 22. Single blog styles ============================================================================= END INDEX =============================================================================*/ /* 01.Basic Styles */ body { font-family: 'Open Sans', sans-serif; font-weight: 400; font-style: normal; font-size: 14px; line-height: 24px; color: #666666; } img { max-width: 100%; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } a { outline: none; text-decoration: none; color: #666666; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } a:focus, a:visited, a:hover { color: #223c51; outline: medium none; text-decoration: none; } input, select, textarea { background: transparent; border: 1px solid #eeeeee; height: 50px; color: #666666; padding-left: 30px; padding-right: 30px; font-size: 14px; width: 100%; outline: none; box-shadow: none; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } input:focus, select:focus, textarea:focus { border: 1px solid #223C51; outline: none; } option { background: #fff; border: none; padding: 5px 15px 5px 15px; } textarea { resize: vertical; padding-top: 15px; } ::placeholder, ::-moz-placeholder { color: #666666; font-size: 14px; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } h1, h2, h3, h4, h5, h6 { color: #666666; font-family: "Montserrat", sans-serif; font-style: normal; font-weight: 400; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; } h1 { font-size: 40px; font-weight: 700; } h2 { font-size: 35px; font-weight: 500; } h3 { font-size: 28px; } h4 { font-size: 22px; } h5 { font-size: 18px; } h6 { font-size: 16px; } ul, ol { margin: 0px; padding: 0px; } ul li, ol li { list-style: none; } hr { border-bottom: 1px solid #eeeeee; border-top: 0px; } label { font-size: 14px; font-weight: 400; color: #666666; } *::-moz-selection { background: #e41815; color: #fff; text-shadow: none; } ::-moz-selection { background: #e41815; color: #fff; text-shadow: none; } ::selection { background: #e41815; color: #fff; text-shadow: none; } .mark, mark { background: #e41815 none repeat scroll 0 0; color: #666666; } span.tooltip-content { color: #666666; cursor: help; font-weight: 600; } .f-left { float: left; } .f-right { float: right; } .fix { overflow: hidden; } .browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } .owl-carousel .owl-nav div { background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0; height: 40px; left: 20px; line-height: 40px; opacity: 0; position: absolute; text-align: center; top: 50%; transform: translateY(-50%); transition: all 0.3s ease 0s; visibility: hidden; width: 40px; color:#444 } .owl-carousel .owl-nav div.owl-next { left: auto; right: 20px; } .owl-carousel:hover .owl-nav div { opacity: 1; visibility: visible; } .owl-carousel .owl-nav div:hover { background: #2B96CC; color: #fff; width:60px; } /* Back-to-top */ #scrollUp { z-index: 999; position: fixed; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; margin: 0px; color: #fff; position: fixed; bottom: 20px; right: 20px; border-radius: 3px; background: #223C51; font-size: 22px; width: 40px; height: 40px; text-align: center; line-height: 38px; } #scrollUp:hover { opacity: 0.9; } .na-section { background-size: cover; background-position: center center; } /******* Define margin padding ******/ /* Margin top */ .mt-10 { margin-top: 10px; } .mt-20 { margin-top: 20px; } .mt-30 { margin-top: 30px; } .mt-40 { margin-top: 40px; } .mt-50 { margin-top: 50px; } .mt-60 { margin-top: 60px; } .mt-70 { margin-top: 70px; } .mt-80 { margin-top: 80px; } .mt-90 { margin-top: 90px; } .mt-100 { margin-top: 100px; } .mt-110 { margin-top: 110px; } .mt-120 { margin-top: 120px; } .mt-130 { margin-top: 130px; } .mt-140 { margin-top: 140px; } .mt-150 { margin-top: 150px; } /* Margin Bottom */ .mb-10 { margin-bottom: 10px; } .mb-20 { margin-bottom: 20px; } .mb-30 { margin-bottom: 30px; } .mb-40 { margin-bottom: 40px; } .mb-50 { margin-bottom: 50px; } .mb-60 { margin-bottom: 60px; } .mb-70 { margin-bottom: 70px; } .mb-80 { margin-bottom: 80px; } .mb-90 { margin-bottom: 90px; } .mb-100 { margin-bottom: 100px; } .mb-110 { margin-bottom: 110px; } .mb-120 { margin-bottom: 120px; } .mb-130 { margin-bottom: 130px; } .mb-140 { margin-bottom: 140px; } .mb-150 { margin-bottom: 150px; } /* Margin right */ .mr-10 { margin-right: 10px; } .mr-20 { margin-right: 20px; } .mr-30 { margin-right: 30px; } .mr-40 { margin-right: 40px; } .mr-50 { margin-right: 50px; } .mr-60 { margin-right: 60px; } .mr-70 { margin-right: 70px; } .mr-80 { margin-right: 80px; } .mr-90 { margin-right: 90px; } .mr-100 { margin-right: 100px; } .mr-110 { margin-right: 110px; } .mr-120 { margin-right: 120px; } .mr-130 { margin-right: 130px; } .mr-140 { margin-right: 140px; } .mr-150 { margin-right: 150px; } /* Margin left*/ .ml-10 { margin-left: 10px; } .ml-20 { margin-left: 20px; } .ml-30 { margin-left: 30px; } .ml-40 { margin-left: 40px; } .ml-50 { margin-left: 50px; } .ml-60 { margin-left: 60px; } .ml-70 { margin-left: 70px; } .ml-80 { margin-left: 80px; } .ml-90 { margin-left: 90px; } .ml-100 { margin-left: 100px; } .ml-110 { margin-left: 110px; } .ml-120 { margin-left: 120px; } .ml-130 { margin-left: 130px; } .ml-140 { margin-left: 140px; } .ml-150 { margin-left: 150px; } /* Margin Left right */ .mlr-10 { margin: 0 10px; } .mlr-20 { margin: 0 20px; } .mlr-30 { margin: 0 30px; } .mlr-40 { margin: 0 40px; } .mlr-50 { margin: 0 50px; } .mlr-60 { margin: 0 60px; } .mlr-70 { margin: 0 70px; } .mlr-80 { margin: 0 80px; } .mlr-90 { margin: 0 90px; } .mlr-100 { margin: 0 100px; } .mlr-110 { margin: 0 110px; } .mlr-120 { margin: 0 120px; } .mlr-130 { margin: 0 130px; } .mlr-140 { margin: 0 140px; } .mlr-150 { margin: 0 150px; } /* Margin top bottom*/ .mtb-10 { margin: 10px 0; } .mtb-20 { margin: 20px 0; } .mtb-30 { margin: 30px 0; } .mtb-40 { margin: 40px 0; } .mtb-50 { margin: 50px 0; } .mtb-60 { margin: 60px 0; } .mtb-70 { margin: 70px 0; } .mtb-80 { margin: 80px 0; } .mtb-90 { margin: 90px 0; } .mtb-100 { margin: 100px 0; } .mtb-110 { margin: 110px 0; } .mtb-120 { margin: 120px 0; } .mtb-130 { margin: 130px 0; } .mtb-140 { margin: 140px 0; } .mtb-150 { margin: 150px 0; } /* padding top */ .pt-10 { padding-top: 10px; } .pt-20 { padding-top: 20px; } .pt-30 { padding-top: 30px; } .pt-40 { padding-top: 40px; } .pt-50 { padding-top: 50px; } .pt-60 { padding-top: 60px; } .pt-70 { padding-top: 70px; } .pt-80 { padding-top: 80px; } .pt-90 { padding-top: 90px; } .pt-100 { padding-top: 100px; } .pt-110 { padding-top: 110px; } .pt-120 { padding-top: 120px; } .pt-130 { padding-top: 130px; } .pt-140 { padding-top: 140px; } .pt-150 { padding-top: 150px; } /* padding Bottom */ .pb-10 { padding-bottom: 10px; } .pb-20 { padding-bottom: 20px; } .pb-30 { padding-bottom: 30px; } .pb-40 { padding-bottom: 40px; } .pb-50 { padding-bottom: 50px; } .pb-60 { padding-bottom: 60px; } .pb-70 { padding-bottom: 70px; } .pb-80 { padding-bottom: 80px; } .pb-90 { padding-bottom: 90px; } .pb-100 { padding-bottom: 100px; } .pb-110 { padding-bottom: 110px; } .pb-120 { padding-bottom: 120px; } .pb-130 { padding-bottom: 130px; } .pb-140 { padding-bottom: 140px; } .pb-150 { padding-bottom: 150px; } /* padding right */ .pr-10 { padding-right: 10px; } .pr-20 { padding-right: 20px; } .pr-30 { padding-right: 30px; } .pr-40 { padding-right: 40px; } .pr-50 { padding-right: 50px; } .pr-60 { padding-right: 60px; } .pr-70 { padding-right: 70px; } .pr-80 { padding-right: 80px; } .pr-90 { padding-right: 90px; } .pr-100 { padding-right: 100px; } .pr-110 { padding-right: 110px; } .pr-120 { padding-right: 120px; } .pr-130 { padding-right: 130px; } .pr-140 { padding-right: 140px; } .pr-150 { padding-right: 150px; } /* padding left*/ .pl-10 { padding-left: 10px; } .pl-20 { padding-left: 20px; } .pl-30 { padding-left: 30px; } .pl-40 { padding-left: 40px; } .pl-50 { padding-left: 50px; } .pl-60 { padding-left: 60px; } .pl-70 { padding-left: 70px; } .pl-80 { padding-left: 80px; } .pl-90 { padding-left: 90px; } .pl-100 { padding-left: 100px; } .pl-110 { padding-left: 110px; } .pl-120 { padding-left: 120px; } .pl-130 { padding-left: 130px; } .pl-140 { padding-left: 140px; } .pl-150 { padding-left: 150px; } /* padding Left right */ .plr-10 { padding: 0 10px; } .plr-20 { padding: 0 20px; } .plr-30 { padding: 0 30px; } .plr-40 { padding: 0 40px; } .plr-50 { padding: 0 50px; } .plr-60 { padding: 0 60px; } .plr-70 { padding: 0 70px; } .plr-80 { padding: 0 80px; } .plr-90 { padding: 0 90px; } .plr-100 { padding: 0 100px; } .plr-110 { padding: 0 110px; } .plr-120 { padding: 0 120px; } .plr-130 { padding: 0 130px; } .plr-140 { padding: 0 140px; } .plr-150 { padding: 0 150px; } /* padding top bottom*/ .ptb-10 { padding: 10px 0; } .ptb-20 { padding: 20px 0; } .ptb-30 { padding: 30px 0; } .ptb-40 { padding: 40px 0; } .ptb-50 { padding: 50px 0; } .ptb-60 { padding: 60px 0; } .ptb-70 { padding: 70px 0; } .ptb-80 { padding: 80px 0; } .ptb-90 { padding: 90px 0; } .ptb-100 { padding: 100px 0; } .ptb-110 { padding: 110px 0; } .ptb-120 { padding: 120px 0; } .ptb-130 { padding: 130px 0; } .ptb-140 { padding: 140px 0; } .ptb-150 { padding: 150px 0; } /*Custom cloumn*/ .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10 { float: left; } .col-1 { width: 10%; } .col-2 { width: 20%; } .col-3 { width: 30%; } .col-4 { width: 40%; } .col-5 { width: 50%; } .col-6 { width: 60%; } .col-7 { width: 70%; } .col-8 { width: 80%; } .col-9 { width: 90%; } .col-10 { width: 100%; } /*Opacity background*/ [data-overlay], [data-black-overlay] { position: relative; } [data-overlay]:before, [data-black-overlay]:before { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } [data-black-overlay]:before { background: #000; } [data-overlay]:before { background: #fff; } [data-overlay="0"]:before, [data-black-overlay="0"]:before { opacity: 0; } [data-overlay="1"]:before, [data-black-overlay="1"]:before { opacity: 0.1; } [data-overlay="2"]:before, [data-black-overlay="2"]:before { opacity: 0.2; } [data-overlay="3"]:before, [data-black-overlay="3"]:before { opacity: 0.3; } [data-overlay="4"]:before, [data-black-overlay="4"]:before { opacity: 0.4; } [data-overlay="5"]:before, [data-black-overlay="5"]:before { opacity: 0.5; } [data-overlay="6"]:before, [data-black-overlay="6"]:before { opacity: 0.6; } [data-overlay="7"]:before, [data-black-overlay="7"]:before { opacity: 0.7; } [data-overlay="8"]:before, [data-black-overlay="8"]:before { opacity: 0.8; } [data-overlay="9"]:before, [data-black-overlay="9"]:before { opacity: 0.9; } [data-overlay="10"]:before, [data-black-overlay="10"]:before { opacity: 1; } [data-overlay] > div, [data-black-overlay] > div { position: relative; z-index: 1; } /*Colored background*/ .bg-white { background: #fff; } .bg-gray { background: #f5f5f5; } .bg-gray-dark { background: #1d1d1b; } .bg-black { background: #000000; } .bg-primary { background: #e41815; } .bg-secondary { background: #cc413f; } .bg-transparent { background: transparent; } /*Colored text*/ .text-white { color: #fff; } .text-gray { color: #f5f5f5; } .text-gray-light { color: #aaa; } .text-black { color: #000000; } .text-primary { color: #666; } .text-secondary { color: #e41815; opacity: .75; } .text-transparent { color: transparent; } /*image background*/ .sbg-1 { background: url(../images/slider/1.jpg); } .sbg-2 { background: url(../images/slider/2.jpg); } .sbg-3 { background: url(../images/slider/3.jpg); } .sbg-4 { background: url(../images/slider/4.jpg); } .sbg-1, .sbg-2, .sbg-3, .sbg-4 { background-clip: initial; background-repeat: no-repeat; background-size: cover; background-color: transparent; background-origin: initial; background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; } .bg-1 { background: url(../images/bg/1.jpg); } .bg-2 { background: url(../images/bg/2.jpg); } .bg-3 { background: url(../images/bg/3.jpg); } .bg-4 { background: url(../images/bg/4.jpg); } .bg-5 { background: url(../images/bg/5.jpg); } .bg-6 { background: url(../images/bg/6.jpg); } .bg-7 { background: url(../images/bg/7.jpg); } .bg-8 { background: url(../images/bg/8.jpg); } .bg-9 { background: url(../images/bg/9.jpg); } .bg-10 { background: url(../images/bg/10.jpg); } .bg-1, .bg-2, .bg-3, .bg-4, .bg-5, .bg-6, .bg-7, .bg-8, .bg-9, .bg-10 { background-attachment: fixed; background-clip: initial; background-repeat: no-repeat; background-size: cover; background-color: transparent; background-origin: initial; background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; } @media screen and (-webkit-min-device-pixel-ratio: 0) { .bg-1, .bg-2, .bg-3, .bg-4, .bg-5, .bg-6, .bg-7, .bg-8, .bg-9, .bg-10 { background-attachment: scroll; } .sbg-1, .sbg-2, .sbg-3, .sbg-4 { background-attachment: scroll; } } /* Blur bg */ .blur--bg-1 { position: relative; overflow: hidden; } .blur--bg-1 > div { z-index: 1; } .blur--bg-1:before { background: url(../images/bg/1.jpg) no-repeat scroll center center; position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 100%; -webkit-filter: blur(30px); -moz-filter: blur(30px); -ms-filter: blur(30px); -o-filter: blur(30px); filter: blur(30px); } .blur--bg-2 { position: relative; overflow: hidden; } .blur--bg-2 > div { z-index: 1; } .blur--bg-2:before { background: url(../images/bg/2.jpg) no-repeat scroll center center; position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 100%; -webkit-filter: blur(30px); -moz-filter: blur(30px); -ms-filter: blur(30px); -o-filter: blur(30px); filter: blur(30px); } .blur--bg-3 { position: relative; overflow: hidden; } .blur--bg-3 > div { z-index: 1; } .blur--bg-3:before { background: url(../images/bg/3.jpg) no-repeat scroll center center; position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 100%; -webkit-filter: blur(30px); -moz-filter: blur(30px); -ms-filter: blur(30px); -o-filter: blur(30px); filter: blur(30px); } .blur--bg-4 { position: relative; overflow: hidden; } .blur--bg-4 > div { z-index: 1; } .blur--bg-4:before { background: url(../images/bg/4.jpg) no-repeat scroll center center; position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 100%; -webkit-filter: blur(30px); -moz-filter: blur(30px); -ms-filter: blur(30px); -o-filter: blur(30px); filter: blur(30px); } .blur--bg-5 { position: relative; overflow: hidden; } .blur--bg-5 > div { z-index: 1; } .blur--bg-5:before { background: url(../images/bg/5.jpg) no-repeat scroll center center; position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 100%; -webkit-filter: blur(30px); -moz-filter: blur(30px); -ms-filter: blur(30px); -o-filter: blur(30px); filter: blur(30px); } .blur--bg-6 { position: relative; overflow: hidden; } .blur--bg-6 > div { z-index: 1; } .blur--bg-6:before { background: url(../images/bg/6.jpg) no-repeat scroll center center; position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 100%; -webkit-filter: blur(30px); -moz-filter: blur(30px); -ms-filter: blur(30px); -o-filter: blur(30px); filter: blur(30px); } .blur--bg-7 { position: relative; overflow: hidden; } .blur--bg-7 > div { z-index: 1; } .blur--bg-7:before { background: url(../images/bg/7.jpg) no-repeat scroll center center; position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 100%; -webkit-filter: blur(30px); -moz-filter: blur(30px); -ms-filter: blur(30px); -o-filter: blur(30px); filter: blur(30px); } .blur--bg-8 { position: relative; overflow: hidden; } .blur--bg-8 > div { z-index: 1; } .blur--bg-8:before { background: url(../images/bg/8.jpg) no-repeat scroll center center; position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 100%; -webkit-filter: blur(30px); -moz-filter: blur(30px); -ms-filter: blur(30px); -o-filter: blur(30px); filter: blur(30px); } .blur--bg-9 { position: relative; overflow: hidden; } .blur--bg-9 > div { z-index: 1; } .blur--bg-9:before { background: url(../images/bg/9.jpg) no-repeat scroll center center; position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 100%; -webkit-filter: blur(30px); -moz-filter: blur(30px); -ms-filter: blur(30px); -o-filter: blur(30px); filter: blur(30px); } .blur--bg-10 { position: relative; overflow: hidden; } .blur--bg-10 > div { z-index: 1; } .blur--bg-10:before { background: url(../images/bg/10.jpg) no-repeat scroll center center; position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 100%; -webkit-filter: blur(30px); -moz-filter: blur(30px); -ms-filter: blur(30px); -o-filter: blur(30px); filter: blur(30px); } /*pattern background*/ .pattern-bg { background: url(../../images/pattern/pattern-bg.png) repeat; background-position: top right; background-color: #eceff7; } /*Tooltip*/ .social-icon-tooltip [data-tooltip], .social-icon-tooltip .tooltip { cursor: pointer; position: relative; } .social-icon-tooltip [data-tooltip]::before, .social-icon-tooltip [data-tooltip]::after, .social-icon-tooltip .tooltip::before, .social-icon-tooltip .tooltip::after { opacity: 0; pointer-events: none; position: absolute; -webkit-transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); -o-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); transition: opacity 0.2s ease-in-out 0s, visibility 0.2s ease-in-out 0s, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24) 0s; visibility: hidden; } .social-icon-tooltip [data-tooltip]:hover::before, .social-icon-tooltip [data-tooltip]:hover::after, .social-icon-tooltip [data-tooltip]:focus::before, .social-icon-tooltip [data-tooltip]:focus::after, .social-icon-tooltip .tooltip:hover::before, .social-icon-tooltip .tooltip:hover::after, .social-icon-tooltip .tooltip:focus::before, .social-icon-tooltip .tooltip:focus::after { opacity: 1; visibility: visible; } .social-icon-tooltip .tooltip::before, .social-icon-tooltip [data-tooltip]::before { background: transparent none repeat scroll 0 0; border: 6px solid transparent; content: ""; z-index: 1001; } .social-icon-tooltip .tooltip::after, .social-icon-tooltip [data-tooltip]::after { background-color: #00a9da; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; color: #ffffff; content: attr(data-tooltip); font-size: 14px; line-height: 1.2; padding: 8px; text-align: center; width: 100px; z-index: 1000; } .social-icon-tooltip [data-tooltip]::before, .social-icon-tooltip [data-tooltip]::after, .social-icon-tooltip .tooltip::before, .social-icon-tooltip .tooltip::after, .social-icon-tooltip .tooltip-top::before, .social-icon-tooltip .tooltip-top::after { bottom: 100%; left: 50%; } .social-icon-tooltip [data-tooltip]::before, .social-icon-tooltip .tooltip::before, .social-icon-tooltip .tooltip-top::before { border-top-color: #00a9da; margin-bottom: -12px; margin-left: -6px; } .social-icon-tooltip [data-tooltip]::after, .social-icon-tooltip .tooltip::after, .social-icon-tooltip .tooltip-top::after { margin-left: -50px; } .social-icon-tooltip [data-tooltip]:hover::before, .social-icon-tooltip [data-tooltip]:hover::after, .social-icon-tooltip [data-tooltip]:focus::before, .social-icon-tooltip [data-tooltip]:focus::after, .social-icon-tooltip .tooltip:hover::before, .social-icon-tooltip .tooltip:hover::after, .social-icon-tooltip .tooltip:focus::before, .social-icon-tooltip .tooltip:focus::after, .social-icon-tooltip .tooltip-top:hover::before, .social-icon-tooltip .tooltip-top:hover::after, .social-icon-tooltip .tooltip-top:focus::before, .social-icon-tooltip .tooltip-top:focus::after { -webkit-transform: translateY(-25px); -moz-transform: translateY(-25px); -ms-transform: translateY(-25px); -o-transform: translateY(-25px); transform: translateY(-25px); } @media only screen and (max-width: 479px) { .ptb-100 { padding: 50px 0; } .pt-100 { padding-top: 50px; } .pb-100 { padding-bottom: 50px; } .pt-70 { padding-top: 50px; } } @media only screen and (max-width: 767px) { .ptb-100 { padding: 60px 0; } .pt-100 { padding-top: 60px; } .pb-100 { padding-bottom: 60px; } .pt-70 { padding-top: 50px; } } /* 02. Section title */ .na-title h2 { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 36px; color: #000; margin-top: -5px; margin-bottom: 0px; padding-bottom: 10px; } .na-title h5 { letter-spacing: 2px; } .na-title p { padding-top: 20px; } .na-title.na-title--white h2 { color: #fff; } .na-title.na-title--white span.na-title__line { color: #fff; } .na-title.na-title--devidebar h2 { position: relative; display: inline-block; padding-bottom: 15px; } .na-title.na-title--devidebar h2:after { content: ""; position: absolute; top: 100%; left: 0%; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); height: 2px; width: 100px; background: #444; } .na-title.na-title--devidebar p { padding-top: 25px; } .na-title.na-title--devidebar.text-center h2:after { left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .na-title.na-title--devidebar.text-right h2:after { left: auto; right: 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } .na-title.na-title--devidebar__2 { margin-bottom: 20px; } .na-title.na-title--devidebar__2 h2 { display: block; } .na-title.na-title--devidebar__2 span.na-title__line { display: inline-block; position: relative; padding: 0px 10px; font-size: 16px; } .na-title.na-title--devidebar__2 span.na-title__line:before { content: ""; position: absolute; right: 120%; top: 50%; width: 100px; height: 1px; background: rgba(255, 255, 255, 0.5); } .na-title.na-title--devidebar__2 span.na-title__line:after { content: ""; position: absolute; left: 120%; top: 50%; width: 100px; height: 1px; background: rgba(255, 255, 255, 0.5); } @media only screen and (max-width: 479px) { .na-title { text-align: center; } .na-title h2 { font-size: 32px; } .na-title h5 { font-size: 14px; letter-spacing: 0px; } .na-title.na-title--devidebar { text-align: center; } .na-title.na-title--devidebar h2:after { left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .na-title.na-title--devidebar.text-right h2:after { left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } } @media only screen and (max-width: 767px) { .na-title { text-align: center; } .na-title h2 { font-size: 32px; } .na-title h5 { font-size: 14px; letter-spacing: 0px; } .na-title.na-title--devidebar { text-align: center; } .na-title.na-title--devidebar h2:after { left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .na-title.na-title--devidebar.text-right h2:after { left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } } /* 03. Button styles */ .na-btn { display: inline-block; height: 50px; padding: 0 35px; line-height: 50px; color: #fff !important; background: #223c51; font-family: "Montserrat", sans-serif; font-weight: 500; letter-spacing: 1px; position: relative; z-index: 1; border: none; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .na-btn:before { position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 100%; -webkit-transform: scaleX(0.5); -moz-transform: scaleX(0.5); -ms-transform: scaleX(0.5); -o-transform: scaleX(0.5); transform: scaleX(0.5); opacity: 0; z-index: -1; background: rgba(0, 0, 0, 0.1); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .na-btn:hover { color: #fff; } .na-btn:hover:before { opacity: 1; -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } .na-btn.na-btn--transparent { background: transparent; border: 1px solid #353535; } .na-btn.na-btn--transparent:hover { color: #fff; background: #e41815; border-color: #e41815; } .na-btn.na-btn--large { padding: 0 50px; } .na-btn.na-btn--radius { -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; background: transparent; } .na-btn.na-btn--radius:before { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); background: #e41815; opacity: 1; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; } .na-btn.na-btn--radius:hover:before { opacity: .7; } /* 04. Header styles */ .header-area { position: absolute; width: 100%; z-index: 2; padding-top: 30px; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } .header-area .logo-menu-wrap { display: -webkit- flex; display: -moz- flex; display: -ms- flex; display: -o- flex; display: flex; align-items: center; justify-content: space-between; } .header-area .logo-menu-wrap nav.menu ul { padding: 0px; text-align: right; } .header-area .logo-menu-wrap nav.menu ul li { padding: 0 15px; display: inline-block; } .header-area .logo-menu-wrap nav.menu ul li a { color: #fff; display: inline-block; font-family: "Montserrat",sans-serif; font-size: 15px; font-weight: 500; padding: 20px 0; text-transform: capitalize; } .header-area .logo-menu-wrap nav.menu ul li.buy-now a { border: 2px solid #223C51; padding: 8px 30px; border-radius: 30px; } .header-area .logo-menu-wrap nav.menu ul li.buy-now a:hover{background:#223C51;color:#fff } .header-area .logo-menu-wrap nav.menu ul li:hover a, .header-area .logo-menu-wrap nav.menu ul li.current a { color: #223C51; } .header-area .logo-menu-wrap nav.menu ul li:last-child { padding-right: 0px; } .header-area .logo-menu-wrap nav.menu ul li.na-dropdown { position: relative; } .header-area .logo-menu-wrap nav.menu ul li.na-dropdown:after { content: "\f107"; font-family: fontAwesome; color: #fff; font-size: 18px; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .header-area .logo-menu-wrap nav.menu ul li.na-dropdown .na-dropdown__content { position: absolute; left: 0; top: 110%; background: #e5e5e5; width: 200px; text-align: left; border-top: 5px solid #223C51; z-index: -1; visibility: hidden; opacity: 0; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .header-area .logo-menu-wrap nav.menu ul li.na-dropdown .na-dropdown__content li { border-bottom: 1px solid rgba(255, 255, 255, 0.8); display: block; padding: inherit; } .header-area .logo-menu-wrap nav.menu ul li.na-dropdown .na-dropdown__content li a { padding: 10px 15px; display: block; color: #666666; font-weight: 400; font-size: 14px; } .header-area .logo-menu-wrap nav.menu ul li.na-dropdown .na-dropdown__content li a:hover { color: #223C51; } .header-area .logo-menu-wrap nav.menu ul li.na-dropdown .na-dropdown__content li:last-child { border: none; } .header-area .logo-menu-wrap nav.menu ul li.na-dropdown:hover:after { color: #223C51; content: "\f106"; } .header-area .logo-menu-wrap nav.menu ul li.na-dropdown:hover .na-dropdown__content { visibility: visible; opacity: 1; z-index: 9; top: 100%; } .header-area .logo-menu-wrap nav.menu ul li.na-dropdown.current:after { color: #e41815; } .header-area.right-sidebar-nav .container .row { position: inherit; } .header-area.right-sidebar-nav .container .row .col-md-12 { position: inherit; } .header-area.sticky { position: fixed; padding-top: 0px; top: 0; z-index: 99; background: #0d0d0d; -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1); -o-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1); box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1); } .header-area.header--without-menu { padding-top: 40px; padding-bottom: 15px; } .header-area.header--without-menu.sticky { padding-top: 15px; padding-bottom: 15px; } .header-area.header--solid-bg { position: absolute; padding-top: 0px; } .header-area.header--solid-bg nav.menu ul li a { padding: 30px 0; } .header-area.header--solid-bg.sticky { position: fixed; } .header-area.header--solid-bg.sticky nav.menu ul li a { } .right-sidebar-nav__trigger { width: 50px; text-align: right; position: absolute; right: 10%; clear: both; cursor: pointer; } .right-sidebar-nav__trigger span { display: inline-block; background: #fff; width: 100%; height: 3px; float: right; margin-top: 8px; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .right-sidebar-nav__trigger span:first-child { margin-top: 0px; } .right-sidebar-nav__trigger span.small { width: 70%; } .right-sidebar-nav__trigger:hover span.small { width: 100%; } .right-sidebar-nav__content { position: fixed; height: 100vh; width: 0px; top: 0; right: 0; background: #555; -webkit-box-shadow: -5px 0px 15px rgba(0, 0, 0, 0.1); -moz-box-shadow: -5px 0px 15px rgba(0, 0, 0, 0.1); -ms-box-shadow: -5px 0px 15px rgba(0, 0, 0, 0.1); -o-box-shadow: -5px 0px 15px rgba(0, 0, 0, 0.1); box-shadow: -5px 0px 15px rgba(0, 0, 0, 0.1); -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; opacity: 0; visibility: hidden; z-index: 0; } .right-sidebar-nav__content .right-sidebar-nav__close { position: absolute; left: 30px; top: 30px; background: #fff; color: #000; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; height: 30px; width: 30px; line-height: 30px; font-weight: 700; text-align: center; cursor: pointer; } .right-sidebar-nav__content .right-sidebar-nav__close:hover { color: #fff; background: #e41815; } .right-sidebar-nav__content .right-sidebar__inner { min-height: 100vh; display: -webkit- flex; display: -moz- flex; display: -ms- flex; display: -o- flex; display: flex; align-items: center; text-align: left; width: 300px; padding: 30px; } .right-sidebar-nav__content .right-sidebar__inner h4 { display: inline-block; color: #fff; font-weight: 700; color: #fff; padding-bottom: 10px; border-bottom: 1px solid #e41815; } .right-sidebar-nav__content .right-sidebar__inner ul { padding-top: 15px; } .right-sidebar-nav__content .right-sidebar__inner ul li { text-align: left; padding: 3px 0px; } .right-sidebar-nav__content .right-sidebar__inner ul li a { font-size: 14px; font-weight: 500; text-transform: uppercase; color: #fff; } .right-sidebar-nav__content .right-sidebar__inner ul li a:hover { color: #e41815; } @media only screen and (min-width: 1200px) and (max-width: 1599px) { .right-sidebar-nav__trigger { right: 10px; } } @media only screen and (min-width: 992px) and (max-width: 1200px) { .header-area { padding-top: 20px; } .header-area .logo-menu-wrap nav.menu ul li { padding: 0 10px; } .right-sidebar-nav__trigger { right: 10px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-area.header--without-menu .right-sidebar-nav__trigger { right: 30px; } } @media only screen and (max-width: 767px) { .header-area.header--without-menu .right-sidebar-nav__trigger { right: 15px; } } /* 05. Slider styles */ .slider .slider-inner { min-height: 100vh; display: -webkit- flex; display: -moz- flex; display: -ms- flex; display: -o- flex; display: flex; align-items: center; position: relative; } .slider { background-size: cover; background-position: center center; } .slider .slider-inner .slider__content { padding: 0 175px; } .slider .slider-inner .slider-animate { padding: 0; } .slider .slider-inner .slider__content a.slider__content__play { height: 100px; width: 100px; text-align: center; line-height: 105px; font-size: 35px; padding-left: 5px; color: #e41815; background: #fff; display: inline-block; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; position: relative; } .slider .slider-inner .slider__content a.slider__content__play:before { content: ""; left: 0; top: 0; position: absolute; height: 100%; width: 100%; border: 2px solid #fff; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; opacity: 0; } .slider .slider-inner .slider__content a.slider__content__play:hover { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } .slider .slider-inner .slider__content a.slider__content__play:hover:before { -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); opacity: 1; } .header-social > a { color: #fff; font-size: 20px; margin: 0 10px; } .header-social > a:hover{color:#223C51} .slider .slider-inner .slider__content h1 { color: #fff; font-size: 63px; line-height: 1.3; padding-bottom: 10px; text-transform: capitalize; font-weight: 700; } .slider__content > a { border: 2px solid #223c51; border-radius: 30px; color: #fff; display: inline-block; font-weight: 700; padding: 15px 50px; } .slider__content > a:hover{background: #223c51;color:#fff} .slider .slider-inner .slider__content p { font-size: 16px; color: #fff; padding: 0 100px; margin-bottom: 30px; } .slider .slider-inner .slider__content a.na-btn { margin-top: 25px; } .slider .slider-inner .slider__down-array { z-index: 2; } .slider .slider-inner .slider__down-array a.scroll-to-section, .slider .slider-inner .slider__down-array a.scroll-to-section--without-offset { display: inline-block; height: 62px; width: 40px; text-align: center; line-height: 65px; color: #fff; font-size: 24px; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); bottom: 60px; background: rgba(80,92,254,.6); border-radius: 100px; } .slider.carousel--active .slider-active { width: 100%; } .slider.carousel--active .slider-active .owl-item .slider__item { display: -webkit- flex; display: -moz- flex; display: -ms- flex; display: -o- flex; display: flex; align-items: center; min-height: 100vh; } .slider.carousel--active .slider-active .owl-item .slider__item .slider__content { -webkit-transition: all 0.5s ease-in-out 0.3s; -moz-transition: all 0.5s ease-in-out 0.3s; -ms-transition: all 0.5s ease-in-out 0.3s; -o-transition: all 0.5s ease-in-out 0.3s; transition: all 0.5s ease-in-out 0.3s; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } .slider.carousel--active .slider-active .owl-item.active .slider__content { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .scroller { position: relative; animation-name: scroller; -webkit-animation-name: scroller; -o-animation-name: scroller; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-duration: 0.8s; -webkit-animation-duration: 0.8s; -o-animation-duration: 0.8s; } @keyframes scroller { from { line-height: 40px; } to { line-height: 90px; } } @media only screen and (min-width: 992px) and (max-width: 1200px) { .slider .slider-inner .slider__content { padding: 100px 100px; } .slider .slider-inner .slider__content h1 { font-size: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider .slider-inner { min-height: 100vh; } .slider .slider-inner .slider__content { padding: 100px 60px; } .slider .slider-inner .slider__content a.slider__content__play { height: 90px; width: 90px; line-height: 95px; } .slider .slider-inner .slider__content h1 { font-size: 40px; } .slider .slider-inner .slider__down-array a { bottom: 30px; } } @media only screen and (max-width: 479px) { .slider .slider-inner { min-height: 100vh; } .slider .slider-inner .slider__content { padding: 150px 20px; } .slider .slider-inner .slider__content a.slider__content__play { height: 90px; width: 90px; line-height: 95px; } .slider .slider-inner .slider__content h1 { font-size: 32px; } .slider .slider-inner .slider__content p { font-size: 14px; } .slider .slider-inner .slider__down-array a { bottom: 30px; } } @media only screen and (max-width: 767px) { .slider .slider-inner { min-height: 100vh; } .slider .slider-inner .slider__content { padding: 150px 30px; } .slider .slider-inner .slider__content a.slider__content__play { height: 90px; width: 90px; line-height: 95px; } .slider .slider-inner .slider__content h1 { font-size: 32px; } .slider .slider-inner .slider__content p { font-size: 14px; } .slider .slider-inner .slider__down-array a { bottom: 30px; } } .about-content > h2 { color: #333; margin-bottom: 25px; padding-bottom: 10px; position: relative; margin-top: 0; } .about-content > h2::before { background: #223c51 none repeat scroll 0 0; bottom: 0; content: ""; height: 3px; position: absolute; width: 70px; } .about-content > a { color: #223C51; font-weight: 700; display: inline-block; margin-top: 20px; border: 2px solid #223C51; padding: 8px 30px; border-radius: 30px; } .about-content > a:hover{background:#223C51;color:#fff;} /* 06. Footer styles */ .footer-widgets .footer-widgets__description p { margin-top: 20px; color: #aaaaaa; } .footer-widgets .footer-widgets__single .footer-widgets__title { font-family: "Montserrat", sans-serif; margin: 0; padding: 0; } .footer-widgets .footer-widgets__single ul { margin-top: 30px; } .footer-widgets .footer-widgets__single ul li a { color: #aaaaaa; } .footer-widgets .footer-widgets__single ul li a:hover { color: #fff; padding-left: 3px; } .footer-copyright-area .footer__privacy a { display: inline-block; margin-right: 30px; color: #666666; font-weight: 500; } .footer-copyright-area .footer__privacy a:hover { color: #223C51; } .footer-copyright-area .footer__privacy a:last-child { margin-right: 0px; } .footer-copyright-area .copyright p { margin: 0; font-weight: 500; } .footer-copyright-area .copyright p a { color: #666666; font-weight: 700; } .footer-copyright-area .copyright p a:hover { color: #223C51; } .footer-copyright-area .footer-social-share ul li { display: inline-block; padding-left: 25px; } .footer-copyright-area .footer-social-share ul li a { font-size: 18px; line-height: 24px; color: #666666; } .footer-copyright-area .footer-social-share ul li a:hover { color: #223C51; } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-widgets .footer-widgets__description { text-align: center; } .footer-widgets .footer-widgets__single { margin-top: 40px; text-align: center; } .footer-copyright-area .footer__privacy { text-align: center; } .footer-copyright-area .copyright { text-align: center; margin-top: 20px; } .footer-copyright-area .footer-social-share { text-align: center; } } @media only screen and (max-width: 479px) { .footer-widgets .footer-widgets__description { text-align: center; } .footer-widgets .footer-widgets__single { margin-top: 40px; text-align: center; } .footer-copyright-area .footer__privacy { text-align: center; } .footer-copyright-area .copyright { text-align: center; margin-top: 20px; } .footer-copyright-area .footer-social-share { margin-top: 20px; text-align: center; } } @media only screen and (max-width: 767px) { .footer-widgets .footer-widgets__description { text-align: center; } .footer-widgets .footer-widgets__single { margin-top: 40px; text-align: center; } .footer-copyright-area .footer__privacy { text-align: center; } .footer-copyright-area .copyright { text-align: center; margin-top: 20px; } .footer-copyright-area .footer-social-share { margin-top: 20px; text-align: center; } } /* 07. Feature styles */ .features-area { display: -webkit- flex; display: -moz- flex; display: -ms- flex; display: -o- flex; display: flex; } .features-area .feature { padding: 45px 30px; box-shadow: 0 6px 32px rgba(0, 0, 0, 0.12); } .features-area .feature i { font-size: 70px; } .features-area .feature h5 { color: #444; font-weight: 600; padding-bottom: 5px; padding-top: 25px; } .features-area .feature.bg-black { background: #000; } @media only screen and (min-width: 1200px) and (max-width: 1599px) { .features-area .feature { padding: 40px 30px; } } @media only screen and (min-width: 992px) and (max-width: 1200px) { .features-area .feature { padding: 30px 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .features-area { flex-wrap: wrap; } .features-area .feature { width: 50%; padding: 30px 20px; } .features-area .feature:first-child { background: #0d0d0d; } .features-area .feature:nth-child(2) { background: #000; } } @media only screen and (max-width: 479px) { .features-area { flex-wrap: wrap; } .features-area .feature { width: 100%; padding: 30px 20px; } } @media only screen and (max-width: 767px) { .features-area { flex-wrap: wrap; } .features-area .feature { width: 100%; padding: 30px 20px; } } /* 08. About styles */ .about { background: #fff none repeat scroll 0 0; cursor: pointer; padding: 40px 35px; transition: all 0.5s linear 0s; } .about i { background: #fff none repeat scroll 0 0; border-radius: 100px; color: #223C51; font-size: 50px; text-align: center; transition: all 0.5s linear 0s; } .about h6 { font-family: "Montserrat",sans-serif; font-weight: 700; padding-bottom: 10px; padding-top: 20px; } .about p { font-weight: 300; margin: 0; } .about:hover { -webkit-box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.15); -ms-box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.15); -o-box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.15); box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.15); border-radius: 5px; } @media only screen and (min-width: 992px) and (max-width: 1200px) { .about { padding: 40px 30px; } .about i { font-size: 60px; width: 120px; height: 120px; line-height: 120px; } } @media only screen and (max-width: 479px) { .about { margin-top: 30px; padding: 40px 30px; } .about i { font-size: 60px; width: 120px; height: 120px; line-height: 120px; } } @media only screen and (max-width: 767px) { .about { margin-top: 30px; } } /* 09. Service styles */ .service-box { padding: 70px 40px; transition: all 0.3s ease 0s; background: #fff; } .service-box:hover { box-shadow: 0 8px 31px 0 rgba(0, 0, 0, 0.1); } .area-title { margin: 0 auto 60px; width: 60%; } .area-title h2 { display: inline-block; font-size: 28px; font-weight: 500; letter-spacing: 2px; margin-bottom: 20px; padding-bottom: 15px; position: relative; text-transform: uppercase; } .area-title h2::after { background: #444444 none repeat scroll 0 0; bottom: 0; content: ""; display: block; font-size: 20px; height: 2px; left: 0; margin: auto; position: absolute; right: 0; width: 50px; } .area-title p { margin: 0; } .service-icon { } .service-icon i { font-size: 50px; height: 50px; width: 50px; } .service-content{} .service-content h3 { font-size: 15px; font-weight: 600; margin-bottom: 12px; margin-top: 18px; } .service-content p { margin: 0; } @media only screen and (max-width: 479px) { .services-wrap { flex-wrap: wrap; } .services-wrap .service { width: calc(100% - 30px); } .services-wrap .service a { width: 100%; padding: 20px 15px; margin-top: 30px; } .services-wrap .service.active, .services-wrap .service:hover { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .services-wrap .service.active a, .services-wrap .service:hover a { background: #000; } .service__details .service__list { margin: 20px 0; } .service__details .service__content { flex-wrap: wrap; } .service__details .service__content .service__content__left { width: 100%; } .service__details .service__content .service__content__left p { padding-right: 0px; padding-bottom: 30px; margin-bottom: 30px; margin-top: 0px; } .service__details .service__content .service__content__left p:after { right: 0; top: auto; bottom: 0; height: 2px; width: 100%; } .service__details .service__content .service__content__right { padding-left: 0px; width: 100%; } } @media only screen and (max-width: 767px) { .services-wrap { flex-wrap: wrap; } .services-wrap .service { width: calc(100% - 30px); } .services-wrap .service a { width: 100%; padding: 20px 15px; margin-top: 30px; } .services-wrap .service.active, .services-wrap .service:hover { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .services-wrap .service.active a, .services-wrap .service:hover a { background: #000; } .service__details .service__list { margin: 20px 0; } .service__details .service__content { flex-wrap: wrap; } .service__details .service__content .service__content__left { width: 100%; } .service__details .service__content .service__content__left p { padding-right: 0px; padding-bottom: 30px; margin-bottom: 30px; margin-top: 0px; } .service__details .service__content .service__content__left p:after { right: 0; top: auto; bottom: 0; height: 2px; width: 100%; } .service__details .service__content .service__content__right { padding-left: 0px; width: 100%; } } /* 10. Work styles */ .work { display: -webkit- flex; display: -moz- flex; display: -ms- flex; display: -o- flex; display: flex; justify-content: space-between; } .work .work__single { margin-bottom: 70px; position: relative; z-index: 2; } .work .work__single a { width: 165px; height: 165px; display: inline-block; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); text-align: center; padding: 40px 0px; z-index: 1; } .work .work__single a i { font-size: 60px; } .work .work__single a h6 { font-size: 14px; font-family: "Montserrat", sans-serif; font-weight: 500; } .work .work__single:before { background: #e5e5e5 none repeat scroll 0 0; content: ""; height: 1px; left: 100%; position: absolute; top: 50%; width: 30%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .work .work__single:after { background: #e5e5e5 none repeat scroll 0 0; content: ""; height: 1px; right: 100%; position: absolute; top: 50%; width: 30%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .work .work__single:first-child:after { display: none; } .work .work__single:last-child:before { display: none; } .work .work__single.active a, .work .work__single:hover a { color: #223c51; } .work .work__single.active h6, .work .work__single:hover h6 { color: #223c51; } .work__details .na-title { margin-top: 100px; } .work__details .na-btn { margin-top: 30px; } @media only screen and (min-width: 992px) and (max-width: 1200px) { .work .work__single a { width: 140px; height: 140px; padding: 30px 0px; } .work .work__single a i { font-size: 48px; } .work__details .na-title { margin-top: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .work .work__single a { width: 110px; height: 110px; padding: 30px 0px; } .work .work__single a i { font-size: 35px; } .work .work__single a h6 { font-size: 12px; } .work__details .na-title { margin-top: 0px; } .work__details img { margin-top: 30px; } } @media only screen and (max-width: 767px) { .work { flex-flow: row wrap; justify-content: flex-start; padding-bottom: 60px; } .work .work__single { margin-top: 30px; width: calc(100% / 3); text-align: center; } .work .work__single a { padding: 25px 0; height: 115px; height: 115px; width: 115px; } .work .work__single a i { font-size: 42px; } .work .work__single a h6 { font-size: 12px; } .work .work__single:before { display: none; } .work .work__single:after { display: none; } .work__details .na-title { margin-top: 0px; } .work__details img { margin-top: 30px; } } @media only screen and (max-width: 479px) { .work { flex-flow: row wrap; padding-bottom: 60px; } .work .work__single { margin-top: 30px; width: 50%; text-align: center; } .work .work__single a { padding: 25px 0; height: 115px; height: 115px; width: 115px; } .work .work__single a i { font-size: 42px; } .work .work__single a h6 { font-size: 12px; } .work .work__single:before { display: none; } .work .work__single:after { display: none; } .work__details .na-title { margin-top: 0px; } .work__details img { margin-top: 30px; } } /* 11. Small layouts */ /* Fun facts */ .fun-facts-area { padding: 250px 0; } .fun-facts { display: -webkit- flex; display: -moz- flex; display: -ms- flex; display: -o- flex; display: flex; justify-content: space-around; } .fun-facts .fun-fact__single { color: #fff; margin-top: 0; text-align: center; width: 25%; } .fun-facts .fun-fact__single .fun-fact__thumb { height: 130px; width: 130px; text-align: center; line-height: 128px; border: 2px solid rgba(255, 255, 255, 0.5); -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; display: inline-block; } .fun-facts .fun-fact__single h2 { color: #fff; font-size: 60px; font-weight: 700; margin-top: 0; } .fun-facts .fun-fact__single h5 { color: #fff; font-family: "Poppins", sans-serif; } @media only screen and (min-width: 768px) and (max-width: 991px) { .fun-facts .fun-fact__single .fun-fact__thumb { height: 110px; width: 110px; line-height: 108px; } .fun-facts .fun-fact__single h2 { padding-top: 0px; font-size: 40px; } .fun-facts .fun-fact__single h5 { font-size: 16px; } } @media only screen and (max-width: 767px) { .fun-facts { flex-flow: row wrap; } .fun-facts .fun-fact__single { width: 50%; } .fun-facts .fun-fact__single .fun-fact__thumb { height: 110px; width: 110px; line-height: 108px; } .fun-facts .fun-fact__single h2 { padding-top: 0px; font-size: 40px; } .fun-facts .fun-fact__single h5 { font-size: 16px; } } @media only screen and (max-width: 479px) { .fun-facts { flex-flow: row wrap; } .fun-facts .fun-fact__single { width: 100%; } .fun-facts .fun-fact__single .fun-fact__thumb { height: 110px; width: 110px; line-height: 108px; } .fun-facts .fun-fact__single h2 { padding-top: 0px; font-size: 40px; } .fun-facts .fun-fact__single h5 { font-size: 16px; } } /* Commitment */ .comitment .comitment__single img { width: auto; height: 100px; display: inline-block; } .comitment .comitment__single .comitment__single__content h5 { color: #444; line-height: 20px; padding-top: 10px; margin-bottom: 15px; font-weight: 600; } .comitment__single { background: #fff none repeat scroll 0 0; padding: 60px 30px; } .comitment__single i { color: #444; font-size: 65px; } .comitment .comitment__single .comitment__single__content p { color: #444; font-size: 15px; margin-bottom: 0; } /* History area styles */ .history-large-thumb { margin-top: 50px; } .history .history__single { padding: 40px 30px; margin-top: 60px; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; box-shadow:0 2px 15px rgba(0, 0, 0, 0.15); } .history .history__single .history__icons { height: 140px; width: 140px; text-align: center; display: inline-block; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; font-size: 60px; line-height: 146px; background: #e5e5e5; color: #000; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .history .history__single h6 { padding-top: 30px; color: #000; letter-spacing: 1px; font-family: "Montserrat", sans-serif; font-weight: 700; } .history .history__single p { padding-top: 10px; margin: 0; } .history .history__single:hover { } .history .history__single:hover .history__icons { color: #fff; background: #223C51; } .brand-logo.owl-carousel .owl-item img { display: block; width: inherit; } .brand-logo-area{ border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } @media only screen and (min-width: 768px) and (max-width: 991px) { .history .history__single { padding: 40px 20px; margin-top: 50px; } .history .history__single .history__icons { height: 110px; width: 110px; font-size: 45px; line-height: 115px; } } /* Brand logo */ .brand-logo .owl-stage { display: -webkit- flex; display: -moz- flex; display: -ms- flex; display: -o- flex; display: flex; align-items: center; } .brand-logo .owl-stage .brand-logo__single { padding: 0 33px; } .yu2fvl-overlay { z-index: 990; background: #000; opacity: 0.8; } .yu2fvl { z-index: 991; } .yu2fvl iframe.yu2fvl-iframe { border: none !important; outline: none; } .yu2fvl .yu2fvl-close { background: #e41815; border: medium none; color: #fff; cursor: pointer; height: 40px; right: 0; position: absolute; left: auto; top: 0; width: 40px; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .yu2fvl .yu2fvl-close:hover { opacity: .8; } /* 12. Portfolio Styles */ .portfolio-filter { text-align: center; margin-bottom: 65px; } .portfolio-filter button { background: #f6f6f6 none repeat scroll 0 0; border: medium none; color: #444; display: inline-block; font-family: "Montserrat",sans-serif; font-size: 14px; font-weight: 500; line-height: 30px; margin: 0 10px; outline: medium none; padding: 10px 15px; position: relative; text-transform: uppercase; transition: all 0.3s ease-in-out 0s; border-radius: 4px; } .portfolio-filter button:hover,.portfolio-filter button.is-checked{background:#223C51;color:#fff} .portfolio-filter button.is-checked:after, .portfolio-filter button:hover:after { opacity: 1; visibility: visible; } .portfolio .portfolio__single { cursor: pointer; display: block; float: left; margin-bottom: 20px; overflow: hidden; position: relative; } .grid-item { float: left; padding: 0 10px; width: 25%; } .portfolio { margin: 0 -10px; } .portfolio .portfolio__single img { width: 100%; } .portfolio .portfolio__single:before { position: absolute; content: ""; left: 0; top: 0; background: rgba(0, 0, 0, 0.5); height: 100%; width: 100%; opacity: 0; visibility: hidden; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } .portfolio .portfolio__single .portfolio__single__content { position: absolute; height: 100%; width: 100%; left: 0; top: 0; display: -webkit- flex; display: -moz- flex; display: -ms- flex; display: -o- flex; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; } .portfolio .portfolio__single .portfolio__single__content .portfolio__single__content__inner { -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; visibility: hidden; opacity: 0; z-index: 2; padding: 30px; } .portfolio__single__content__inner > h3 { color: #fff; font-size: 18px; letter-spacing: 2px; margin-top: 0; transition:all 0.3s ease 0.1s; opacity:0; transform: scale(0.5); } .portfolio__single__content__inner h5 { color: #fff; font-family: "Poppins",sans-serif; font-weight: 500; margin-bottom: 0; font-size: 11px; letter-spacing: 1px; transition:all 0.3s ease 0.2s; opacity:0; transform: scale(0.5); } .portfolio__single:hover .portfolio__single__content__inner h3,.portfolio__single:hover .portfolio__single__content__inner h5{opacity: 1; transform: scale(1);} .portfolio .portfolio__single .portfolio__single__content::before { background: #223c51 none repeat scroll 0 0; content: ""; left: 15px; opacity: 0; position: absolute; top: 15px; transition: all 0.5s ease-in-out 0s; visibility: hidden; z-index: 1; right: 15px; bottom: 15px; } .portfolio .portfolio__single:hover:before { visibility: visible; opacity: 1; } .portfolio .portfolio__single:hover .portfolio__single__content::before { opacity: 0.9; visibility: visible; } .portfolio .portfolio__single:hover .portfolio__single__content .portfolio__single__content__inner { visibility: visible; opacity: 1; } @media only screen and (max-width: 479px) { .portfolio .portfolio__single { width: 100%; } .portfolio .portfolio__single:hover .portfolio__single__content:before { height: calc(100% - 30px); width: calc(100% - 30px); left: 15px; top: 15px; } } @media only screen and (max-width: 767px) { .portfolio .portfolio__single { width: 100%; } .portfolio .portfolio__single:hover .portfolio__single__content:before { height: calc(100% - 30px); width: calc(100% - 30px); left: 15px; top: 15px; } } /* 13. Skill styles */ .skill { } .skill .skill__tab { display: -webkit- flex; display: -moz- flex; display: -ms- flex; display: -o- flex; display: flex; border-bottom: 2px solid #e41815; } .skill .skill__tab .skill__tab__single { width: 100%; text-align: center; text-transform: uppercase; font-family: "Montserrat", sans-serif; background: #f5f5f5; font-weight: 500; font-size: 14px; margin-right: 2px; height: 50px; line-height: 52px; cursor: pointer; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .skill .skill__tab .skill__tab__single a { display: block; padding: 0px 10px; } .skill .skill__tab .skill__tab__single:last-child { margin-right: 0; } .skill .skill__tab .skill__tab__single.active { background: #e41815; } .skill .skill__tab .skill__tab__single.active a { color: #fff; } .skill .skill__tab__content .skill__tab__content__single p { padding-top: 15px; } .skill .skill__tab__content .skill__tab__content__single p:first-child { padding-top: 5px; } .skill .skill__progress .skill__progress__single { clear: both; margin-bottom: 15px; overflow: hidden; } .skill .skill__progress .skill__progress__single .skill__progress__label { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; color: #444; display: block; float: none; line-height: 25px; margin: 0; padding-left: 0; margin-bottom: 2px; } .skill .skill__progress .skill__progress__single .progress { background: #d9d9d9 none repeat scroll 0 0; border-radius: 0; float: right; height: 25px; margin: 0; width: 100%; } .skill .skill__progress .skill__progress__single .progress .progress-bar { background: #223C51; } .skill .skill__progress .skill__progress__single .progress .progress-bar .progress-meter { text-align: right; color: #fff; line-height: 25px; margin: 0; margin-right: 10px; display: block; } .skill .skill__progress .skill__progress__single:last-child { margin-bottom: 0px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .skill .skill__progress { margin-top: 50px; } } @media only screen and (max-width: 479px) { .skill .skill__tab { flex-flow: row wrap; } .skill .skill__progress { margin-top: 50px; } } @media only screen and (max-width: 767px) { .skill .skill__tab { flex-flow: row wrap; } .skill .skill__progress { margin-top: 50px; } } /* 14. Slider Styles */ .slider__dots { position: relative; padding-bottom: 70px; } .slider__dots .owl-dots { position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); bottom: 0; } .slider__dots .owl-dots .owl-dot { height: 15px; width: 15px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; background: #4d4d4d; display: inline-block; margin: 0 10px; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .slider__dots .owl-dots .owl-dot.active, .slider__dots .owl-dots .owl-dot:hover { background: #fff; } .slider__dots.slider__dots--style-2 .owl-dots .owl-dot { -webkit-transition: background 0.3s ease-in-out 0s; -moz-transition: background 0.3s ease-in-out 0s; -ms-transition: background 0.3s ease-in-out 0s; -o-transition: background 0.3s ease-in-out 0s; transition: background 0.3s ease-in-out 0s; background: rgba(255, 255, 255, 0.5); margin: 0 5px; } .slider__dots.slider__dots--style-2 .owl-dots .owl-dot.active, .slider__dots.slider__dots--style-2 .owl-dots .owl-dot:hover { background: transparent; border: 2px solid #fff; } @media only screen and (max-width: 479px) { .slider__dots .owl-dots .owl-dot { margin: 0 5px; } } /* Slider nav */ .slider__nav { position: relative; } .slider__nav .owl-nav div { position: absolute; top: 50%; border-style: solid; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .slider__nav .owl-nav div span { font-size: 36px; color: #fff; position: absolute; left: 50%; margin-top: -20px; } .slider__nav .owl-nav div.owl-prev { left: 0; border-color: transparent transparent transparent #808080; border-width: 70px 0 70px 70px; } .slider__nav .owl-nav div.owl-prev span { margin-left: -50px; } .slider__nav .owl-nav div.owl-prev:hover { border-color: transparent transparent transparent #e41815; } .slider__nav .owl-nav div.owl-next { right: 0; border-color: transparent #808080 transparent transparent; border-width: 70px 70px 70px 0; } .slider__nav .owl-nav div.owl-next span { margin-left: 40px; } .slider__nav .owl-nav div.owl-next:hover { border-color: transparent #e41815 transparent transparent; } .slider__nav .owl-nav div:hover { opacity: .8; } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__nav .owl-nav div span { font-size: 26px; margin-top: -15px; } .slider__nav .owl-nav div.owl-prev { border-width: 40px 0 40px 40px; } .slider__nav .owl-nav div.owl-prev span { margin-left: -30px; } .slider__nav .owl-nav div.owl-next { border-width: 40px 40px 40px 0; } .slider__nav .owl-nav div.owl-next span { margin-left: 20px; } } @media only screen and (max-width: 767px) { .slider__nav .owl-nav div span { font-size: 20px; margin-top: -12px; } .slider__nav .owl-nav div.owl-prev { border-width: 30px 0 30px 30px; } .slider__nav .owl-nav div.owl-prev span { margin-left: -23px; } .slider__nav .owl-nav div.owl-next { border-width: 30px 30px 30px 0; } .slider__nav .owl-nav div.owl-next span { margin-left: 15px; } } /* 15. Team styles */ .team { margin-top: 60px; } .team .team__thumbnail { position: relative; } .team .team__thumbnail:before { position: absolute; content: ""; left: 0; top: 0; background: rgba(0, 0, 0, 0.5); height: 100%; width: 100%; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .team .team__thumbnail .team__share { position: absolute; left: 0; top: 0; height: 100%; width: 100%; display: -webkit- flex; display: -moz- flex; display: -ms- flex; display: -o- flex; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } .team .team__thumbnail .team__share ul { z-index: 1; } .team .team__thumbnail .team__share ul li { display: inline-block; margin: 0 3px; } .team .team__thumbnail .team__share ul li a { display: inline-block; height: 45px; width: 45px; font-size: 21px; background: #fff; color: #000; text-align: center; line-height: 45px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } .team .team__thumbnail .team__share ul li a:hover { background: #223C51; color: #fff; } .team .team__thumbnail .team__share:before { position: absolute; left: 0; top: 0; height: 100%; width: 100%; content: ""; border: 10px solid rgba(255, 255, 255, 0.2); opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .team .team__details { margin-top: 27px; } .team .team__details h5 { font-family: "Poppins", sans-serif; font-weight: 500; margin: 0; padding-bottom: 3px; } .team .team__details h5 a { color: #000; } .team .team__details h5 a:hover { color: #e41815; } .team .team__details p { padding-top: 23px; } .team:hover .team__thumbnail:before { opacity: 1; visibility: visible; } .team:hover .team__thumbnail .team__share { visibility: visible; opacity: 1; } .team:hover .team__thumbnail .team__share:before { -webkit-transform: scale(0.85); -moz-transform: scale(0.85); -ms-transform: scale(0.85); -o-transform: scale(0.85); transform: scale(0.85); visibility: visible; opacity: 1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .team .team__thumbnail img { width: 100%; } } @media only screen and (max-width: 479px) { .team .team__thumbnail img { width: 100%; } } @media only screen and (max-width: 767px) { .team-area .col-xs-12 { width: 50%; } .team .team__thumbnail img { width: 100%; } } @media only screen and (max-width: 479px) { .team-area .col-xs-12 { width: 100%; } .team .team__thumbnail img { width: 100%; } } /* 16. Testimonial */ .testimonial .testimonial__single { padding: 60px 20px; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .testimonial .testimonial__single .testimonial__thumb { -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; overflow: hidden; height: 150px; width: 150px; text-align: center; display: inline-block; } .testimonial .testimonial__single .testimonial__content { margin-top: 25px; } .testimonial .testimonial__single .testimonial__content p { -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .testimonial .testimonial__single .testimonial__content h5 { font-family: "Poppins",sans-serif; font-weight: 600; margin-top: 25px; color: #444; } .testimonial .testimonial__single .testimonial__content span { color: #000; } .testimonial .testimonial__item { width: 100%; padding-bottom: 35px; } .testimonial .owl-item.center .testimonial__single { background: rgba(255, 255, 255, 0.5); } .testimonial .owl-item.center .testimonial__single .testimonial__content p { color: #fff; } @media only screen and (max-width: 479px) { .testimonial .testimonial__item { padding-bottom: 0px; padding-top: 35px; } } @media only screen and (max-width: 767px) { .testimonial .testimonial__item { padding-bottom: 0px; padding-top: 35px; } } /* 17. Contact styles */ .contact .contact__form .contact__form__input { margin-bottom: 30px; } .contact .contact__form .contact__form__input textarea { min-height: 200px; } .contact .contact__details__content .contact__details__single { position: relative; padding-left: 40px; padding-bottom: 20px; } .contact .contact__details__content .contact__details__single i { font-size: 24px; color: #444; position: absolute; top: 0; left: 0; } .contact .contact__details__content .contact__details__single p { line-height: 20px; margin: 0; padding: 0; } .contact .contact__details__content, .contact .contact__form__content { margin-top: 45px; } .form-message { font-size: 20px; font-weight: 500; } .form-message.success { color: green; } .form-message.error { color: red; } .google-map iframe { height: 700px; width: 100%; border: 0; margin-bottom: -10px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .google-map iframe { min-height: 500px; } } @media only screen and (max-width: 479px) { .contact .contact__form { margin-bottom: 50px; } .google-map { min-height: 500px; } } @media only screen and (max-width: 767px) { .contact .contact__form { margin-bottom: 70px; } .google-map { min-height: 500px; } } /* 18. Left nav styles */ .left-side-nav-wrap .left-nav-container { width: 300px; padding: 0 20px; text-align: center; position: fixed; z-index: 5; top: 0; left: 0; min-height: 100vh; -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2); -ms-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2); -o-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2); box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2); } .left-side-nav-wrap .left-nav-container .logo { margin-top: 100px; display: inline-block; } .left-side-nav-wrap .left-nav-container nav.left-nav ul li { position: relative; } .left-side-nav-wrap .left-nav-container nav.left-nav ul li a { display: inline-block; font-size: 16px; font-weight: 500; color: #000; text-transform: uppercase; line-height: 48px; } .left-side-nav-wrap .left-nav-container nav.left-nav ul li a:hover { color: #e41815; } .left-side-nav-wrap .left-nav-container nav.left-nav ul li.na-dropdown > a { position: relative; } .left-side-nav-wrap .left-nav-container nav.left-nav ul li.na-dropdown > a:after { content: "\f105"; font-family: fontAwesome; position: absolute; top: 0; left: calc(100% + 5px); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .left-side-nav-wrap .left-nav-container nav.left-nav ul li.na-dropdown .na-dropdown__content { visibility: hidden; height: 0; transform-origin: 0 0 0; -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; background: #f5f5f5; } .left-side-nav-wrap .left-nav-container nav.left-nav ul li.na-dropdown:hover > a { color: #e41815; } .left-side-nav-wrap .left-nav-container nav.left-nav ul li.na-dropdown:hover > a:after { content: "\f107"; } .left-side-nav-wrap .left-nav-container nav.left-nav ul li.na-dropdown:hover .na-dropdown__content { visibility: visible; height: 100%; -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } .left-side-nav-wrap .left-nav-container .social-share { position: absolute; bottom: 35px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width: 100%; } .left-side-nav-wrap .left-nav-container .social-share ul li { display: inline-block; margin: 0 4px; } .left-side-nav-wrap .left-nav-container .social-share ul li a { display: inline-block; width: 45px; height: 45px; line-height: 45px; color: #000; font-size: 21px; background: #f5f5f5; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } .left-side-nav-wrap .left-nav-container .social-share ul li a:hover { background: #e41815; color: #fff; } .left-side-nav-wrap .body-content { width: calc(100% - 300px); margin-left: 300px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .left-side-nav-wrap .body-content .container { width: 1020px; } .left-side-nav-wrap .body-content .service__details .col-md-4 { width: 30%; } .left-side-nav-wrap .body-content .service__details .col-md-8 { width: 70%; } .left-side-nav-wrap .body-content .work .work__single:before, .left-side-nav-wrap .body-content .work .work__single:after { width: 20px; } .left-side-nav-wrap .body-content .portfolio .portfolio__single { width: calc((100% / 3) - 0.1px ); } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .left-side-nav-wrap .left-nav-container { width: 250px; } .left-side-nav-wrap .body-content { width: calc(100% - 250px); margin-left: 250px; } .left-side-nav-wrap .body-content .container { width: 890px; } .left-side-nav-wrap .body-content .slider .slider-inner .slider__content { padding: 150px 30px; } .left-side-nav-wrap .body-content .services-wrap .service a h5 { font-size: 16px; } .left-side-nav-wrap .body-content .service__details .col-md-4 { width: 30%; } .left-side-nav-wrap .body-content .service__details .col-md-8 { width: 70%; } .left-side-nav-wrap .body-content .work { justify-content: space-between; padding-bottom: 60px; } .left-side-nav-wrap .body-content .work .work__single { margin-top: 30px; } .left-side-nav-wrap .body-content .work .work__single a { padding: 28px 0; height: 145px; width: 145px; } .left-side-nav-wrap .body-content .work .work__single:before, .left-side-nav-wrap .body-content .work .work__single:after { width: 15%; } .left-side-nav-wrap .body-content .portfolio .portfolio__single { width: 33.33333%; } .left-side-nav-wrap .body-content .footer-copyright-area .footer__privacy a { margin-right: 20px; } .left-side-nav-wrap .body-content .footer-copyright-area .footer__privacy a:last-child { margin-right: 0px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .left-side-nav-wrap .left-nav-container { width: 200px; } .left-side-nav-wrap .body-content { width: calc(100% - 200px); margin-left: 200px; } .left-side-nav-wrap .body-content .container { width: 740px; } .left-side-nav-wrap .body-content .slider .slider-inner .slider__content { padding: 150px 50px; } .left-side-nav-wrap .body-content .slider .slider-inner .slider__content h1 { font-size: 45px; } .left-side-nav-wrap .body-content .features-area { flex-wrap: wrap; } .left-side-nav-wrap .body-content .features-area .feature { width: 50%; padding: 30px 20px; } .left-side-nav-wrap .body-content .features-area .feature:first-child { background: #0d0d0d; } .left-side-nav-wrap .body-content .features-area .feature:nth-child(2) { background: #000; } .left-side-nav-wrap .body-content .services-wrap .service a { width: 100%; padding: 20px 10px; } .left-side-nav-wrap .body-content .services-wrap .service a h5 { font-size: 14px; } .left-side-nav-wrap .body-content .services-wrap .service a p { display: none; } .left-side-nav-wrap .body-content .services-wrap .service.active, .left-side-nav-wrap .body-content .services-wrap .service:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .left-side-nav-wrap .body-content .service__details .col-md-4 { width: 40%; } .left-side-nav-wrap .body-content .service__details .col-md-8 { width: 60%; } .left-side-nav-wrap .body-content .service__details .service__list { margin: 20px 0; } .left-side-nav-wrap .body-content .service__details .service__content { flex-wrap: wrap; } .left-side-nav-wrap .body-content .service__details .service__content .service__content__left { width: 100%; } .left-side-nav-wrap .body-content .service__details .service__content .service__content__left p { padding-right: 0px; padding-bottom: 30px; margin-bottom: 30px; margin-top: 0px; } .left-side-nav-wrap .body-content .service__details .service__content .service__content__left p:after { right: 0; top: auto; bottom: 0; height: 2px; width: 100%; } .left-side-nav-wrap .body-content .service__details .service__content .service__content__right { padding-left: 0px; width: 100%; } .left-side-nav-wrap .body-content .work { justify-content: space-between; padding-bottom: 60px; } .left-side-nav-wrap .body-content .work .work__single { margin-top: 30px; } .left-side-nav-wrap .body-content .work .work__single a { padding: 25px 0; height: 115px; width: 115px; } .left-side-nav-wrap .body-content .work .work__single a i { font-size: 42px; } .left-side-nav-wrap .body-content .work .work__single a h6 { font-size: 12px; } .left-side-nav-wrap .body-content .work .work__single:before { display: none; } .left-side-nav-wrap .body-content .work .work__single:after { display: none; } .left-side-nav-wrap .body-content .portfolio .portfolio__single { width: calc((100% / 2) - 0.1px ); } .left-side-nav-wrap .body-content .fun-facts { flex-flow: row wrap; } .left-side-nav-wrap .body-content .fun-facts .fun-fact__single { width: 50%; } .left-side-nav-wrap .body-content .fun-facts .fun-fact__single .fun-fact__thumb { height: 110px; width: 110px; line-height: 108px; } .left-side-nav-wrap .body-content .fun-facts .fun-fact__single h2 { padding-top: 0px; font-size: 40px; } .left-side-nav-wrap .body-content .fun-facts .fun-fact__single h5 { font-size: 16px; } .left-side-nav-wrap .body-content .skill .col-md-7 { width: 100%; } .left-side-nav-wrap .body-content .skill .col-md-5 { width: 100%; } .left-side-nav-wrap .body-content .skill .skill__progress { margin-top: 50px; } .left-side-nav-wrap .body-content .team-area .col-xs-12 { width: 50%; } .left-side-nav-wrap .body-content .team .team__thumbnail img { width: 100%; } .left-side-nav-wrap .body-content .footer-copyright-area { overflow: hidden; text-align: center; } .left-side-nav-wrap .body-content .footer-copyright-area .col-md-4 { width: 100%; left: auto; right: auto; } .left-side-nav-wrap .body-content .footer-copyright-area .footer-social-share { text-align: center; margin: 20px 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .left-side-nav-wrap .body-content { margin-left: 0px; width: 100%; } } @media only screen and (max-width: 767px) { .left-side-nav-wrap .body-content { margin-left: 0px; width: 100%; } } @media only screen and (max-width: 479px) { .left-side-nav-wrap .body-content { margin-left: 0px; width: 100%; } } /* 19. Blog styles */ /* 8. blog */ .blog-wrapper { background: #fff none repeat scroll 0 0; overflow: hidden; padding: 25px; } .blog-title { display: inline-block; font-size: 30px; font-weight: bold; line-height: 36px; margin: 25px 0 15px; padding: 0; text-align: left; } .blog-title a{color:#222} .blog-title a:hover{color:#223C51} .meta-info ul li { color: #999; display: inline-block; font-size: 11px; padding: 0 12px; position: relative; } .meta-info ul li:first-child{padding-left:0} .meta-info ul li a{color:#223C51} .meta-info ul li a:hover{color:#444} .meta-info ul li::before { border: 1px solid #999; border-radius: 5px; content: ""; height: 5px; left: -4px; position: absolute; top: 9px; width: 5px; } .meta-info ul li:first-child:before{display:none} .blog-thumb { overflow: hidden; } /* sidebar */ .widget { background: #fff none repeat scroll 0 0; overflow: hidden; padding: 25px; } .widget-title { color: #000; display: inline-block; font-size: 14px; font-weight: bold; height: auto; letter-spacing: 1px; line-height: 1; margin-bottom: 20px; padding: 0 0 10px; position: relative; } .widget-title::before { background: #e2e2e2 none repeat scroll 0 0; bottom: 0; content: ""; height: 2px; position: absolute; width: 50px; } .sidebar-form{} .sidebar-form form { position: relative; } .sidebar-form form input { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: 1px solid #f5f5f5; color: #ccc; padding: 10px 0; text-indent: 10px; transition: all 0.2s ease 0s; width: 100%; } .sidebar-form form input::-moz-placeholder { color: #999; font-size: 12px; opacity: .5; } .sidebar-form form button { background: #222 none repeat scroll 0 0; border: 0 none; color: #fff; font-size: 20px; height: 100%; position: absolute; right: 0; top: 0; transition: all 0.3s ease 0s; width: 50px; } .sidebar-form form button:hover{background:#223C51;} .sidebar-rc-post{} .sidebar-rc-post ul{} .sidebar-rc-post ul li { border-bottom: 1px solid #f5f5f5; color: #000; display: block; font-size: 13px; margin-bottom: 15px; overflow: hidden; padding-bottom: 15px; } .sidebar-rc-post ul li:last-child{border:0;margin:0;padding:0;;} .sidebar-rc-post .rc-post-thumb { display: inline-block; float: left; height: 70px; overflow: hidden; position: relative; width: 90px; } .sidebar-rc-post .rc-post-content { margin-left: 105px; } .sidebar-rc-post .rc-post-content h4 { color: #000; display: block; font-size: 13px; font-weight: bold; line-height: 19px; margin: 0; text-indent: 0; transition: all 0.2s ease 0s; } .sidebar-rc-post .rc-post-content h4 a:hover{color:#223C51} .widget-date { color: #ccc; display: inline-block; float: left; font-size: 10px; line-height: 1; margin: 10px 5px 0 0; padding: 0 8px 0 0; text-decoration: none; text-indent: 0; text-transform: uppercase; } .sidebar-blog .widget{margin-bottom:35px;} .sidebar-blog .widget:last-child{margin-bottom:0;} .widget-social{} .widget-social a { background: #000 none repeat scroll 0 0; color: #fff; display: inline-block; font-size: 19px; height: 45px; line-height: 45px; margin-right: 12px; text-align: center; width: 45px; } .widget-social a.facebook{background:#3b5998 } .widget-social a.twitter{background:#1da1f2 } .widget-social a.instagram{background:#dd4b39 } .widget-social a.googleplus{background:#dd4b39 } .widget-social a.linkedin{background:#0077b5 } .widget-social a:hover{opacity: 0.8;} .sidebar-link{} .sidebar-link li { border-bottom: 1px solid #f5f5f5; color: #000; display: block; font-size: 13px; line-height: 20px; margin-bottom: 10px; padding-bottom: 10px; } .sidebar-link li:last-child{border:0;padding:0;margin:0;} .sidebar-link li a { color: #000; font-weight: bold; padding-left: 5px; } .sidebar-link li a:hover{color:#223C51} .sidebar-link li span{float:right;} .instagram-link{margin:0 -5px} .instagram-link li { float: left; margin-bottom: 10px; padding: 0 5px; width: 33.33%; } .instagram-link li a{} .sidebar-tad{} .sidebar-tad li { float: left; margin-bottom: 5px; margin-right: 5px; } .sidebar-tad li a { background: #f7f7f7 none repeat scroll 0 0; color: #222; display: inline-block; font-size: 11px; font-weight: 600; line-height: 1; padding: 10px 15px; text-transform: uppercase; } .sidebar-tad li a:hover{background:#223C51;color:#fff} /* blog column */ .blog-column{} .blog-column .blog-title { font-size: 18px; line-height: 1.5; } .blog-2-column .blog-title { font-size: 22px; line-height: 1.5; } .pagination-col{} .pagination-col .pagination{margin-top:0;} /* blog details */ .blog-details .meta-info { margin-bottom: 20px; } .blog-details .widget-social { margin-bottom: 20px; } .blog-title-sm { font-size: 22px; line-height: 1.5; margin-bottom: 10px; margin-top: 10px; } .blog-details blockquote { background: #f7f7f7 none repeat scroll 0 0; border-left: 5px solid #f3474b; font-family: open sans; font-size: 17px; font-style: italic; margin: 0 0 20px 40px; padding: 10px 20px; } .blob-post-gallery { margin-bottom: 15px; overflow: hidden; } .blob-post-gallery ul { margin: 0 -5px; } .blob-post-gallery ul li { float: left; padding: 0 5px; width: 33.33%; } .blob-post-gallery-full { margin-bottom: 20px; } .common-tag{} .common-tag ul{} .common-tag ul li { float: left; margin-right: 5px; margin-bottom:5px; } .common-tag ul li a { background: #f7f7f7 none repeat scroll 0 0; display: inline-block; font-size: 11px; padding: 10px 15px; text-transform: uppercase; } .common-tag ul li a:hover{background:#223C51;color:#fff} .common-tag { margin-top: 30px; } .next-prev-post { margin-top: 50px; } .next-prev-post a { background: #f7f7f7 none repeat scroll 0 0; border-radius: 50px; font-size: 11px; font-weight: 500; padding: 10px 30px; text-transform: uppercase; } .next-prev-post a:hover{background:#223C51;color:#fff} .prev-post{float:left} .prev-post i{margin-right:5px;} .next-post{float:right} .next-post i{margin-left:5px} .author-box { background: #f7f7f7 none repeat scroll 0 0; overflow: hidden; padding: 30px; } .author-avatar { display: inline-block; float: left; } .author-avatar > img { border-radius: 50%; } .authorinfo { margin-left: 120px; margin-top: 7px; } .authorinfo h4 { font-size: 12px; font-weight: bold; margin: 0; padding: 0; text-transform: uppercase; } .authorinfo p { color: #555; font-size: 13px; line-height: 20px; margin: 0; padding: 5px 0; text-indent: 0; } .author-icons { margin-top: 5px; } .author-icons a { display: inline-block; margin-right: 5px; } .author-icons a:hover{color:#223C51} .related-post-active .blog-column{padding:0} .related-post-active .blog-column .blog-title { font-size: 14px; margin-bottom: 0; margin-top: 10px; padding: 0; } .blog-section-title { font-size: 18px; font-weight: 700; margin-bottom: 20px; } .blog-details{}.comments, .comment-form { margin-bottom: 70px; } .comment, .comment-content { position: relative; } .comment-avatar { float: left; margin: 5px 0 0; max-width: 70px; position: relative; z-index: 1; } .comment-avatar::after { background: #f5f5f5 none repeat scroll 0 0; content: ""; height: 2px; left: 70px; position: absolute; top: 34px; width: 20px; z-index: -1; } .comment-avatar img { border-radius: 50%; height: 70px; width: 70px; } .comment-tools { padding: 0 30px; position: absolute; right: 0; top: 25px; z-index: 1; } .comment-tools a { color: #666; margin: 0 0 0 15px; } .comment-content { background: #f7f7f7 none repeat scroll 0 0; border-radius: 2px; margin: 0 0 35px 90px; padding: 30px; position: relative; } .comment-content h5 { font-size: 16px; font-weight: 600; } .comment-reply { margin-left: 90px; } .comments-form{} .comments-form form{} .comments-form form textarea{background: #f9f9f8 none repeat scroll 0 0; border: medium none; color: #777; display: inline-block; float: left; font-size: 14px; height: 150px; margin: 0; padding: 10px; width: 100%;} .comments-form form label{color: #ccc; display: inline-block; font-size: 10px; letter-spacing: 1px; margin: 15px 0 10px; text-transform: uppercase; width: 100%;} .comments-form form input { background: #f9f9f8 none repeat scroll 0 0; border: medium none; color: #777; display: inline-block; font-size: 13px; letter-spacing: 1px; margin: 0; padding: 13px 10px; width: 100%; } .comments-form button { background-color: #222; border: medium none; color: #fff; cursor: pointer; font-size: 12px; margin: 30px 0; padding: 10px 15px; text-transform: uppercase; transition: all 0.2s ease 0s; } .comments-form button:hover { background: #223C51; } /*------------------------------------------------------------------ [Pagination] */ .pagination { margin: 30px 0 0; } .pagination > li { display: inline-block; margin-right: 2px; } .pagination > li:first-child > a, .pagination > li:first-child > span { border-radius: 3px; } .pagination > li > a, .pagination > li > span { border: 2px solid #eeeeee; border-radius: 3px; color: #777777; display: block; float: none; padding: 8px 15px; } .pagination > .active > a, .pagination > .active > span { background: #27cbc0 none repeat scroll 0 0; border-color: #27cbc0; color: #ffffff; } .pagination > li > a:hover, .pagination > li > a:focus, .pagination > li > span:hover, .pagination > li > span:focus { background: #f3474b none repeat scroll 0 0; border-color: #f3474b; color: #ffffff; } .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover { background-color: #223C51; border-color: #223C51; color: #fff; cursor: default; z-index: 3; } /*# sourceMappingURL=main.css.map */