Last active
December 25, 2018 22:34
-
-
Save rpatil/65c837a84b052b003f9a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body a { | |
| transition: 0.5s all; | |
| -webkit-transition: 0.5s all; | |
| -o-transition: 0.5s all; | |
| -moz-transition: 0.5s all; | |
| -ms-transition: 0.5s all; | |
| } | |
| p { | |
| font-family: 'Roboto Condensed', sans-serif; | |
| } | |
| body { | |
| background: #FFFFFF; | |
| } | |
| .w3ls-banner-top { | |
| background-color: red; | |
| } | |
| .window { | |
| width: 300px; | |
| height: 300px; | |
| background: #a0d5d3; | |
| position: absolute; | |
| margin: auto; | |
| top: 1%; | |
| left: 70%; | |
| border-radius: 50%; | |
| border: 10px solid #f8e7dc; | |
| animation: rock; | |
| animation-iteration-count: infinite; | |
| animation-duration: 1s; | |
| } | |
| @keyframes rock { | |
| 0% { | |
| transform: rotate(-1deg); | |
| } | |
| 50% { | |
| transform: rotate(2deg); | |
| } | |
| 100% { | |
| transform: rotate(-1deg); | |
| } | |
| } | |
| @keyframes rock2 { | |
| 0% { | |
| transform: rotate(1deg); | |
| } | |
| 50% { | |
| transform: rotate(-2deg); | |
| } | |
| 100% { | |
| transform: rotate(1deg); | |
| } | |
| } | |
| .fir { | |
| position: absolute; | |
| margin: 0 auto; | |
| width: 8em; | |
| top: 40%; | |
| left: 50px; | |
| animation: rock; | |
| animation-iteration-count: infinite; | |
| animation-duration: 1s; | |
| } | |
| .message { | |
| position: absolute; | |
| left: 50%; | |
| top: 0%; | |
| color: #f8e7dc; | |
| font-family: 'Mountains of Christmas'; | |
| } | |
| .message h1 { | |
| text-align: center; | |
| font-style: normal; | |
| font-size: 75px; | |
| margin-bottom: 0; | |
| white-space: nowrap; | |
| animation: rock; | |
| animation-iteration-count: infinite; | |
| animation-duration: 1s; | |
| } | |
| .message h2 { | |
| font-style: normal; | |
| font-size: 75px; | |
| margin-bottom: 0; | |
| white-space: nowrap; | |
| animation: rock2; | |
| animation-iteration-count: infinite; | |
| animation-duration: 1s; | |
| } | |
| .banner-address { | |
| float: right; | |
| } | |
| .header h1 { | |
| margin: 0; | |
| } | |
| /*-- banner --*/ | |
| /*-- Nav style -- */ | |
| .cd-stretchy-nav { | |
| position: fixed; | |
| z-index: 99; | |
| top: 37px; | |
| left: 5%; | |
| pointer-events: none; | |
| } | |
| .cd-stretchy-nav .stretchy-nav-bg { | |
| /* this is the stretching navigation background */ | |
| position: absolute; | |
| z-index: 1; | |
| top: 0; | |
| right: 0; | |
| width: 55px; | |
| height: 55px; | |
| border-radius: 30px; | |
| background: #333; | |
| -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); | |
| -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); | |
| -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); | |
| -ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); | |
| box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); | |
| -webkit-transition: height 0.2s, box-shadow 0.2s; | |
| -moz-transition: height 0.2s, box-shadow 0.2s; | |
| -o-transition: height 0.2s, box-shadow 0.2s; | |
| -ms-transition: height 0.2s, box-shadow 0.2s; | |
| transition: height 0.2s, box-shadow 0.2s; | |
| } | |
| .cd-stretchy-nav.nav-is-visible { | |
| pointer-events: auto; | |
| } | |
| .cd-stretchy-nav.nav-is-visible .stretchy-nav-bg { | |
| height: 100%; | |
| -webkit-box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2); | |
| -moz-box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2); | |
| -ms-box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2); | |
| -o-box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2); | |
| box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2); | |
| } | |
| .cd-nav-trigger { | |
| position: absolute; | |
| z-index: 3; | |
| top: 0; | |
| right: 0; | |
| height: 55px; | |
| width: 55px; | |
| -webkit-border-radius: 50%; | |
| -moz-border-radius: 50%; | |
| -o-border-radius: 50%; | |
| -ms-border-radius: 50%; | |
| border-radius: 50%; | |
| /* replace text with image */ | |
| overflow: hidden; | |
| white-space: nowrap; | |
| color: transparent !important; | |
| pointer-events: auto; | |
| } | |
| .cd-nav-trigger span, | |
| .cd-nav-trigger span::after, | |
| .cd-nav-trigger span::before { | |
| position: absolute; | |
| width: 23px; | |
| height: 2px; | |
| background-color: #ffffff; | |
| } | |
| .cd-nav-trigger span { | |
| /* middle line of the hamburger icon */ | |
| left: 50%; | |
| top: 50%; | |
| bottom: auto; | |
| right: auto; | |
| -webkit-transform: translateX(-50%) translateY(-50%); | |
| -moz-transform: translateX(-50%) translateY(-50%); | |
| -ms-transform: translateX(-50%) translateY(-50%); | |
| -o-transform: translateX(-50%) translateY(-50%); | |
| transform: translateX(-50%) translateY(-50%); | |
| -webkit-transition: background-color 0.2s; | |
| -moz-transition: background-color 0.2s; | |
| transition: background-color 0.2s; | |
| } | |
| .cd-nav-trigger span::after, | |
| .cd-nav-trigger span::before { | |
| /* top and bottom lines of the hamburger icon */ | |
| content: ''; | |
| top: 0; | |
| left: 0; | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| -webkit-transition: -webkit-transform 0.2s; | |
| -moz-transition: -moz-transform 0.2s; | |
| transition: transform 0.2s; | |
| } | |
| .cd-nav-trigger span::before { | |
| -webkit-transform: translateY(-7px); | |
| -moz-transform: translateY(-7px); | |
| -ms-transform: translateY(-7px); | |
| -o-transform: translateY(-7px); | |
| transform: translateY(-7px); | |
| } | |
| .cd-nav-trigger span::after { | |
| -webkit-transform: translateY(7px); | |
| -moz-transform: translateY(7px); | |
| -ms-transform: translateY(7px); | |
| -o-transform: translateY(7px); | |
| transform: translateY(7px); | |
| } | |
| .no-touch .cd-nav-trigger:hover~.stretchy-nav-bg { | |
| -webkit-box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2); | |
| -moz-box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2); | |
| -o-box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2); | |
| -ms-box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2); | |
| box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2); | |
| } | |
| .nav-is-visible .cd-nav-trigger span { | |
| background-color: transparent; | |
| } | |
| .nav-is-visible .cd-nav-trigger span::before { | |
| -webkit-transform: rotate(-45deg); | |
| -moz-transform: rotate(-45deg); | |
| -ms-transform: rotate(-45deg); | |
| -o-transform: rotate(-45deg); | |
| transform: rotate(-45deg); | |
| } | |
| .nav-is-visible .cd-nav-trigger span::after { | |
| -webkit-transform: rotate(45deg); | |
| -moz-transform: rotate(45deg); | |
| -ms-transform: rotate(45deg); | |
| -o-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| } | |
| .cd-stretchy-nav ul { | |
| position: relative; | |
| z-index: 2; | |
| padding: 60px 0 10px; | |
| visibility: hidden; | |
| -webkit-transition: visibility 0.3s; | |
| -moz-transition: visibility 0.3s; | |
| transition: visibility 0.3s; | |
| text-align: right; | |
| } | |
| .cd-stretchy-nav ul li { | |
| display: block; | |
| } | |
| .cd-stretchy-nav ul a { | |
| position: relative; | |
| display: block; | |
| width: 55px; | |
| height: 40px; | |
| padding: 0; | |
| color: rgba(255, 255, 255, 0.7); | |
| -webkit-transition: color 0.2s; | |
| -moz-transition: color 0.2s; | |
| transition: color 0.2s; | |
| text-align: left; | |
| } | |
| .cd-stretchy-nav ul a::after { | |
| content: "\f015"; | |
| position: absolute; | |
| right: 19px; | |
| top: 50%; | |
| -webkit-transform: translateY(-50%) scale(0); | |
| -moz-transform: translateY(-50%) scale(0); | |
| -ms-transform: translateY(-50%) scale(0); | |
| -o-transform: translateY(-50%) scale(0); | |
| transform: translateY(-50%) scale(0); | |
| opacity: .6; | |
| font: 14px/1 FontAwesome; | |
| font-size: 1.2em; | |
| } | |
| .cd-stretchy-nav ul li:nth-of-type(2) a::after { | |
| content: "\f05a"; | |
| } | |
| .cd-stretchy-nav ul li:nth-of-type(3) a::after { | |
| content: "\f0c0"; | |
| } | |
| .cd-stretchy-nav ul li:nth-of-type(4) a::after { | |
| content: "\f03e"; | |
| font-size: 1.1em; | |
| } | |
| .cd-stretchy-nav ul li:nth-of-type(5) a::after { | |
| content: "\f009"; | |
| } | |
| .cd-stretchy-nav ul li:nth-of-type(6) a::after { | |
| content: "\f1ea"; | |
| font-size: 1.1em; | |
| } | |
| .cd-stretchy-nav ul li:nth-of-type(7) a::after { | |
| content: "\f003"; | |
| } | |
| .cd-stretchy-nav.edit-content ul span { | |
| position: absolute; | |
| top: 6px; | |
| left: 64px; | |
| height: 30px; | |
| line-height: 30px; | |
| padding: 0 1em; | |
| opacity: 0; | |
| background-color: rgba(0, 0, 0, 0.55); | |
| border-radius: 2px; | |
| text-align: center; | |
| font-size: 1.1em; | |
| font-weight: 300; | |
| font-family: 'Montserrat', sans-serif; | |
| } | |
| .cd-stretchy-nav.edit-content ul span::after { | |
| /* triangle below the tooltip */ | |
| content: ''; | |
| position: absolute; | |
| right: 100%; | |
| top: 50%; | |
| bottom: auto; | |
| -webkit-transform: translateY(-50%); | |
| -moz-transform: translateY(-50%); | |
| -ms-transform: translateY(-50%); | |
| -o-transform: translateY(-50%); | |
| transform: translateY(-50%); | |
| height: 0; | |
| width: 0; | |
| border: 4px solid transparent; | |
| border-right-color: rgba(0, 0, 0, 0.55); | |
| } | |
| .cd-stretchy-nav.edit-content.nav-is-visible ul span { | |
| /* reset default style */ | |
| -webkit-animation: none; | |
| -moz-animation: none; | |
| animation: none; | |
| } | |
| .no-touch .cd-stretchy-nav.edit-content.nav-is-visible ul a:hover span { | |
| opacity: 1; | |
| /* reset default style */ | |
| -webkit-transform: translateX(0); | |
| -moz-transform: translateX(0); | |
| -ms-transform: translateX(0); | |
| -o-transform: translateX(0); | |
| transform: translateX(0); | |
| } | |
| .cd-stretchy-nav.nav-is-visible ul { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .cd-stretchy-nav.edit-content.nav-is-visible ul a::after { | |
| /* navigation item icons */ | |
| -webkit-transform: translateY(-50%) scale(1); | |
| -moz-transform: translateY(-50%) scale(1); | |
| -ms-transform: translateY(-50%) scale(1); | |
| -o-transform: translateY(-50%) scale(1); | |
| transform: translateY(-50%) scale(1); | |
| -webkit-animation: scaleIn 0.15s backwards; | |
| -moz-animation: scaleIn 0.15s backwards; | |
| animation: scaleIn 0.15s backwards; | |
| -webkit-transition: opacity 0.2s; | |
| -moz-transition: opacity 0.2s; | |
| transition: opacity 0.2s; | |
| } | |
| .cd-stretchy-nav.nav-is-visible ul a.active, | |
| .cd-stretchy-nav.nav-is-visible ul li.active a { | |
| color: #ffffff; | |
| } | |
| .cd-stretchy-nav.nav-is-visible ul a.active::after, | |
| .cd-stretchy-nav.nav-is-visible ul li.active a::after { | |
| opacity: 1; | |
| } | |
| .cd-stretchy-nav.nav-is-visible ul a.active::before { | |
| -webkit-transform: translateX(3px) translateY(-50%) scaleY(1); | |
| -moz-transform: translateX(3px) translateY(-50%) scaleY(1); | |
| -ms-transform: translateX(3px) translateY(-50%) scaleY(1); | |
| -o-transform: translateX(3px) translateY(-50%) scaleY(1); | |
| transform: translateX(3px) translateY(-50%) scaleY(1); | |
| -webkit-transition: -webkit-transform 0.15s 0.3s; | |
| -moz-transition: -moz-transform 0.15s 0.3s; | |
| transition: transform 0.15s 0.3s; | |
| } | |
| .no-touch .cd-stretchy-nav.nav-is-visible ul a:hover { | |
| color: #ffffff; | |
| } | |
| .no-touch .cd-stretchy-nav.nav-is-visible ul a:hover::after { | |
| opacity: 1; | |
| } | |
| .no-touch .cd-stretchy-nav.nav-is-visible ul a:hover span { | |
| -webkit-transform: translateX(-5px); | |
| -moz-transform: translateX(-5px); | |
| -ms-transform: translateX(-5px); | |
| -o-transform: translateX(-5px); | |
| transform: translateX(-5px); | |
| } | |
| .cd-stretchy-nav.nav-is-visible ul li:first-of-type a::after, | |
| .cd-stretchy-nav.nav-is-visible ul li:first-of-type span { | |
| -webkit-animation-delay: 0.05s; | |
| -moz-animation-delay: 0.05s; | |
| animation-delay: 0.05s; | |
| } | |
| .cd-stretchy-nav.nav-is-visible ul li:nth-of-type(2) a::after, | |
| .cd-stretchy-nav.nav-is-visible ul li:nth-of-type(2) span { | |
| -webkit-animation-delay: 0.1s; | |
| -moz-animation-delay: 0.1s; | |
| animation-delay: 0.1s; | |
| } | |
| .cd-stretchy-nav.nav-is-visible ul li:nth-of-type(3) a::after, | |
| .cd-stretchy-nav.nav-is-visible ul li:nth-of-type(3) span { | |
| -webkit-animation-delay: 0.15s; | |
| -moz-animation-delay: 0.15s; | |
| animation-delay: 0.15s; | |
| } | |
| .cd-stretchy-nav.nav-is-visible ul li:nth-of-type(4) a::after, | |
| .cd-stretchy-nav.nav-is-visible ul li:nth-of-type(4) span { | |
| -webkit-animation-delay: 0.2s; | |
| -moz-animation-delay: 0.2s; | |
| animation-delay: 0.2s; | |
| } | |
| .cd-stretchy-nav.nav-is-visible ul li:nth-of-type(5) a::after, | |
| .cd-stretchy-nav.nav-is-visible ul li:nth-of-type(5) span { | |
| -webkit-animation-delay: 0.25s; | |
| -moz-animation-delay: 0.25s; | |
| animation-delay: 0.25s; | |
| } | |
| @-webkit-keyframes scaleIn { | |
| from { | |
| -webkit-transform: translateY(-50%) scale(0); | |
| } | |
| to { | |
| -webkit-transform: translateY(-50%) scale(1); | |
| } | |
| } | |
| @-moz-keyframes scaleIn { | |
| from { | |
| -moz-transform: translateY(-50%) scale(0); | |
| } | |
| to { | |
| -moz-transform: translateY(-50%) scale(1); | |
| } | |
| } | |
| @keyframes scaleIn { | |
| from { | |
| -webkit-transform: translateY(-50%) scale(0); | |
| -moz-transform: translateY(-50%) scale(0); | |
| -ms-transform: translateY(-50%) scale(0); | |
| -o-transform: translateY(-50%) scale(0); | |
| transform: translateY(-50%) scale(0); | |
| } | |
| to { | |
| -webkit-transform: translateY(-50%) scale(1); | |
| -moz-transform: translateY(-50%) scale(1); | |
| -ms-transform: translateY(-50%) scale(1); | |
| -o-transform: translateY(-50%) scale(1); | |
| transform: translateY(-50%) scale(1); | |
| } | |
| } | |
| @-webkit-keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| -webkit-transform: translateX(-25px); | |
| } | |
| to { | |
| opacity: 1; | |
| -webkit-transform: translateX(0); | |
| } | |
| } | |
| @-moz-keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| -moz-transform: translateX(-25px); | |
| } | |
| to { | |
| opacity: 1; | |
| -moz-transform: translateX(0); | |
| } | |
| } | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| -webkit-transform: translateX(-25px); | |
| -moz-transform: translateX(-25px); | |
| -ms-transform: translateX(-25px); | |
| -o-transform: translateX(-25px); | |
| transform: translateX(-25px); | |
| } | |
| to { | |
| opacity: 1; | |
| -webkit-transform: translateX(0); | |
| -moz-transform: translateX(0); | |
| -ms-transform: translateX(0); | |
| -o-transform: translateX(0); | |
| transform: translateX(0); | |
| } | |
| } | |
| /*-- //Nav style -- */ | |
| /*-- banner-bottom --*/ | |
| .agileits_dummy_para { | |
| color: #999; | |
| margin: 1em 0 0; | |
| text-align: center; | |
| } | |
| .agileinfo_header span { | |
| color: #fb5710; | |
| } | |
| .banner-bottom { | |
| padding: 5em 0; | |
| } | |
| .w3_banner_bottom_grid_pos { | |
| position: relative; | |
| } | |
| .w3_banner_bottom_grid { | |
| position: absolute; | |
| left: 45%; | |
| top: -58px; | |
| } | |
| .w3_banner_bottom_grid h3 { | |
| font-size: 5.5em; | |
| font-weight: bold; | |
| color: #e6e6e6; | |
| text-transform: uppercase; | |
| } | |
| .w3l_banner_bottom_right h3 { | |
| text-transform: capitalize; | |
| font-size: 2em; | |
| color: #212121; | |
| } | |
| .w3l_banner_bottom_right h3 span { | |
| color: #fb5710; | |
| } | |
| .w3l_banner_bottom_right p { | |
| margin: 2em 0; | |
| color: #999; | |
| line-height: 2em; | |
| } | |
| .w3l_banner_bottom_right ul li { | |
| display: block; | |
| color: #212121; | |
| text-transform: uppercase; | |
| padding-top: 1.5em; | |
| } | |
| .w3l_banner_bottom_right ul li i { | |
| font-size: 2em; | |
| padding-right: 1em; | |
| vertical-align: middle; | |
| color: #fb5710; | |
| width: 60px; | |
| } | |
| .agileits_banner_bottom_grid_three { | |
| margin: 5em 0 0; | |
| } | |
| .w3_agileits_para { | |
| margin: 2em auto 0; | |
| color: #999; | |
| line-height: 2em; | |
| } | |
| /*-- banner --*/ | |
| /*-- about--*/ | |
| .w3-agile-team, | |
| .services, | |
| .about, | |
| .testimonials, | |
| .w3-fashion-sale, | |
| .portfolio, | |
| .news, | |
| .contact-w3l { | |
| padding: 4em 0; | |
| } | |
| .w3-head-all h3 { | |
| font-size: 4em; | |
| font-weight: 400; | |
| color: #ffa700; | |
| text-align: center; | |
| font-family: 'Dancing Script', cursive; | |
| letter-spacing: 2px; | |
| margin-bottom: 40px; | |
| } | |
| .arrows-two { | |
| position: relative; | |
| color: #EFA52C; | |
| font-size: 2em; | |
| } | |
| .arrows-two:before { | |
| content: ''; | |
| position: absolute; | |
| bottom: 42%; | |
| left: 22.5%; | |
| background: #333; | |
| width: 20%; | |
| height: 3px; | |
| } | |
| .arrows-two:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 42%; | |
| right: 22.5%; | |
| background: #333; | |
| width: 20%; | |
| height: 3px; | |
| } | |
| h3.tittle { | |
| font-size: 3em; | |
| font-family: 'Dancing Script', cursive; | |
| color: #bd062a; | |
| } | |
| .ab-text { | |
| text-align: center; | |
| margin-top: 7em; | |
| } | |
| .ab-text h3 { | |
| font-size: 3em; | |
| font-family: 'Dancing Script', cursive; | |
| color: #bd062a; | |
| } | |
| .ab-text p { | |
| color: #777; | |
| line-height: 1.9em; | |
| font-size: 1em; | |
| margin: 1em 0; | |
| } | |
| .ab-left { | |
| float: left; | |
| } | |
| .ab-right { | |
| float: right; | |
| } | |
| .h-f { | |
| width: 49%; | |
| float: left; | |
| margin-right: 1%; | |
| } | |
| .grid { | |
| position: relative; | |
| clear: both; | |
| margin: 0 auto; | |
| padding: 2em 0 0 0; | |
| } | |
| .hf-text { | |
| text-align: center; | |
| background-color: #fff; | |
| padding-bottom: 1em; | |
| } | |
| .hf-text h5 { | |
| font-size: 2em; | |
| font-weight: 400; | |
| color: #011750; | |
| line-height: 1.8em; | |
| } | |
| .hf-text p { | |
| color: #D00030; | |
| text-transform: uppercase; | |
| font-size: 1em; | |
| font-weight: 600; | |
| } | |
| /* Common style */ | |
| .grid figure { | |
| position: relative; | |
| float: left; | |
| overflow: hidden; | |
| height: auto; | |
| background: #3085a3; | |
| text-align: center; | |
| cursor: pointer; | |
| } | |
| .grid figure img { | |
| position: relative; | |
| display: block; | |
| min-height: 100%; | |
| max-width: 100%; | |
| opacity: 0.8; | |
| } | |
| .grid figure figcaption { | |
| padding: 2em; | |
| color: #fff; | |
| font-size: 1.25em; | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| } | |
| .grid figure figcaption::before, | |
| .grid figure figcaption::after { | |
| pointer-errors: none; | |
| } | |
| .grid figure figcaption, | |
| .grid figure figcaption>a { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| /* Anchor will cover the whole item by default */ | |
| /* For some effects it will show as a button */ | |
| .grid figure figcaption>a { | |
| z-index: 1000; | |
| text-indent: 200%; | |
| white-space: nowrap; | |
| font-size: 0; | |
| opacity: 0; | |
| } | |
| .grid figure h4 { | |
| word-spacing: -0.15em; | |
| font-weight: 300; | |
| } | |
| .grid figure h4 span { | |
| font-weight: bold; | |
| color: #fff; | |
| margin-left: 12px; | |
| } | |
| .grid figure h4, | |
| .grid figure p { | |
| margin: 0; | |
| } | |
| figure.effect-jazz { | |
| background: -webkit-linear-gradient(-65deg, #000 0%, #000 100%); | |
| background: linear-gradient(-65deg, #000 0%, #000 100%); | |
| } | |
| figure.effect-jazz img { | |
| opacity: 0.8; | |
| margin-bottom: 10px; | |
| } | |
| figure.effect-jazz figcaption::after, | |
| figure.effect-jazz img, | |
| figure.effect-jazz p { | |
| -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; | |
| transition: opacity 0.35s, transform 0.35s; | |
| } | |
| figure.effect-jazz figcaption::after { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| border-top: 1px solid #fff; | |
| border-bottom: 1px solid #fff; | |
| content: ''; | |
| opacity: 0; | |
| -webkit-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1); | |
| transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1); | |
| -webkit-transform-origin: 50% 50%; | |
| transform-origin: 50% 50%; | |
| } | |
| figure.effect-jazz h2, | |
| figure.effect-jazz p { | |
| opacity: 1; | |
| -webkit-transform: scale3d(0.8, 0.8, 1); | |
| transform: scale3d(0.8, 0.8, 1); | |
| } | |
| figure.effect-jazz h4 { | |
| padding-top: 57%; | |
| -webkit-transition: -webkit-transform 0.35s; | |
| transition: transform 0.35s; | |
| color: #EFA52C; | |
| font-weight: bold; | |
| font-size: 2em; | |
| } | |
| figure.effect-jazz p { | |
| padding: 0em 2em; | |
| text-transform: none; | |
| font-size: 1em; | |
| margin: 1em 0 0 0; | |
| letter-spacing: 1px; | |
| opacity: 0; | |
| line-height: 2em; | |
| } | |
| figure.effect-jazz:hover img { | |
| opacity: 0.5; | |
| -webkit-transform: scale3d(1.05, 1.05, 1); | |
| transform: scale3d(1.05, 1.05, 1); | |
| } | |
| figure.effect-jazz:hover figcaption::after { | |
| opacity: 1; | |
| -webkit-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); | |
| transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); | |
| } | |
| figure.effect-jazz:hover h4, | |
| figure.effect-jazz:hover p { | |
| opacity: 1; | |
| -webkit-transform: scale3d(1, 1, 1); | |
| transform: scale3d(1, 1, 1); | |
| } | |
| .h-f { | |
| margin-bottom: 2em; | |
| } | |
| .h-f.one { | |
| margin-bottom: 0em; | |
| } | |
| .start { | |
| text-align: center; | |
| margin-top: 1.5em; | |
| } | |
| .start a { | |
| padding: 15px 35px; | |
| background: #bd062a; | |
| font-size: 1em; | |
| color: #fff; | |
| text-decoration: none; | |
| font-family: 'Merriweather Sans', sans-serif; | |
| text-transform: uppercase; | |
| } | |
| /* Bounce To Bottom */ | |
| .hvr-bounce-to-bottom { | |
| display: inline-block; | |
| vertical-align: middle; | |
| -webkit-transform: translateZ(0); | |
| transform: translateZ(0); | |
| box-shadow: 0 0 1px rgba(0, 0, 0, 0); | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| -moz-osx-font-smoothing: grayscale; | |
| position: relative; | |
| -webkit-transition-property: color; | |
| transition-property: color; | |
| -webkit-transition-duration: 0.5s; | |
| transition-duration: 0.5s; | |
| } | |
| .hvr-bounce-to-bottom:before { | |
| content: ""; | |
| position: absolute; | |
| z-index: -1; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: #333; | |
| -webkit-transform: scaleY(0); | |
| transform: scaleY(0); | |
| -webkit-transform-origin: 50% 0; | |
| transform-origin: 50% 0; | |
| -webkit-transition-property: transform; | |
| transition-property: transform; | |
| -webkit-transition-duration: 0.5s; | |
| transition-duration: 0.5s; | |
| -webkit-transition-timing-function: ease-out; | |
| transition-timing-function: ease-out; | |
| } | |
| .hvr-bounce-to-bottom:hover, | |
| .hvr-bounce-to-bottom:focus, | |
| .hvr-bounce-to-bottom:active { | |
| color: white; | |
| } | |
| .hvr-bounce-to-bottom:hover:before, | |
| .hvr-bounce-to-bottom:focus:before, | |
| .hvr-bounce-to-bottom:active:before { | |
| -webkit-transform: scaleY(1); | |
| transform: scaleY(1); | |
| -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); | |
| transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); | |
| } | |
| /*--//about--*/ | |
| /*-- services --*/ | |
| .services { | |
| background: url(../images/s2.jpg) no-repeat 0px 0px; | |
| background-size: cover; | |
| min-height: 600px; | |
| } | |
| .w3-agileits-heading { | |
| text-align: center; | |
| } | |
| .w3-agileits-services-grid:nth-child(1), | |
| .w3-agileits-services-grid:nth-child(2), | |
| .w3-agileits-services-grid:nth-child(3) { | |
| border-bottom: 1px ridge #ececec; | |
| } | |
| .w3-agileits-services-grid { | |
| text-align: center; | |
| padding: 3em; | |
| } | |
| .w3-agileits-services-grid i.fa.fa-cogs, | |
| .w3-agileits-services-grid i.fa.fa-comments, | |
| .w3-agileits-services-grid i.fa.fa-heart, | |
| .w3-agileits-services-grid i.fa.fa-paper-plane, | |
| .w3-agileits-services-grid i.fa.fa-glass, | |
| .w3-agileits-services-grid i.fa.fa-users { | |
| color: #fda300; | |
| font-size: 2em; | |
| } | |
| .w3-agileits-services-grid h4 { | |
| color: #ffff; | |
| font-size: 1.5em; | |
| font-weight: 600; | |
| margin: 1em 0; | |
| text-transform: capitalize; | |
| } | |
| .w3-agileits-services-grid p { | |
| color: #999999; | |
| font-size: 1em; | |
| margin: 0; | |
| line-height: 1.8em; | |
| } | |
| .agile-services1, | |
| .agile-services2 { | |
| border-left: 1px ridge #ececec; | |
| border-right: 1px ridge #ececec; | |
| } | |
| /*-- //services --*/ | |
| /*-- portfolio --*/ | |
| .w3_agile_portfolio_grid { | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .w3layouts_news_grid_pos { | |
| opacity: 0; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| background-color: rgba(0, 0, 0, 0.4); | |
| right: 0; | |
| -webkit-transition: all 400ms ease; | |
| -moz-transition: all 400ms ease; | |
| transition: all 400ms ease; | |
| } | |
| .w3layouts_news_grid_pos { | |
| -webkit-transform: scale3d(0, 0, 1); | |
| -moz-transform: scale3d(0, 0, 1); | |
| -ms-transform: scale3d(0, 0, 1); | |
| transform: scale3d(0, 0, 1); | |
| } | |
| .w3_agile_portfolio_grid:hover .w3layouts_news_grid_pos { | |
| opacity: 1; | |
| -webkit-transform: scale3d(1, 1, 1); | |
| -moz-transform: scale3d(1, 1, 1); | |
| -ms-transform: scale3d(1, 1, 1); | |
| transform: scale3d(1, 1, 1); | |
| } | |
| .w3_agile_portfolio_grid:hover .wthree_text { | |
| opacity: 1; | |
| -webkit-transform: translateY(0) scale3d(1, 1, 1); | |
| -moz-transform: translateY(0) scale3d(1, 1, 1); | |
| -ms-transform: translateY(0) scale3d(1, 1, 1); | |
| transform: translateY(0) scale3d(1, 1, 1); | |
| -webkit-transition: transform 400ms ease 380ms; | |
| -moz-transition: transform 400ms ease 380ms; | |
| transition: transform 400ms ease 380ms; | |
| } | |
| .wthree_text { | |
| text-align: center; | |
| padding: 7.8em 0 0; | |
| opacity: 0; | |
| -webkit-transform: translateY(0) scale3d(0, 0, 1); | |
| -moz-transform: translateY(0) scale3d(0, 0, 1); | |
| -ms-transform: translateY(0) scale3d(0, 0, 1); | |
| transform: translateY(0) scale3d(0, 0, 1); | |
| -webkit-transition: transform 400ms ease 280ms; | |
| -moz-transition: transform 400ms ease 280ms; | |
| transition: transform 400ms ease 280ms; | |
| } | |
| .wthree_text h3 { | |
| color: #fff; | |
| font-size: 1.8em; | |
| text-transform: uppercase; | |
| } | |
| .wthree_text h3 span, | |
| .agile_testimonials_grid h3 span { | |
| color: #bd062a; | |
| } | |
| /*--flexisel--*/ | |
| .flex-slider { | |
| background: #222227; | |
| padding: 70px 0 165px 0; | |
| } | |
| #flexiselDemo1 { | |
| display: none; | |
| } | |
| .nbs-flexisel-container { | |
| position: relative; | |
| max-width: 100%; | |
| } | |
| .nbs-flexisel-ul { | |
| position: relative; | |
| width: 9999px; | |
| margin: 0px; | |
| padding: 0px; | |
| list-style-type: none; | |
| } | |
| .nbs-flexisel-inner { | |
| overflow: hidden; | |
| margin: 0px auto; | |
| padding: 0; | |
| } | |
| .nbs-flexisel-item { | |
| float: left; | |
| margin: 0; | |
| padding: 0px; | |
| position: relative; | |
| line-height: 35px; | |
| } | |
| .nbs-flexisel-item>img { | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| /*---- Nav ---*/ | |
| .nbs-flexisel-nav-left, | |
| .nbs-flexisel-nav-right { | |
| width: 40px; | |
| height: 40px; | |
| position: absolute; | |
| cursor: pointer; | |
| z-index: 100; | |
| background: none; | |
| top: -5% !important; | |
| border-radius: 5px; | |
| display: none; | |
| } | |
| .nbs-flexisel-nav-left { | |
| left: 91%; | |
| } | |
| .nbs-flexisel-nav-right { | |
| right: 1.2%; | |
| background: none; | |
| } | |
| .w3-head-portfolio { | |
| text-align: center; | |
| } | |
| .w3-head-portfolio { | |
| text-align: center; | |
| background: #bd062a; | |
| padding: 2em; | |
| } | |
| .w3-head-portfolio h3 { | |
| font-size: 3em; | |
| color: #fff; | |
| margin-bottom: 0.5em; | |
| font-family: 'Dancing Script', cursive; | |
| } | |
| .w3-head-portfolio h4 { | |
| font-size: 2.5em; | |
| color: #fff; | |
| letter-spacing: 3px; | |
| font-family: 'Dancing Script', cursive; | |
| } | |
| /*--//flexisel--*/ | |
| /*-- //portfolio --*/ | |
| /*-- news --*/ | |
| .agile-news-left img { | |
| width: 100%; | |
| } | |
| .agile-news-right { | |
| margin: 4em 0 0 0; | |
| } | |
| .date-grid { | |
| margin: 0 0 1.5em 0; | |
| } | |
| .admin { | |
| float: left; | |
| } | |
| .time p { | |
| color: #383838; | |
| font-size: .875em; | |
| margin: 0; | |
| } | |
| .w3-agile-news-info a { | |
| color: #212121; | |
| font-size: 1.5em; | |
| margin: 0; | |
| text-decoration: none; | |
| line-height: 1.4; | |
| } | |
| .w3-agile-news-info a:hover { | |
| color: #f70255; | |
| } | |
| .w3-agile-news-info p { | |
| font-size: 1em; | |
| margin: 1em 0 0 0; | |
| line-height: 1.8em; | |
| } | |
| .w3l-button { | |
| margin: 2em 0 1em 0; | |
| } | |
| .w3l-button a { | |
| color: #000000; | |
| font-size: 1em; | |
| text-decoration: none; | |
| padding: .7em 3em; | |
| font-weight: 600; | |
| text-align: center; | |
| border: solid 1px #000000; | |
| } | |
| .w3l-button a:hover { | |
| background: #bd062a; | |
| border: solid 1px #bd062a; | |
| color: #FFFFFF; | |
| } | |
| .agile-news-right.w3l-newsw { | |
| margin: 0 0 6em; | |
| } | |
| /*-- model --*/ | |
| .modal-header h4 { | |
| color: #f70255; | |
| font-size: 2em; | |
| letter-spacing: 1px; | |
| text-align: center; | |
| margin: .5em 0 1em; | |
| } | |
| .modal-header span { | |
| font-size: 1em; | |
| color: #777; | |
| letter-spacing: 1px; | |
| line-height: 33px; | |
| padding-bottom: 16px; | |
| display: inline-block; | |
| margin-top: 1em; | |
| } | |
| .modal-header img { | |
| float: left; | |
| width: 100%; | |
| } | |
| /*-- //model4 --*/ | |
| .modal-dialog4 { | |
| width: 640px; | |
| margin: 40px auto; | |
| } | |
| /*-- //model4 --*/ | |
| /*-- /read more form --*/ | |
| .agile-its { | |
| width: 100%; | |
| margin: 40px auto; | |
| background: #fff; | |
| } | |
| .agile-its h2 { | |
| text-align: center; | |
| font-size: 2em; | |
| color: #f44336; | |
| } | |
| .w3layouts { | |
| padding: 30px 50px 40px; | |
| } | |
| .w3layouts p { | |
| font-size: 14px; | |
| line-height: 27px; | |
| color: #000; | |
| margin-bottom: 10px; | |
| } | |
| .agileinfo { | |
| position: relative; | |
| } | |
| input[type="submit"] { | |
| width: 100%; | |
| background: #bd062a; | |
| border: none; | |
| padding: 12px 0; | |
| color: #fff; | |
| font-size: 17px; | |
| cursor: pointer; | |
| letter-spacing: 1px; | |
| -webkit-transition: 0.5s all; | |
| /* Safari */ | |
| transition: 0.5s all; | |
| -moz-transition: 0.5s all; | |
| -ms-transition: 0.5 all; | |
| -o-transition: 0.5s all; | |
| font-family: 'Open Sans', sans-serif; | |
| text-transform: capitalize; | |
| } | |
| .wthreesubmitaits { | |
| width: 60%; | |
| margin: 1em auto 0; | |
| } | |
| .wthree-text { | |
| margin: 6em 0 0 0; | |
| } | |
| input[type="submit"]:hover { | |
| background: #146eb4; | |
| } | |
| label { | |
| font-size: 1em; | |
| font-weight: 600; | |
| color: #212121; | |
| margin-bottom: .7em; | |
| display: block; | |
| text-transform: uppercase; | |
| } | |
| input[type="text"], | |
| input[type="email"], | |
| select, | |
| select.dropdown { | |
| width: 96%; | |
| padding: 0em 1em 1em 0; | |
| border: none; | |
| border-bottom: 1px solid #999; | |
| font-size: .9em; | |
| letter-spacing: .5px; | |
| outline: none; | |
| color: #000; | |
| background-color: transparent; | |
| margin-bottom: 1.2em; | |
| font-family: 'Open Sans', sans-serif; | |
| } | |
| select { | |
| width: 31%; | |
| float: left; | |
| margin-right: 1em; | |
| color: #666; | |
| font-family: 'Open Sans', sans-serif; | |
| font-size: 15px; | |
| font-weight: 600; | |
| } | |
| .last select { | |
| margin-right: 0em; | |
| } | |
| .w3_agileits_main_grid_left_l { | |
| float: left; | |
| margin-bottom: 2em; | |
| margin-top: .5em; | |
| } | |
| .w3_agileits_main_grid_left_l h3 { | |
| font-size: 16px; | |
| color: #000; | |
| font-family: 'Open Sans', sans-serif; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| .w3_agileits_main_grid_left_r { | |
| float: none; | |
| margin-left: 7em; | |
| margin-top: .6em; | |
| } | |
| .agileinfo_radio_button { | |
| float: left; | |
| margin-left: 2em; | |
| } | |
| .agileinfo_radio_button:first-child { | |
| margin-left: 0; | |
| } | |
| label.radio, | |
| .checkbox { | |
| font-size: 15px; | |
| font-weight: 600; | |
| color: #484848; | |
| padding-left: 25px; | |
| margin: 0; | |
| position: relative; | |
| text-transform: capitalize; | |
| font-family: 'Open Sans', sans-serif; | |
| } | |
| .checkbox input, | |
| .radio input { | |
| position: absolute; | |
| left: -9999px; | |
| } | |
| .radio span, | |
| .checkbox span { | |
| position: absolute; | |
| top: 3px; | |
| left: 0; | |
| display: block; | |
| width: 15px; | |
| height: 15px; | |
| outline: none; | |
| background: #00BCD4; | |
| border-radius: 50%; | |
| -webkit-border-radius: 50%; | |
| -moz-border-radius: 50%; | |
| -o-border-radius: 50%; | |
| -ms-border-radius: 50%; | |
| cursor: pointer; | |
| } | |
| .radio input+span:after, | |
| .checkbox input+span:after { | |
| content: ''; | |
| top: 3px; | |
| left: 3px; | |
| width: 9px; | |
| height: 9px; | |
| border-radius: 50%; | |
| background-color: #fff !important; | |
| } | |
| .radio input:checked+span:after { | |
| opacity: 1; | |
| } | |
| .checkbox input+span:after, | |
| .radio input+span:after { | |
| position: absolute; | |
| opacity: 0; | |
| transition: opacity 0.1s; | |
| -o-transition: opacity 0.1s; | |
| -ms-transition: opacity 0.1s; | |
| -moz-transition: opacity 0.1s; | |
| -webkit-transition: opacity 0.1s; | |
| } | |
| /*-- checkbox --*/ | |
| .wthree-text label { | |
| font-size: 0.9em; | |
| color: #333; | |
| cursor: pointer; | |
| position: relative; | |
| float: left; | |
| font-weight: 600; | |
| } | |
| .radio i.fa { | |
| padding-right: .5em; | |
| color: #bd062a; | |
| font-size: 25px; | |
| vertical-align: middle; | |
| } | |
| input.checkbox { | |
| background: #146eb4; | |
| cursor: pointer; | |
| width: 1em; | |
| height: 1em; | |
| } | |
| input.checkbox:before { | |
| content: ""; | |
| position: absolute; | |
| width: 1.2em; | |
| height: 1.2em; | |
| background: inherit; | |
| cursor: pointer; | |
| } | |
| input.checkbox:after { | |
| content: ""; | |
| position: absolute; | |
| top: 0px; | |
| left: 0; | |
| z-index: 1; | |
| width: 1.2em; | |
| height: 1.2em; | |
| border: 1px solid #fff; | |
| -webkit-transition: .4s ease-in-out; | |
| -moz-transition: .4s ease-in-out; | |
| -o-transition: .4s ease-in-out; | |
| transition: .4s ease-in-out; | |
| } | |
| input.checkbox:checked:after { | |
| -webkit-transform: rotate(-45deg); | |
| -moz-transform: rotate(-45deg); | |
| -o-transform: rotate(-45deg); | |
| -ms-transform: rotate(-45deg); | |
| transform: rotate(-45deg); | |
| height: .5rem; | |
| border: 1px solid #fff; | |
| border-top-color: transparent; | |
| border-right-color: transparent; | |
| } | |
| .anim input.checkbox:checked:after { | |
| -webkit-transform: rotate(-45deg); | |
| -moz-transform: rotate(-45deg); | |
| -o-transform: rotate(-45deg); | |
| -ms-transform: rotate(-45deg); | |
| transform: rotate(-45deg); | |
| height: .5rem; | |
| border-color: transparent; | |
| border-right-color: transparent; | |
| animation: .4s rippling .4s ease; | |
| animation-fill-mode: forwards; | |
| } | |
| @keyframes rippling { | |
| 50% { | |
| border-left-color: #fff; | |
| } | |
| 100% { | |
| border-bottom-color: #fff; | |
| border-left-color: #fff; | |
| } | |
| } | |
| .anim span { | |
| padding-left: .5em; | |
| vertical-align: top; | |
| } | |
| input[type="file"] { | |
| position: absolute; | |
| top: 0px; | |
| left: 23%; | |
| padding: 8px 5px; | |
| opacity: 0; | |
| cursor: pointer; | |
| } | |
| /*-- //checkbox --*/ | |
| /*-- //read more form --*/ | |
| /*-- //news --*/ | |
| /*-- footer --*/ | |
| .w3l_footer { | |
| background: #0e0e0e; | |
| padding: 3em 0; | |
| } | |
| .w3ls_footer_grid_left { | |
| width: 33.3%; | |
| } | |
| .w3ls_footer_grid_left h4 { | |
| font-size: 1.2em; | |
| color: #fff; | |
| letter-spacing: 5px; | |
| margin-bottom: .6em; | |
| } | |
| .w3ls_footer_grid_left p { | |
| color: #9c9c9c; | |
| font-size: 16px; | |
| letter-spacing: 0.5px; | |
| } | |
| .w3ls_footer_grid_left p a { | |
| text-decoration: none; | |
| color: #EA3621; | |
| } | |
| .w3ls_footer_grid_left p a:hover { | |
| text-decoration: none; | |
| color: #fff; | |
| } | |
| .w3ls_footer_grid_left p span { | |
| color: #cecece; | |
| margin-right: 7px; | |
| } | |
| .footer-button { | |
| text-align: center; | |
| } | |
| .footer-button h2 { | |
| color: #b1acac; | |
| font-size: 18px; | |
| letter-spacing: 6px; | |
| margin-top: 2em; | |
| } | |
| .button-top-w3layouts { | |
| display: block; | |
| margin: 0 auto; | |
| margin-top: 2em; | |
| position: relative; | |
| } | |
| .button-top-w3layouts:before { | |
| content: ""; | |
| width: 45%; | |
| height: 4%; | |
| background: #bd062ae3; | |
| position: absolute; | |
| display: block; | |
| top: 22px; | |
| left: 0px; | |
| } | |
| .button-top-w3layouts:after { | |
| content: ""; | |
| width: 45%; | |
| height: 4%; | |
| background: #bd062ae3; | |
| position: absolute; | |
| display: block; | |
| top: 22px; | |
| right: 0px; | |
| } | |
| .button-top-w3layouts i { | |
| color: #fff; | |
| font-size: 38px; | |
| } | |
| .logo-icons-w3ls i.fa.fa-heart-o.heart2 { | |
| color: #ea3621; | |
| font-size: 48px; | |
| } | |
| .logo-icons-w3ls { | |
| position: relative; | |
| } | |
| .logo-icons-w3ls i.heart1 { | |
| position: absolute; | |
| left: 48%; | |
| transform: rotate(-22deg); | |
| top: 34%; | |
| font-size: 30px; | |
| } | |
| .w3ls_footer_grid { | |
| margin: 0 auto; | |
| text-align: center; | |
| } | |
| .botttom-nav-agileits { | |
| background: #000000; | |
| border-bottom: 2px solid #2e2e2e; | |
| padding: 3px 0px; | |
| } | |
| .botttom-nav-agileits ul { | |
| text-align: center; | |
| } | |
| .botttom-nav-agileits ul li { | |
| list-style: none; | |
| display: inline-block; | |
| margin: 10px 20px; | |
| } | |
| .botttom-nav-agileits ul li a { | |
| text-decoration: none; | |
| color: #fff; | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .botttom-nav-agileits ul li a:hover { | |
| color: #c32040; | |
| } | |
| /*-contact-page-*/ | |
| .contact-page-w3-agile { | |
| padding-bottom: 0em!important; | |
| } | |
| .contact-page-w3-agile iframe { | |
| outline: none; | |
| border: none; | |
| width: 100%; | |
| height: 350px; | |
| } | |
| .contact-page .form-bg-w3ls { | |
| width: 100%!important; | |
| } | |
| .contact-page .regstr-r-w3-agileits { | |
| padding: 0!important; | |
| } | |
| ul.resp-tabs-list { | |
| margin: 0 auto; | |
| width: 89%; | |
| } | |
| .resp-tab-content { | |
| padding: 2em 2em 0; | |
| } | |
| .resp-tab-content iframe { | |
| width: 100%; | |
| border: none; | |
| outline: none; | |
| margin-top: 1em; | |
| height: 200px; | |
| } | |
| .resp-tab-active, | |
| .resp-tabs-list li:hover, | |
| li.resp-tab-item.resp-tab-active { | |
| border-bottom: none; | |
| background: none; | |
| color: #fff; | |
| border-bottom: 2px solid #3d5ae8; | |
| } | |
| .resp-tabs-list li { | |
| color: #000; | |
| background: transparent; | |
| border: none; | |
| } | |
| .resp-tabs-container p i { | |
| color: #f70255; | |
| font-size: 1.4em; | |
| padding-right: 1em; | |
| } | |
| .resp-tabs-container p a { | |
| color: #000; | |
| letter-spacing: .5px; | |
| } | |
| .resp-tabs-container p a:hover { | |
| color: #3d5ae8; | |
| } | |
| .contact-agileits-w3layouts { | |
| margin-top: 2.5em; | |
| } | |
| p.para-agileits-w3layouts:nth-child(2) { | |
| padding: 1.5em 0; | |
| } | |
| /*-//contact-page-*/ | |
| .form-bg-w3ls input[type="text"], | |
| .form-bg-w3ls input[type="email"], | |
| .form-control, | |
| .form-bg-w3ls textarea { | |
| width: 100%!important; | |
| padding: 8px 10px!important; | |
| font-weight: normal; | |
| background: none; | |
| border-radius: 0; | |
| border: none; | |
| border-bottom: 2px solid #fff; | |
| color: #ffffff !important; | |
| outline: none; | |
| font-size: 1em; | |
| margin: 1em 0; | |
| transition: 0.5s all; | |
| -webkit-transition: 0.5s all; | |
| -o-transition: 0.5s all; | |
| -ms-transition: 0.5s all; | |
| -moz-transition: 0.5s all; | |
| } | |
| .form-bg-w3ls textarea { | |
| resize: none; | |
| } | |
| .form-control { | |
| box-shadow: none; | |
| } | |
| .form-control option { | |
| background: #000; | |
| } | |
| .form-control:hover, | |
| .form-control:focus { | |
| outline: none; | |
| box-shadow: none; | |
| border-bottom: 2px solid rgb(218, 202, 224); | |
| } | |
| .form-bg-w3ls input[type="submit"]:hover { | |
| background: #ffffff; | |
| color: #000; | |
| } | |
| .form-bg-w3ls input[type="submit"] { | |
| background: rgba(255, 255, 255, 0); | |
| color: #ffffff; | |
| font-size: 13px; | |
| text-transform: uppercase; | |
| margin: 0 auto; | |
| margin-top: 3em; | |
| border: 1px solid #fff; | |
| outline: none; | |
| letter-spacing: 1px; | |
| display: block; | |
| cursor: pointer; | |
| -webkit-appearance: none; | |
| padding: 10px 40px; | |
| font-family: 'Source Sans Pro', sans-serif; | |
| transition: .5s ease-in; | |
| -webkit-transition: .5s ease-in; | |
| -moz-transition: .5s ease-in; | |
| -o-transition: .5s ease-in; | |
| -ms-transition: .5s ease-in; | |
| } | |
| .form-bg-w3ls { | |
| padding: 3em 2em; | |
| width: 90%; | |
| margin: 2em auto 0; | |
| background: #bd062ae3; | |
| text-align: center; | |
| } | |
| .form-bg-w3ls h3 { | |
| font-size: 2em; | |
| letter-spacing: 2px; | |
| margin-bottom: 1em; | |
| color: #fff; | |
| } | |
| /*--placeholder-color--*/ | |
| ::-webkit-input-placeholder { | |
| color: #fff; | |
| } | |
| :-moz-placeholder { | |
| /* Firefox 18- */ | |
| color: #fff; | |
| } | |
| ::-moz-placeholder { | |
| /* Firefox 19+ */ | |
| color: #fff; | |
| } | |
| :-ms-input-placeholder { | |
| color: #fff; | |
| } | |
| /*--//placeholder-color--*/ | |
| /*-//contact-page-*/ | |
| .agileits-social ul { | |
| padding: 0; | |
| margin: 0; | |
| margin-top: 8px; | |
| } | |
| .agileits-social ul li { | |
| display: inline-block; | |
| } | |
| .agileits-social ul li a { | |
| color: #333; | |
| text-align: center; | |
| } | |
| .agileits-social ul li a i.fa.fa-facebook { | |
| height: 40px; | |
| width: 40px; | |
| background: #3b5998; | |
| line-height: 40px; | |
| color: #fff; | |
| border-radius: 50%; | |
| -webkit-border-radius: 50%; | |
| -moz-border-radius: 50%; | |
| -o-border-radius: 50%; | |
| -ms-border-radius: 50%; | |
| transition: 0.5s all; | |
| -webkit-transition: 0.5s all; | |
| -moz-transition: 0.5s all; | |
| -o-transition: 0.5s all; | |
| -ms-transition: 0.5s all; | |
| } | |
| .agileits-social ul li a i.fa.fa-facebook:hover { | |
| opacity: 0.8; | |
| } | |
| .agileits-social ul li a i.fa.fa-twitter { | |
| height: 40px; | |
| width: 40px; | |
| background: #1da1f2; | |
| line-height: 40px; | |
| color: #fff; | |
| border-radius: 50%; | |
| -webkit-border-radius: 50%; | |
| -moz-border-radius: 50%; | |
| -o-border-radius: 50%; | |
| -ms-border-radius: 50%; | |
| transition: 0.5s all; | |
| -webkit-transition: 0.5s all; | |
| -moz-transition: 0.5s all; | |
| -o-transition: 0.5s all; | |
| -ms-transition: 0.5s all; | |
| } | |
| .agileits-social ul li a i.fa.fa-twitter:hover { | |
| opacity: 0.8; | |
| } | |
| .agileits-social ul li a i.fa.fa-rss { | |
| height: 40px; | |
| width: 40px; | |
| background: #f26522; | |
| line-height: 40px; | |
| color: #fff; | |
| border-radius: 50%; | |
| -webkit-border-radius: 50%; | |
| -moz-border-radius: 50%; | |
| -o-border-radius: 50%; | |
| -ms-border-radius: 50%; | |
| transition: 0.5s all; | |
| -webkit-transition: 0.5s all; | |
| -moz-transition: 0.5s all; | |
| -o-transition: 0.5s all; | |
| -ms-transition: 0.5s all; | |
| } | |
| .agileits-social ul li a i.fa.fa-rss:hover { | |
| opacity: 0.8; | |
| } | |
| .agileits-social ul li a i.fa.fa-vk { | |
| height: 40px; | |
| width: 40px; | |
| background: #45668e; | |
| line-height: 40px; | |
| color: #fff; | |
| border-radius: 50%; | |
| -webkit-border-radius: 50%; | |
| -moz-border-radius: 50%; | |
| -o-border-radius: 50%; | |
| -ms-border-radius: 50%; | |
| transition: 0.5s all; | |
| -webkit-transition: 0.5s all; | |
| -moz-transition: 0.5s all; | |
| -o-transition: 0.5s all; | |
| -ms-transition: 0.5s all; | |
| } | |
| .agileits-social ul li a i.fa.fa-vk:hover { | |
| opacity: 0.8; | |
| } | |
| .agileits-social ul li:nth-child(2) { | |
| margin: 0 .5em; | |
| } | |
| .agileits-social ul li:nth-child(3) { | |
| margin: 0 .5em 0 0; | |
| } | |
| .agileits-social { | |
| padding: 2em 0; | |
| } | |
| /*-- subscribe --*/ | |
| .subscribe { | |
| background: #c32040; | |
| padding: 2em 0; | |
| } | |
| .subscribe h3.heading { | |
| color: #ffffff; | |
| } | |
| .subscribe h3.heading { | |
| color: #ffffff; | |
| text-align: center; | |
| } | |
| .subscribe h3.heading { | |
| color: #ffffff; | |
| text-align: center; | |
| font-family: 'Dancing Script', cursive; | |
| font-size: 3em; | |
| } | |
| .agile-subscribe-heading { | |
| text-align: center; | |
| } | |
| .subscribe-grid { | |
| text-align: center; | |
| width: 75%; | |
| margin: 2em auto 0; | |
| } | |
| .subscribe-grid input[type="email"] { | |
| display: inline-block; | |
| background: #FFFFFF; | |
| border: solid 1px #fff; | |
| width: 60%; | |
| outline: none; | |
| padding: .7em; | |
| font-size: 1.2em; | |
| color: #999999; | |
| } | |
| .subscribe-grid i.fa.fa-paper-plane-o { | |
| color: #FFFFFF !important; | |
| font-size: 1.2em !important; | |
| } | |
| .subscribe-grid button.btn1 { | |
| color: #ffffff; | |
| font-size: 1.2em; | |
| border: solid 1px #efb312; | |
| width: 70px; | |
| padding: .7em; | |
| text-align: center; | |
| text-decoration: none; | |
| background: #efb312; | |
| transition: 0.5s all; | |
| -webkit-transition: 0.5s all; | |
| -moz-transition: 0.5s all; | |
| -o-transition: 0.5s all; | |
| -ms-transition: 0.5s all; | |
| } | |
| button.btn1:hover { | |
| background: #fff; | |
| border: 1px solid #fff; | |
| } | |
| button.btn1:hover i.fa.fa-paper-plane-o { | |
| color: #efb312 !important; | |
| } | |
| /*-- //subscribe --*/ | |
| /*--copy-right--*/ | |
| .footer-w3layouts { | |
| padding: 1em 0; | |
| background: #000; | |
| } | |
| .footer-w3layouts p { | |
| padding: 1em 0; | |
| text-align: center; | |
| color: #fff; | |
| margin: 0; | |
| letter-spacing: 2px; | |
| font-size: 15px; | |
| } | |
| .footer-w3layouts p a { | |
| text-decoration: none; | |
| color: #EA3621; | |
| } | |
| .footer-w3layouts p a:hover { | |
| text-decoration: none; | |
| color: #0099e5; | |
| } | |
| .agileits-social { | |
| float: right; | |
| } | |
| .agileits-social ul { | |
| padding: 0; | |
| margin: 0; | |
| margin-top: 8px; | |
| } | |
| .agileits-social ul li { | |
| display: inline-block; | |
| } | |
| .agileits-social ul li a { | |
| color: #333; | |
| text-align: center; | |
| } | |
| .agileits-social ul li a i.fa.fa-facebook { | |
| height: 40px; | |
| width: 40px; | |
| background: #3b5998; | |
| line-height: 40px; | |
| color: #fff; | |
| border-radius: 50%; | |
| -webkit-border-radius: 50%; | |
| -moz-border-radius: 50%; | |
| -o-border-radius: 50%; | |
| -ms-border-radius: 50%; | |
| transition: 0.5s all; | |
| -webkit-transition: 0.5s all; | |
| -moz-transition: 0.5s all; | |
| -o-transition: 0.5s all; | |
| -ms-transition: 0.5s all; | |
| } | |
| .agileits-social ul li a i.fa.fa-facebook:hover { | |
| opacity: 0.8; | |
| } | |
| .agileits-social ul li a i.fa.fa-twitter { | |
| height: 40px; | |
| width: 40px; | |
| background: #1da1f2; | |
| line-height: 40px; | |
| color: #fff; | |
| border-radius: 50%; | |
| -webkit-border-radius: 50%; | |
| -moz-border-radius: 50%; | |
| -o-border-radius: 50%; | |
| -ms-border-radius: 50%; | |
| transition: 0.5s all; | |
| -webkit-transition: 0.5s all; | |
| -moz-transition: 0.5s all; | |
| -o-transition: 0.5s all; | |
| -ms-transition: 0.5s all; | |
| } | |
| .agileits-social ul li a i.fa.fa-twitter:hover { | |
| opacity: 0.8; | |
| } | |
| .agileits-social ul li a i.fa.fa-rss { | |
| height: 40px; | |
| width: 40px; | |
| background: #f26522; | |
| line-height: 40px; | |
| color: #fff; | |
| border-radius: 50%; | |
| -webkit-border-radius: 50%; | |
| -moz-border-radius: 50%; | |
| -o-border-radius: 50%; | |
| -ms-border-radius: 50%; | |
| transition: 0.5s all; | |
| -webkit-transition: 0.5s all; | |
| -moz-transition: 0.5s all; | |
| -o-transition: 0.5s all; | |
| -ms-transition: 0.5s all; | |
| } | |
| .agileits-social ul li a i.fa.fa-rss:hover { | |
| opacity: 0.8; | |
| } | |
| .agileits-social ul li a i.fa.fa-vk { | |
| height: 40px; | |
| width: 40px; | |
| background: #45668e; | |
| line-height: 40px; | |
| color: #fff; | |
| border-radius: 50%; | |
| -webkit-border-radius: 50%; | |
| -moz-border-radius: 50%; | |
| -o-border-radius: 50%; | |
| -ms-border-radius: 50%; | |
| transition: 0.5s all; | |
| -webkit-transition: 0.5s all; | |
| -moz-transition: 0.5s all; | |
| -o-transition: 0.5s all; | |
| -ms-transition: 0.5s all; | |
| } | |
| .agileits-social ul li a i.fa.fa-vk:hover { | |
| opacity: 0.8; | |
| } | |
| .agileits-social ul li:nth-child(2) { | |
| margin: 0 .5em; | |
| } | |
| .agileits-social ul li:nth-child(3) { | |
| margin: 0 .5em 0 0; | |
| } | |
| .agile-copy { | |
| float: none; | |
| } | |
| /*--//copy-right--*/ | |
| /*--//footer--*/ | |
| /*-- to-top --*/ | |
| #toTop { | |
| display: none; | |
| text-decoration: none; | |
| position: fixed; | |
| bottom: 20px; | |
| right: 2%; | |
| overflow: hidden; | |
| z-index: 999; | |
| width: 40px; | |
| height: 40px; | |
| border: none; | |
| text-indent: 100%; | |
| background: url(../images/top.png) no-repeat 0px 0px; | |
| } | |
| #toTopHover { | |
| width: 40px; | |
| height: 40px; | |
| display: block; | |
| overflow: hidden; | |
| float: right; | |
| opacity: 0; | |
| -moz-opacity: 0; | |
| filter: alpha(opacity=0); | |
| } | |
| /*-- //to-top --*/ | |
| /*-- /responsive design --*/ | |
| @media(max-width:1440px) {} | |
| @media(max-width:1366px) {} | |
| @media(max-width:1280px) {} | |
| @media(max-width:1080px) { | |
| .grid figure figcaption { | |
| padding: 1.5em; | |
| } | |
| .wthree_text { | |
| text-align: center; | |
| padding: 6em 0 0; | |
| } | |
| } | |
| @media(max-width:1024px) {} | |
| @media(max-width:991px) { | |
| .message h2 { | |
| font-size: 50px; | |
| } | |
| .ab-left { | |
| width: 80%; | |
| margin: 0 auto; | |
| float: none; | |
| } | |
| .ab-text { | |
| margin: 2em 0; | |
| width: 100%; | |
| } | |
| .w3-agileits-services-grid { | |
| padding: 2em; | |
| } | |
| .w3-agileits-services-grid { | |
| width: 33.33%; | |
| float: left; | |
| } | |
| .w3-agileits-services-grid { | |
| width: 50%; | |
| float: left; | |
| } | |
| .agile-news-left { | |
| width: 50%; | |
| float: left; | |
| margin-bottom: 2em; | |
| } | |
| .wthree_text { | |
| padding: 5em 0 0; | |
| } | |
| .contact-agileits-w3layouts { | |
| width: 80%; | |
| margin: 0 auto; | |
| } | |
| .regstr-r-w3-agileits { | |
| width: 80%; | |
| margin: 0 auto; | |
| } | |
| .w3ls_footer_grid_left { | |
| width: 80%; | |
| float: none; | |
| margin: 0 auto 2em; | |
| } | |
| .w3-agileits-services-grid:nth-child(1), | |
| .w3-agileits-services-grid:nth-child(2), | |
| .w3-agileits-services-grid:nth-child(3) { | |
| border-bottom: 0px ridge #ececec; | |
| } | |
| .agile-services1, | |
| .agile-services2 { | |
| border-left: 0px ridge #ececec; | |
| border-right: 0px ridge #ececec; | |
| } | |
| } | |
| @media(max-width:800px) { | |
| .wthree_text h3 { | |
| font-size: 1.5em; | |
| text-transform: uppercase; | |
| } | |
| .wthree_text { | |
| padding: 4em 0 0; | |
| } | |
| } | |
| @media(max-width:768px) { | |
| .frame img { | |
| height: 525px; | |
| } | |
| } | |
| @media(max-width:736px) { | |
| .wthree_text { | |
| padding: 5em 0 0; | |
| } | |
| } | |
| @media(max-width:667px) { | |
| .window { | |
| width: 200px; | |
| height: 200px; | |
| } | |
| .grid figure figcaption { | |
| font-size: 1em; | |
| } | |
| .w3ls-banner-top { | |
| height: 625px; | |
| } | |
| .frame img { | |
| width: 100%; | |
| } | |
| } | |
| @media(max-width:640px) { | |
| .wthree_text h3 { | |
| font-size: 1.2em; | |
| text-transform: uppercase; | |
| } | |
| .modal-dialog4 { | |
| width: 536px; | |
| margin: 40px auto; | |
| } | |
| .w3_agileits_main_grid_left_r { | |
| margin-left: 8em; | |
| } | |
| .agileinfo_radio_button { | |
| float: none; | |
| margin-bottom: 2em; | |
| margin-left: 0; | |
| } | |
| .wthree-text { | |
| margin: 2em 0 0 0; | |
| } | |
| .wthree_text { | |
| padding: 3.5em 0 0; | |
| } | |
| } | |
| @media(max-width:600px) { | |
| .fir { | |
| left: 0px; | |
| } | |
| figure.effect-jazz p { | |
| font-size: 1em; | |
| line-height: 1.5em; | |
| } | |
| .modal-dialog4 { | |
| width: 460px; | |
| } | |
| .wthree_text h3 { | |
| font-size: 1.5em; | |
| } | |
| .wthree_text { | |
| padding: 6em 0 0; | |
| } | |
| .footer-button h2 { | |
| letter-spacing: 4px; | |
| } | |
| .w3-agileits-services-grid h4 { | |
| font-size: 1.4em; | |
| } | |
| } | |
| @media(max-width:568px) { | |
| .window { | |
| width: 177px; | |
| height: 217px; | |
| } | |
| } | |
| @media(max-width:480px) { | |
| .ab-left { | |
| width: 100%; | |
| margin: 0 auto; | |
| float: none; | |
| } | |
| .w3-agileits-services-grid { | |
| width: 80%; | |
| float: none; | |
| margin: 0 auto; | |
| } | |
| .w3-head-all h3 { | |
| font-size: 3em; | |
| margin-bottom: 25px; | |
| } | |
| .w3-agileits-services-grid:nth-child(1), | |
| .w3-agileits-services-grid:nth-child(2), | |
| .w3-agileits-services-grid:nth-child(3) { | |
| border-bottom: 0px ridge #ececec; | |
| } | |
| .agile-services1, | |
| .agile-services2 { | |
| border-left: 0px ridge #ececec; | |
| border-right: 0px ridge #ececec; | |
| } | |
| .agile-news-left { | |
| width: 100%; | |
| float: none; | |
| margin-bottom: 2em; | |
| } | |
| .subscribe h3.heading { | |
| font-size: 2.5em; | |
| } | |
| .modal-dialog4 { | |
| width: 401px; | |
| } | |
| .wthree_text { | |
| padding: 2.5em 0 0; | |
| } | |
| .wthree_text h3 { | |
| font-size: 1.2em; | |
| } | |
| } | |
| @media(max-width:414px) { | |
| .fir { | |
| top: 58%; | |
| } | |
| .regstr-r-w3-agileits { | |
| width: 100%; | |
| } | |
| .contact-agileits-w3layouts { | |
| width: 100%; | |
| } | |
| .subscribe h3.heading { | |
| font-size: 2.5em; | |
| } | |
| .subscribe-grid input[type="email"] { | |
| width: 73%; | |
| } | |
| .footer-button h2 { | |
| font-size: 18px; | |
| letter-spacing: 2px; | |
| margin-top: 1em; | |
| } | |
| .modal-dialog4 { | |
| width: 330px; | |
| } | |
| .wthreesubmitaits { | |
| width: 80%; | |
| } | |
| .w3ls_footer_grid_left { | |
| width: 96%; | |
| float: none; | |
| margin: 0 auto 2em; | |
| } | |
| .w3-agileits-services-grid { | |
| width: 95%; | |
| } | |
| } | |
| @media(max-width:384px) { | |
| .h-f { | |
| width: 100%; | |
| float: none; | |
| } | |
| .botttom-nav-agileits ul li { | |
| margin: 10px 10px; | |
| } | |
| .form-bg-w3ls h3 { | |
| font-size: 1.5em; | |
| } | |
| } | |
| @media(max-width:375px) {} | |
| @media(max-width:320px) { | |
| .w3-agileits-services-grid { | |
| width: 100%; | |
| float: none; | |
| margin: 0 auto; | |
| } | |
| .wthree_text { | |
| padding: 7em 0 0; | |
| } | |
| .form-bg-w3ls { | |
| width: 100%; | |
| } | |
| .form-bg-w3ls h3 { | |
| font-size: 1.5EM; | |
| } | |
| .modal-dialog4 { | |
| width: 278px; | |
| } | |
| .wthreesubmitaits { | |
| width: 100%; | |
| } | |
| .wthree_text { | |
| padding: 7em 0 0; | |
| } | |
| } | |
| ::selection { | |
| background: rgba(255, 255, 0, 0.5); | |
| } | |
| .window { | |
| width: 340px; | |
| height: 340px; | |
| background: #a0d5d3; | |
| position: absolute; | |
| top: 11%; | |
| left: 68%; | |
| border-radius: 50%; | |
| margin-top: -60px; | |
| -webkit-transform: translate(-50%, -50%); | |
| -moz-transform: translate(-50%, -50%); | |
| -ms-transform: translate(-50%, -50%); | |
| -o-transform: translate(-50%, -50%); | |
| transform: translate(-50%, -50%); | |
| border: 10px solid #f8e7dc; | |
| overflow: hidden; | |
| } | |
| .santa { | |
| position: absolute; | |
| left: 50%; | |
| bottom: 0; | |
| -webkit-transform: translateX(-50%); | |
| -moz-transform: translateX(-50%); | |
| -ms-transform: translateX(-50%); | |
| -o-transform: translateX(-50%); | |
| transform: translateX(-50%); | |
| } | |
| .santa .body { | |
| width: 190px; | |
| height: 210px; | |
| background: #de2f32; | |
| position: relative; | |
| border-radius: 50%; | |
| top: 0; | |
| -webkit-animation: bodyLaugh 4s linear infinite; | |
| -moz-animation: bodyLaugh 4s linear infinite; | |
| -ms-animation: bodyLaugh 4s linear infinite; | |
| -o-animation: bodyLaugh 4s linear infinite; | |
| animation: bodyLaugh 4s linear infinite; | |
| -webkit-transform: translateY(50%); | |
| -moz-transform: translateY(50%); | |
| -ms-transform: translateY(50%); | |
| -o-transform: translateY(50%); | |
| transform: translateY(50%); | |
| } | |
| .santa .body:before { | |
| content: " "; | |
| width: 7px; | |
| height: 7px; | |
| background: #f7be10; | |
| border-radius: 50%; | |
| position: absolute; | |
| top: 35%; | |
| left: 50%; | |
| -webkit-transform: translate(-50%, -50%); | |
| -moz-transform: translate(-50%, -50%); | |
| -ms-transform: translate(-50%, -50%); | |
| -o-transform: translate(-50%, -50%); | |
| transform: translate(-50%, -50%); | |
| box-shadow: 0px -18px 0px #f7be10, 0px 18px 0px #f7be10; | |
| } | |
| .santa .head { | |
| z-index: 2; | |
| position: absolute; | |
| bottom: 90px; | |
| left: 50%; | |
| -webkit-animation: headLaugh 4s linear infinite; | |
| -moz-animation: headLaugh 4s linear infinite; | |
| -ms-animation: headLaugh 4s linear infinite; | |
| -o-animation: headLaugh 4s linear infinite; | |
| animation: headLaugh 4s linear infinite; | |
| -webkit-transform: translateX(-50%); | |
| -moz-transform: translateX(-50%); | |
| -ms-transform: translateX(-50%); | |
| -o-transform: translateX(-50%); | |
| transform: translateX(-50%); | |
| } | |
| .santa .head .face { | |
| width: 120px; | |
| height: 130px; | |
| background: #edcab0; | |
| background: radial-gradient(#edcab0, #e9a982); | |
| border-radius: 50%; | |
| border: 3px solid #f8e7dc; | |
| } | |
| .santa .head .face .redhat .whitepart { | |
| position: absolute; | |
| left: 50%; | |
| top: 0; | |
| -webkit-transform: translateX(-50%); | |
| -moz-transform: translateX(-50%); | |
| -ms-transform: translateX(-50%); | |
| -o-transform: translateX(-50%); | |
| transform: translateX(-50%); | |
| width: 90%; | |
| height: 32px; | |
| background: #f8e7dc; | |
| border-radius: 50px; | |
| z-index: 4; | |
| box-shadow: 0px 6px 0px -4px rgba(0, 0, 0, 0.1); | |
| } | |
| .santa .head .face .redhat .redpart { | |
| width: 120px; | |
| height: 120px; | |
| background: #de2f32; | |
| position: absolute; | |
| top: -50px; | |
| left: 15px; | |
| border-radius: 50%; | |
| z-index: -1; | |
| } | |
| .santa .head .face .redhat .redpart:before { | |
| content: " "; | |
| width: 95px; | |
| height: 95px; | |
| position: absolute; | |
| left: 0; | |
| top: 12px; | |
| border-radius: 50%; | |
| box-shadow: inset -8px -1px 0px -5px rgba(0, 0, 0, 0.05); | |
| } | |
| .santa .head .face .redhat .redpart:after { | |
| content: " "; | |
| position: absolute; | |
| right: 0; | |
| top: 60px; | |
| background: #de2f32; | |
| width: 20px; | |
| height: 50px; | |
| } | |
| .santa .head .face .redhat .hatball { | |
| width: 38px; | |
| height: 38px; | |
| background: #f8e7dc; | |
| border-radius: 50%; | |
| z-index: 5; | |
| position: absolute; | |
| right: -20px; | |
| top: 40px; | |
| box-shadow: 0px 6px 0px -4px rgba(0, 0, 0, 0.1); | |
| } | |
| .santa .head .face .eyes { | |
| position: absolute; | |
| left: 50%; | |
| -webkit-transform: translateX(-50%); | |
| -moz-transform: translateX(-50%); | |
| -ms-transform: translateX(-50%); | |
| -o-transform: translateX(-50%); | |
| transform: translateX(-50%); | |
| top: 57px; | |
| } | |
| .santa .head .face .eyes:before, | |
| .santa .head .face .eyes:after { | |
| content: " "; | |
| position: absolute; | |
| width: 15px; | |
| height: 9px; | |
| top: 0; | |
| border: 5px solid #a8744f; | |
| border-width: 0; | |
| border-top-width: 5px; | |
| border-radius: 50%; | |
| } | |
| .santa .head .face .eyes:before { | |
| left: -28px; | |
| } | |
| .santa .head .face .eyes:after { | |
| right: -28px; | |
| } | |
| .santa .head .face .beard { | |
| width: 55px; | |
| height: 55px; | |
| background: #f8e7dc; | |
| border-radius: 50%; | |
| position: absolute; | |
| bottom: -30px; | |
| left: 50%; | |
| -webkit-animation: beardLaugh 4s linear infinite; | |
| -moz-animation: beardLaugh 4s linear infinite; | |
| -ms-animation: beardLaugh 4s linear infinite; | |
| -o-animation: beardLaugh 4s linear infinite; | |
| animation: beardLaugh 4s linear infinite; | |
| -webkit-transform: translateX(-50%); | |
| -moz-transform: translateX(-50%); | |
| -ms-transform: translateX(-50%); | |
| -o-transform: translateX(-50%); | |
| transform: translateX(-50%); | |
| } | |
| .santa .head .face .beard:before, | |
| .santa .head .face .beard:after { | |
| content: " "; | |
| width: 80px; | |
| height: 80px; | |
| background: #f8e7dc; | |
| border-radius: 50%; | |
| position: absolute; | |
| bottom: 15px; | |
| } | |
| .santa .head .face .beard:before { | |
| left: -40px; | |
| } | |
| .santa .head .face .beard:after { | |
| right: -40px; | |
| } | |
| .santa .head .face .beard .nouse { | |
| width: 25px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #edcab0; | |
| position: absolute; | |
| z-index: 3; | |
| box-shadow: inset -3px -3px 0px #e9a982; | |
| left: 50%; | |
| -webkit-transform: translateX(-50%); | |
| -moz-transform: translateX(-50%); | |
| -ms-transform: translateX(-50%); | |
| -o-transform: translateX(-50%); | |
| transform: translateX(-50%); | |
| top: -42px; | |
| } | |
| .santa .head .face .beard .mouth { | |
| background: #a8744f; | |
| z-index: 3; | |
| position: absolute; | |
| width: 15px; | |
| height: 5px; | |
| border-bottom-right-radius: 80px 50px; | |
| border-bottom-left-radius: 80px 50px; | |
| left: 50%; | |
| top: 0; | |
| -webkit-animation: mouthLaugh 4s linear infinite; | |
| -moz-animation: mouthLaugh 4s linear infinite; | |
| -ms-animation: mouthLaugh 4s linear infinite; | |
| -o-animation: mouthLaugh 4s linear infinite; | |
| animation: mouthLaugh 4s linear infinite; | |
| -webkit-transform: translateX(-50%); | |
| -moz-transform: translateX(-50%); | |
| -ms-transform: translateX(-50%); | |
| -o-transform: translateX(-50%); | |
| transform: translateX(-50%); | |
| } | |
| .santa .head .ears:before, | |
| .santa .head .ears:after { | |
| content: " "; | |
| width: 20px; | |
| height: 30px; | |
| border-radius: 50%; | |
| background: radial-gradient(#e9a982, #edcab0); | |
| position: absolute; | |
| top: 50%; | |
| z-index: -1; | |
| } | |
| .santa .head .ears:before { | |
| left: -8px; | |
| -webkit-transform: rotate(-10deg); | |
| -moz-transform: rotate(-10deg); | |
| -ms-transform: rotate(-10deg); | |
| -o-transform: rotate(-10deg); | |
| transform: rotate(-10deg); | |
| } | |
| .santa .head .ears:after { | |
| right: -8px; | |
| -webkit-transform: rotate(10deg); | |
| -moz-transform: rotate(10deg); | |
| -ms-transform: rotate(10deg); | |
| -o-transform: rotate(10deg); | |
| transform: rotate(10deg); | |
| } | |
| @font-face { | |
| font-family: 'Mountains of Christmas'; | |
| font-style: normal; | |
| src: local("Mountains of Christmas"), local("MountainsofChristmas-Regular"), url(https://fonts.gstatic.com/s/mountainsofchristmas/v8/dVGBFPwd6G44IWDbQtPewylJhLDHyIrT3I5b5eGTHmw.woff2) format("woff2"); | |
| } | |
| .message { | |
| position: absolute; | |
| left: 46%; | |
| top: 0%; | |
| margin-top: 50px; | |
| -webkit-transform: translateX(-50%); | |
| -moz-transform: translateX(-50%); | |
| -ms-transform: translateX(-50%); | |
| -o-transform: translateX(-50%); | |
| transform: translateX(-50%); | |
| color: #f8e7dc; | |
| font-family: 'Mountains of Christmas'; | |
| } | |
| .message h1 { | |
| font-style: normal; | |
| font-size: 75px; | |
| margin-bottom: 0; | |
| white-space: nowrap; | |
| } | |
| .message h2 { | |
| margin: 0; | |
| text-align: center; | |
| white-space: nowrap; | |
| } | |
| .message h2 a { | |
| color: #f7be10; | |
| opacity: 0.8; | |
| } | |
| .message h2 a:hover { | |
| opacity: 1; | |
| } | |
| @-webkit-keyframes bodyLaugh { | |
| 0% { | |
| top: 0px; | |
| } | |
| 2% { | |
| top: -3px; | |
| } | |
| 4% { | |
| top: 0px; | |
| } | |
| 8% { | |
| top: -3px; | |
| } | |
| 10% { | |
| top: 0px; | |
| } | |
| 12% { | |
| top: -3px; | |
| } | |
| 14% { | |
| top: 0px; | |
| } | |
| 18% { | |
| top: -3px; | |
| } | |
| 20% { | |
| top: 0px; | |
| } | |
| 22% { | |
| top: -3px; | |
| } | |
| 24% { | |
| top: 0px; | |
| } | |
| 28% { | |
| top: -3px; | |
| } | |
| 30% { | |
| top: 0px; | |
| } | |
| 100% { | |
| top: 0px; | |
| } | |
| } | |
| @-moz-keyframes bodyLaugh { | |
| 0% { | |
| top: 0px; | |
| } | |
| 2% { | |
| top: -3px; | |
| } | |
| 4% { | |
| top: 0px; | |
| } | |
| 8% { | |
| top: -3px; | |
| } | |
| 10% { | |
| top: 0px; | |
| } | |
| 12% { | |
| top: -3px; | |
| } | |
| 14% { | |
| top: 0px; | |
| } | |
| 18% { | |
| top: -3px; | |
| } | |
| 20% { | |
| top: 0px; | |
| } | |
| 22% { | |
| top: -3px; | |
| } | |
| 24% { | |
| top: 0px; | |
| } | |
| 28% { | |
| top: -3px; | |
| } | |
| 30% { | |
| top: 0px; | |
| } | |
| 100% { | |
| top: 0px; | |
| } | |
| } | |
| @-ms-keyframes bodyLaugh { | |
| 0% { | |
| top: 0px; | |
| } | |
| 2% { | |
| top: -3px; | |
| } | |
| 4% { | |
| top: 0px; | |
| } | |
| 8% { | |
| top: -3px; | |
| } | |
| 10% { | |
| top: 0px; | |
| } | |
| 12% { | |
| top: -3px; | |
| } | |
| 14% { | |
| top: 0px; | |
| } | |
| 18% { | |
| top: -3px; | |
| } | |
| 20% { | |
| top: 0px; | |
| } | |
| 22% { | |
| top: -3px; | |
| } | |
| 24% { | |
| top: 0px; | |
| } | |
| 28% { | |
| top: -3px; | |
| } | |
| 30% { | |
| top: 0px; | |
| } | |
| 100% { | |
| top: 0px; | |
| } | |
| } | |
| @keyframes bodyLaugh { | |
| 0% { | |
| top: 0px; | |
| } | |
| 2% { | |
| top: -3px; | |
| } | |
| 4% { | |
| top: 0px; | |
| } | |
| 8% { | |
| top: -3px; | |
| } | |
| 10% { | |
| top: 0px; | |
| } | |
| 12% { | |
| top: -3px; | |
| } | |
| 14% { | |
| top: 0px; | |
| } | |
| 18% { | |
| top: -3px; | |
| } | |
| 20% { | |
| top: 0px; | |
| } | |
| 22% { | |
| top: -3px; | |
| } | |
| 24% { | |
| top: 0px; | |
| } | |
| 28% { | |
| top: -3px; | |
| } | |
| 30% { | |
| top: 0px; | |
| } | |
| 100% { | |
| top: 0px; | |
| } | |
| } | |
| @-webkit-keyframes beardLaugh { | |
| 0% { | |
| bottom: -28px; | |
| } | |
| 2% { | |
| bottom: -30px; | |
| } | |
| 4% { | |
| bottom: -28px; | |
| } | |
| 8% { | |
| bottom: -30px; | |
| } | |
| 10% { | |
| bottom: -28px; | |
| } | |
| 12% { | |
| bottom: -30px; | |
| } | |
| 14% { | |
| bottom: -28px; | |
| } | |
| 18% { | |
| bottom: -30px; | |
| } | |
| 20% { | |
| bottom: -28px; | |
| } | |
| 22% { | |
| bottom: -30px; | |
| } | |
| 24% { | |
| bottom: -28px; | |
| } | |
| 28% { | |
| bottom: -30px; | |
| } | |
| 30% { | |
| bottom: -28px; | |
| } | |
| 100% { | |
| bottom: -28px; | |
| } | |
| } | |
| @-moz-keyframes beardLaugh { | |
| 0% { | |
| bottom: -28px; | |
| } | |
| 2% { | |
| bottom: -30px; | |
| } | |
| 4% { | |
| bottom: -28px; | |
| } | |
| 8% { | |
| bottom: -30px; | |
| } | |
| 10% { | |
| bottom: -28px; | |
| } | |
| 12% { | |
| bottom: -30px; | |
| } | |
| 14% { | |
| bottom: -28px; | |
| } | |
| 18% { | |
| bottom: -30px; | |
| } | |
| 20% { | |
| bottom: -28px; | |
| } | |
| 22% { | |
| bottom: -30px; | |
| } | |
| 24% { | |
| bottom: -28px; | |
| } | |
| 28% { | |
| bottom: -30px; | |
| } | |
| 30% { | |
| bottom: -28px; | |
| } | |
| 100% { | |
| bottom: -28px; | |
| } | |
| } | |
| @-ms-keyframes beardLaugh { | |
| 0% { | |
| bottom: -28px; | |
| } | |
| 2% { | |
| bottom: -30px; | |
| } | |
| 4% { | |
| bottom: -28px; | |
| } | |
| 8% { | |
| bottom: -30px; | |
| } | |
| 10% { | |
| bottom: -28px; | |
| } | |
| 12% { | |
| bottom: -30px; | |
| } | |
| 14% { | |
| bottom: -28px; | |
| } | |
| 18% { | |
| bottom: -30px; | |
| } | |
| 20% { | |
| bottom: -28px; | |
| } | |
| 22% { | |
| bottom: -30px; | |
| } | |
| 24% { | |
| bottom: -28px; | |
| } | |
| 28% { | |
| bottom: -30px; | |
| } | |
| 30% { | |
| bottom: -28px; | |
| } | |
| 100% { | |
| bottom: -28px; | |
| } | |
| } | |
| @keyframes beardLaugh { | |
| 0% { | |
| bottom: -28px; | |
| } | |
| 2% { | |
| bottom: -30px; | |
| } | |
| 4% { | |
| bottom: -28px; | |
| } | |
| 8% { | |
| bottom: -30px; | |
| } | |
| 10% { | |
| bottom: -28px; | |
| } | |
| 12% { | |
| bottom: -30px; | |
| } | |
| 14% { | |
| bottom: -28px; | |
| } | |
| 18% { | |
| bottom: -30px; | |
| } | |
| 20% { | |
| bottom: -28px; | |
| } | |
| 22% { | |
| bottom: -30px; | |
| } | |
| 24% { | |
| bottom: -28px; | |
| } | |
| 28% { | |
| bottom: -30px; | |
| } | |
| 30% { | |
| bottom: -28px; | |
| } | |
| 100% { | |
| bottom: -28px; | |
| } | |
| } | |
| @-webkit-keyframes headLaugh { | |
| 0% { | |
| bottom: 83px; | |
| } | |
| 45% { | |
| bottom: 83px; | |
| } | |
| 50% { | |
| bottom: 90px; | |
| } | |
| 92% { | |
| bottom: 90px; | |
| } | |
| 98% { | |
| bottom: 83px; | |
| } | |
| 100% { | |
| bottom: 83px; | |
| } | |
| } | |
| @-moz-keyframes headLaugh { | |
| 0% { | |
| bottom: 83px; | |
| } | |
| 45% { | |
| bottom: 83px; | |
| } | |
| 50% { | |
| bottom: 90px; | |
| } | |
| 92% { | |
| bottom: 90px; | |
| } | |
| 98% { | |
| bottom: 83px; | |
| } | |
| 100% { | |
| bottom: 83px; | |
| } | |
| } | |
| @-ms-keyframes headLaugh { | |
| 0% { | |
| bottom: 83px; | |
| } | |
| 45% { | |
| bottom: 83px; | |
| } | |
| 50% { | |
| bottom: 90px; | |
| } | |
| 92% { | |
| bottom: 90px; | |
| } | |
| 98% { | |
| bottom: 83px; | |
| } | |
| 100% { | |
| bottom: 83px; | |
| } | |
| } | |
| @keyframes headLaugh { | |
| 0% { | |
| bottom: 83px; | |
| } | |
| 45% { | |
| bottom: 83px; | |
| } | |
| 50% { | |
| bottom: 90px; | |
| } | |
| 92% { | |
| bottom: 90px; | |
| } | |
| 98% { | |
| bottom: 83px; | |
| } | |
| 100% { | |
| bottom: 83px; | |
| } | |
| } | |
| @-webkit-keyframes mouthLaugh { | |
| 0% { | |
| width: 20px; | |
| } | |
| 45% { | |
| width: 20px; | |
| } | |
| 50% { | |
| width: 15px; | |
| } | |
| 92% { | |
| width: 15px; | |
| } | |
| 98% { | |
| width: 20px; | |
| } | |
| 100% { | |
| width: 20px; | |
| } | |
| } | |
| @-moz-keyframes mouthLaugh { | |
| 0% { | |
| width: 20px; | |
| } | |
| 45% { | |
| width: 20px; | |
| } | |
| 50% { | |
| width: 15px; | |
| } | |
| 92% { | |
| width: 15px; | |
| } | |
| 98% { | |
| width: 20px; | |
| } | |
| 100% { | |
| width: 20px; | |
| } | |
| } | |
| @-ms-keyframes mouthLaugh { | |
| 0% { | |
| width: 20px; | |
| } | |
| 45% { | |
| width: 20px; | |
| } | |
| 50% { | |
| width: 15px; | |
| } | |
| 92% { | |
| width: 15px; | |
| } | |
| 98% { | |
| width: 20px; | |
| } | |
| 100% { | |
| width: 20px; | |
| } | |
| } | |
| @keyframes mouthLaugh { | |
| 0% { | |
| width: 20px; | |
| } | |
| 45% { | |
| width: 20px; | |
| } | |
| 50% { | |
| width: 15px; | |
| } | |
| 92% { | |
| width: 15px; | |
| } | |
| 98% { | |
| width: 20px; | |
| } | |
| 100% { | |
| width: 20px; | |
| } | |
| } | |
| /*-- /responsive design --*/ | |
| @media(max-width:1080px) { | |
| .window { | |
| width: 317px; | |
| height: 317px; | |
| } | |
| .message { | |
| left: 43%; | |
| } | |
| figure.effect-jazz h4 { | |
| padding-top: 17%; | |
| } | |
| .grid figure figcaption { | |
| padding: 1.5em; | |
| } | |
| @media(max-width:991px) { | |
| .window { | |
| width: 271px; | |
| height: 271px; | |
| } | |
| .message h1 { | |
| font-size: 50px; | |
| } | |
| } | |
| @media(max-width:800px) { | |
| .window { | |
| width: 236px; | |
| height: 236px; | |
| } | |
| } | |
| @media(max-width:736px) { | |
| .window { | |
| top: 23%; | |
| left: 66%; | |
| } | |
| @media(max-width:667px) { | |
| .window { | |
| width: 200px; | |
| height: 200px; | |
| } | |
| .grid figure figcaption { | |
| padding: 1em; | |
| } | |
| .message { | |
| left: 50%; | |
| top: 27%; | |
| } | |
| .window { | |
| top: 13%; | |
| left: 35%; | |
| } | |
| .message { | |
| left: 50%; | |
| top: 43%; | |
| } | |
| .window { | |
| top: 21%; | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| figure.effect-jazz h4 { | |
| padding-top: 6%; | |
| } | |
| figure.effect-jazz h4 { | |
| font-size: 1.5em; | |
| } | |
| figure.effect-jazz p { | |
| padding: 0em 1em; | |
| } | |
| } | |
| @media (max-width: 568px) { | |
| figure.effect-jazz h4 { | |
| font-size: 1.3em; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .message { | |
| left: 55%; | |
| top: 23%; | |
| } | |
| .window { | |
| top: 13%; | |
| left: 23%; | |
| } | |
| } | |
| @media (max-width: 414px) { | |
| figure.effect-jazz h4 { | |
| font-size: 1em; | |
| } | |
| .grid figure figcaption { | |
| padding: 1em; | |
| } | |
| figure.effect-jazz p { | |
| font-size: 0.9em; | |
| } | |
| .wthree_text { | |
| padding: 9em 0 0; | |
| } | |
| .ab-text h3 { | |
| font-size: 2.5em; | |
| } | |
| .w3-agile-team, | |
| .services, | |
| .about, | |
| .testimonials, | |
| .w3-fashion-sale, | |
| .portfolio, | |
| .news, | |
| .contact-w3l { | |
| padding: 1em; | |
| } | |
| .w3-head-portfolio h3 { | |
| font-size: 2.5em; | |
| } | |
| } | |
| @media (max-width: 384px) { | |
| .grid figure figcaption { | |
| padding: 9em 0 0 0; | |
| } | |
| figure.effect-jazz h4 { | |
| font-size: 1.5em; | |
| } | |
| .subscribe h3.heading { | |
| font-size: 2em; | |
| } | |
| .subscribe-grid input[type="email"] { | |
| width: 70%; | |
| } | |
| } | |
| @media (max-width: 375px) { | |
| .botttom-nav-agileits ul li { | |
| margin: 10px 10px; | |
| } | |
| .w3-agileits-services-grid h4 { | |
| font-size: 1.4em; | |
| } | |
| } | |
| @media (max-width: 320px) { | |
| .message h1 { | |
| font-size: 42px; | |
| } | |
| .message h2 { | |
| font-size: 42px; | |
| } | |
| .fir { | |
| top: 51%; | |
| } | |
| .grid figure figcaption { | |
| padding: 5em 0 0 0; | |
| } | |
| .window { | |
| top: 11%; | |
| left: 24%; | |
| } | |
| .subscribe-grid input[type="email"] { | |
| width: 100%; | |
| } | |
| .wthree_text { | |
| padding: 7em 0 0; | |
| } | |
| } | |
| @import url(https://fonts.googleapis.com/css?family=Berkshire+Swash); | |
| /* Vars */ | |
| $red: #ed0000; | |
| $red-light: #f77373; | |
| $yellow: #e7c400; | |
| $yellow-light: #fbeea3; | |
| /* Animations */ | |
| @keyframes hover { | |
| 0% { | |
| transform: translate3d(0, 0, 0); | |
| color: #b81313; | |
| } | |
| 50% { | |
| transform: translate3d(0, -.2em, 0); | |
| color: #db3e3e; | |
| } | |
| 100% { | |
| transform: translate3d(0, 0, 0); | |
| color: #b81313; | |
| } | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0px 0px .3em rgba(255, 255, 255, .8); | |
| } | |
| 50% { | |
| box-shadow: 0px 0px .3em rgba(255, 255, 255, .4); | |
| } | |
| 100% { | |
| box-shadow: 0px 0px .3em rgba(255, 255, 255, .8); | |
| } | |
| } | |
| /* Styles */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .headline { | |
| margin-bottom: .5em; | |
| color: #b81313; | |
| font-family: 'Berkshire Swash', cursive; | |
| font-weight: normal; | |
| text-align: center; | |
| text-shadow: 0 .05em .1em #fff; | |
| animation-name: hover; | |
| animation-iteration-count: infinite; | |
| animation-duration: 3.5s; | |
| } | |
| .fir { | |
| margin: 0 auto; | |
| width: 8em; | |
| } | |
| .fir__item { | |
| margin: 0 auto; | |
| width: 0; | |
| height: 0; | |
| border-left: 2.3em solid transparent; | |
| border-right: 2.3em solid transparent; | |
| border-bottom: 3em solid #16850c; | |
| &:nth-child(2) { | |
| margin-top: -1.3em; | |
| border-left-width: 3em; | |
| border-right-width: 3em; | |
| border-bottom-width: 4em; | |
| } | |
| &:nth-child(3) { | |
| margin-top: -1.7em; | |
| border-left-width: 4em; | |
| border-right-width: 4em; | |
| border-bottom-width: 5em; | |
| } | |
| } | |
| .fir__log { | |
| margin: 0 auto; | |
| width: 1.3em; | |
| height: 1.3em; | |
| background: #8c370f; | |
| background: linear-gradient(#8c370f, #5c240a); | |
| } | |
| .orbs { | |
| position: absolute; | |
| width: .6em; | |
| height: .6em; | |
| border-radius: 50%; | |
| box-shadow: 0px 0px .3em rgba(255, 255, 255, .8); | |
| animation-name: pulse; | |
| animation-iteration-count: infinite; | |
| animation-duration: 2.5s; | |
| &:before, | |
| &:after { | |
| content: ''; | |
| display: block; | |
| position: absolute; | |
| border-radius: 50%; | |
| box-shadow: 0px 0px .3em rgba(255, 255, 255, .8); | |
| animation-name: pulse; | |
| animation-iteration-count: infinite; | |
| animation-duration: 2.5s; | |
| } | |
| } | |
| .orbs-1 { | |
| top: 1.2em; | |
| left: 3.2em; | |
| background: $red; | |
| background: radial-gradient(circle, $red-light, $red); | |
| &:before { | |
| top: 2.4em; | |
| left: 1.5em; | |
| width: .6em; | |
| height: .6em; | |
| background: $red; | |
| background: radial-gradient(circle, $red-light, $red); | |
| } | |
| &:after { | |
| top: .7em; | |
| left: 1em; | |
| width: .8em; | |
| height: .8em; | |
| background: $yellow; | |
| background: radial-gradient(circle, $yellow-light, $yellow); | |
| } | |
| } | |
| .orbs-2 { | |
| top: 3.4em; | |
| left: 2.9em; | |
| background: $yellow; | |
| background: radial-gradient(circle, $yellow-light, $yellow); | |
| &:before { | |
| top: 2.4em; | |
| left: 1.5em; | |
| width: .6em; | |
| height: .6em; | |
| background: $yellow; | |
| background: radial-gradient(circle, $yellow-light, $yellow); | |
| } | |
| &:after { | |
| top: 1.2em; | |
| left: .5em; | |
| width: .8em; | |
| height: .8em; | |
| background: $red; | |
| background: radial-gradient(circle, $red-light, $red); | |
| } | |
| } | |
| .orbs-3 { | |
| top: 6.4em; | |
| left: 2.2em; | |
| background: $yellow; | |
| background: radial-gradient(circle, $yellow-light, $yellow); | |
| &:before { | |
| top: 1.4em; | |
| left: 3.5em; | |
| width: .6em; | |
| height: .6em; | |
| background: $yellow; | |
| background: radial-gradient(circle, $yellow-light, $yellow); | |
| } | |
| &:after { | |
| top: .9em; | |
| left: 1.4em; | |
| width: .8em; | |
| height: .8em; | |
| background: $red; | |
| background: radial-gradient(circle, $red-light, $red); | |
| } | |
| } | |
| .orbs-4 { | |
| top: 7.9em; | |
| left: 1.7em; | |
| background: $red; | |
| background: radial-gradient(circle, $red-light, $red); | |
| } | |
| @media(max-width:768px) { | |
| .fir { | |
| top: 24%; | |
| } | |
| } | |
| @media(max-width:736px) { | |
| .fir { | |
| top: 63%; | |
| } | |
| } | |
| @media(max-width:667px) { | |
| .fir { | |
| top: 106%; | |
| } | |
| } | |
| @media(max-width:414px) { | |
| .fir { | |
| top: 55%; | |
| } | |
| } | |
| @media(max-width:384px) { | |
| .fir { | |
| top: 56%; | |
| } | |
| } | |
| @media(max-width:320px) { | |
| .fir { | |
| top: 52%; | |
| } | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .wrapper { | |
| position: relative; | |
| width: 100%; | |
| max-width: 700px; | |
| height: 100%; | |
| overflow: hidden; | |
| margin: 0 auto; | |
| font-size: 0; | |
| } | |
| .wrapper img { | |
| width: 100%; | |
| } | |
| canvas { | |
| display: block; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| z-index: 80; | |
| } | |
| .back { | |
| position: absolute; | |
| z-index: 70; | |
| top: 0; | |
| left: 0; | |
| } | |
| .front { | |
| position: absolute; | |
| z-index: 99; | |
| top: 0; | |
| left: 0; | |
| } | |
| .cover { | |
| background: #333; | |
| height: 700px; | |
| width: 100%; | |
| } | |
| .sl-wrapper .sl-close, | |
| .sl-wrapper .sl-navigation button { | |
| height: 44px; | |
| line-height: 44px; | |
| font-family: Arial, Baskerville, monospace | |
| } | |
| body.hidden-scroll { | |
| overflow: hidden | |
| } | |
| .sl-overlay { | |
| position: fixed; | |
| left: 0; | |
| right: 0; | |
| top: 0; | |
| bottom: 0; | |
| background: #000; | |
| opacity: .7; | |
| display: none; | |
| z-index: 1006 | |
| } | |
| .sl-wrapper .sl-close, | |
| .sl-wrapper .sl-counter { | |
| top: 30px; | |
| display: none; | |
| color: #fff; | |
| position: fixed | |
| } | |
| .sl-wrapper { | |
| z-index: 1000 | |
| } | |
| .sl-wrapper button { | |
| border: 0; | |
| background: 0 0; | |
| font-size: 28px; | |
| padding: 0; | |
| cursor: pointer | |
| } | |
| .sl-wrapper button:hover { | |
| opacity: .7 | |
| } | |
| .sl-wrapper .sl-close { | |
| right: 30px; | |
| z-index: 1015; | |
| margin-top: -14px; | |
| margin-right: -14px; | |
| width: 44px; | |
| font-size: 3rem | |
| } | |
| .sl-wrapper .sl-counter { | |
| left: 30px; | |
| z-index: 1015; | |
| font-size: 1rem | |
| } | |
| .sl-wrapper .sl-navigation { | |
| width: 100%; | |
| display: none | |
| } | |
| .sl-wrapper .sl-navigation button { | |
| position: fixed; | |
| top: 50%; | |
| margin-top: -22px; | |
| width: 22px; | |
| text-align: center; | |
| display: block; | |
| z-index: 1015; | |
| color: #fff | |
| } | |
| .sl-wrapper .sl-navigation button.sl-next { | |
| right: 5px; | |
| font-size: 2rem | |
| } | |
| .sl-wrapper .sl-navigation button.sl-prev { | |
| left: 5px; | |
| font-size: 2rem | |
| } | |
| .sl-wrapper .sl-image { | |
| position: fixed; | |
| -ms-touch-action: none; | |
| touch-action: none; | |
| z-index: 10000 | |
| } | |
| .sl-wrapper .sl-image img { | |
| margin: 0; | |
| padding: 0; | |
| display: block; | |
| border: 0 | |
| } | |
| .sl-wrapper .sl-image iframe { | |
| background: #000; | |
| border: 0 | |
| } | |
| @media (min-width:35.5em) { | |
| .sl-wrapper .sl-navigation button { | |
| width: 44px | |
| } | |
| .sl-wrapper .sl-navigation button.sl-next { | |
| right: 10px; | |
| font-size: 3rem | |
| } | |
| .sl-wrapper .sl-navigation button.sl-prev { | |
| left: 10px; | |
| font-size: 3rem | |
| } | |
| .sl-wrapper .sl-image iframe, | |
| .sl-wrapper .sl-image img { | |
| border: 0 | |
| } | |
| } | |
| @media (min-width:50em) { | |
| .sl-wrapper .sl-navigation button { | |
| width: 44px | |
| } | |
| .sl-wrapper .sl-navigation button.sl-next { | |
| right: 20px; | |
| font-size: 3rem | |
| } | |
| .sl-wrapper .sl-navigation button.sl-prev { | |
| left: 20px; | |
| font-size: 3rem | |
| } | |
| .sl-wrapper .sl-image iframe, | |
| .sl-wrapper .sl-image img { | |
| border: 0 | |
| } | |
| } | |
| .sl-wrapper .sl-image .sl-caption { | |
| display: none; | |
| padding: 10px; | |
| color: #fff; | |
| background: #000; | |
| opacity: .8; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0 | |
| } | |
| .sl-wrapper .sl-image .sl-caption.pos-top { | |
| bottom: auto; | |
| top: 0 | |
| } | |
| .sl-wrapper .sl-image .sl-caption.pos-outside { | |
| bottom: auto | |
| } | |
| .sl-wrapper .sl-image .sl-download { | |
| display: none; | |
| position: absolute; | |
| bottom: 5px; | |
| right: 5px; | |
| color: #000; | |
| z-index: 1005 | |
| } | |
| .sl-spinner { | |
| display: none; | |
| border: 5px solid #333; | |
| border-radius: 40px; | |
| height: 40px; | |
| left: 50%; | |
| margin: -20px 0 0 -20px; | |
| opacity: 0; | |
| position: fixed; | |
| top: 50%; | |
| width: 40px; | |
| z-index: 1007; | |
| -webkit-animation: pulsate 1s ease-out infinite; | |
| -moz-animation: pulsate 1s ease-out infinite; | |
| -ms-animation: pulsate 1s ease-out infinite; | |
| -o-animation: pulsate 1s ease-out infinite; | |
| animation: pulsate 1s ease-out infinite | |
| } | |
| .sl-scrollbar-measure { | |
| position: absolute; | |
| top: -9999px; | |
| width: 50px; | |
| height: 50px; | |
| overflow: scroll | |
| } | |
| @-webkit-keyframes pulsate { | |
| 0% { | |
| transform: scale(.1); | |
| opacity: 0 | |
| } | |
| 50% { | |
| opacity: 1 | |
| } | |
| 100% { | |
| transform: scale(1.2); | |
| opacity: 0 | |
| } | |
| } | |
| @keyframes pulsate { | |
| 0% { | |
| transform: scale(.1); | |
| opacity: 0 | |
| } | |
| 50% { | |
| opacity: 1 | |
| } | |
| 100% { | |
| transform: scale(1.2); | |
| opacity: 0 | |
| } | |
| } | |
| @-moz-keyframes pulsate { | |
| 0% { | |
| transform: scale(.1); | |
| opacity: 0 | |
| } | |
| 50% { | |
| opacity: 1 | |
| } | |
| 100% { | |
| transform: scale(1.2); | |
| opacity: 0 | |
| } | |
| } | |
| @-o-keyframes pulsate { | |
| 0% { | |
| transform: scale(.1); | |
| opacity: 0 | |
| } | |
| 50% { | |
| opacity: 1 | |
| } | |
| 100% { | |
| transform: scale(1.2); | |
| opacity: 0 | |
| } | |
| } | |
| @-ms-keyframes pulsate { | |
| 0%, | |
| 100% { | |
| opacity: 0 | |
| } | |
| 0% { | |
| transform: scale(.1) | |
| } | |
| 50% { | |
| opacity: 1 | |
| } | |
| 100% { | |
| transform: scale(1.2) | |
| } | |
| } | |
| body { | |
| margin: 0px; | |
| padding: 0px; | |
| background: #f5f5f5; | |
| font-weight: 500; | |
| } | |
| ul.resp-tabs-list, | |
| p { | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| ul.resp-tabs-list { | |
| margin: 0 auto; | |
| width: 89%; | |
| } | |
| .resp-tabs-list li { | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| font-size: 12px; | |
| display: inline-block; | |
| padding: 10px 26px; | |
| margin: 0; | |
| list-style: none; | |
| cursor: pointer; | |
| float: left; | |
| color: #fff; | |
| background: #0c0d0d; | |
| letter-spacing: 1px; | |
| margin-right: 12px; | |
| transition: .5s ease-in; | |
| -webkit-transition: .5s ease-in; | |
| -moz-transition: .5s ease-in; | |
| -o-transition: .5s ease-in; | |
| -ms-transition: .5s ease-in; | |
| } | |
| ul.resp-tabs-list.inner-second li:nth-child(3) { | |
| margin-right: 12px!important; | |
| } | |
| ul.resp-tabs-list.inner-second li:nth-child(4) { | |
| margin-right: 0; | |
| } | |
| .resp-tabs-container { | |
| padding: 0px; | |
| background-color: #fff; | |
| clear: left; | |
| } | |
| h2.resp-accordion { | |
| cursor: pointer; | |
| padding: 5px; | |
| display: none; | |
| } | |
| .resp-tab-content { | |
| display: none; | |
| } | |
| .resp-tab-active { | |
| border-bottom: none; | |
| } | |
| .resp-tab-active, | |
| .resp-tabs-list li:hover, | |
| li.resp-tab-item.resp-tab-active { | |
| border-bottom: none; | |
| background: #bd062a; | |
| } | |
| .resp-content-active, | |
| .resp-accordion-active { | |
| display: block; | |
| } | |
| .resp-tab-content { | |
| border: none; | |
| border-top: transparent; | |
| } | |
| h2.resp-accordion { | |
| font-size: 14px; | |
| border: 1px solid #fff; | |
| border-top: 0px solid #fff; | |
| margin: 0px; | |
| padding: 10px 15px; | |
| color: #fff; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| background: #c32040; | |
| } | |
| h2.resp-tab-active { | |
| border-bottom: 0px solid #fff !important; | |
| margin-bottom: 0px !important; | |
| padding: 10px 15px !important; | |
| } | |
| h2.resp-tab-title:last-child { | |
| border-bottom: 12px solid #c1c1c1 !important; | |
| background: blue; | |
| } | |
| /*-----------Vertical tabs-----------*/ | |
| .resp-vtabs ul.resp-tabs-list { | |
| float: left; | |
| width: 30%; | |
| } | |
| ul.resp-tabs-list.inner-second { | |
| margin: 0 auto; | |
| width: 30%; | |
| } | |
| .resp-vtabs .resp-tabs-list li { | |
| display: block; | |
| padding: 15px 15px !important; | |
| margin: 0; | |
| cursor: pointer; | |
| float: none; | |
| } | |
| .resp-vtabs .resp-tabs-container { | |
| padding: 0px; | |
| background-color: #fff; | |
| border: 1px solid #c1c1c1; | |
| float: left; | |
| width: 68%; | |
| min-height: 250px; | |
| border-radius: 4px; | |
| clear: none; | |
| } | |
| .resp-vtabs .resp-tab-content { | |
| border: none; | |
| } | |
| .resp-vtabs li.resp-tab-active { | |
| border: 1px solid #c1c1c1; | |
| border-right: none; | |
| background-color: #fff; | |
| position: relative; | |
| z-index: 1; | |
| margin-right: -1px !important; | |
| padding: 14px 15px 15px 14px !important; | |
| } | |
| .resp-arrow { | |
| width: 0; | |
| height: 0; | |
| float: right; | |
| margin-top: 1px; | |
| border-left: 6px solid transparent; | |
| border-right: 6px solid transparent; | |
| border-top: 12px solid #ffffff; | |
| } | |
| h2.resp-tab-active span.resp-arrow { | |
| border: none; | |
| border-left: 6px solid transparent; | |
| border-right: 6px solid transparent; | |
| border-bottom: 12px solid #ffffff; | |
| } | |
| /*-----------Accordion styles-----------*/ | |
| h2.resp-tab-active { | |
| background: #ffffff !important; | |
| } | |
| .resp-easy-accordion h2.resp-accordion { | |
| display: block; | |
| } | |
| .resp-easy-accordion .resp-tab-content { | |
| border: 1px solid #c1c1c1; | |
| } | |
| .resp-easy-accordion .resp-tab-content:last-child { | |
| border-bottom: 1px solid #c1c1c1 !important; | |
| } | |
| .resp-jfit { | |
| width: 100%; | |
| margin: 0px; | |
| } | |
| .resp-tab-content-active { | |
| display: block; | |
| } | |
| h2.resp-accordion:first-child { | |
| border-top: 1px solid #c1c1c1 !important; | |
| } | |
| h2.resp-tab-active { | |
| background: #f70255!important; | |
| color: #fff; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| /*Here your can change the breakpoint to set the accordion, when screen resolution changed*/ | |
| @media only screen and (max-width: 768px) { | |
| ul.resp-tabs-list { | |
| display: none; | |
| } | |
| h2.resp-accordion { | |
| display: block; | |
| } | |
| .resp-vtabs .resp-tab-content { | |
| border: 1px solid #C1C1C1; | |
| } | |
| .resp-vtabs .resp-tabs-container { | |
| border: none; | |
| float: none; | |
| width: 100%; | |
| min-height: initial; | |
| clear: none; | |
| } | |
| .resp-accordion-closed { | |
| display: none !important; | |
| } | |
| .resp-vtabs .resp-tab-content:last-child { | |
| border-bottom: 1px solid #c1c1c1 !important; | |
| } | |
| } | |
| /*-- /responsive --*/ | |
| @media (max-width:1440px) { | |
| ul.resp-tabs-list { | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| ul.resp-tabs-list.inner-second { | |
| margin: 0 auto; | |
| width: 33%; | |
| } | |
| } | |
| @media (max-width:1366px) { | |
| ul.resp-tabs-list { | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| ul.resp-tabs-list.inner-second { | |
| margin: 0 auto; | |
| width: 36%; | |
| } | |
| } | |
| @media (max-width:1280px) { | |
| ul.resp-tabs-list { | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| ul.resp-tabs-list.inner-second { | |
| margin: 0 auto; | |
| width: 38%; | |
| } | |
| } | |
| @media (max-width:1080px) { | |
| ul.resp-tabs-list { | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| ul.resp-tabs-list.inner-second { | |
| margin: 0 auto; | |
| width: 46%; | |
| } | |
| } | |
| @media (max-width:1024px) { | |
| ul.resp-tabs-list { | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| ul.resp-tabs-list.inner-second { | |
| margin: 0 auto; | |
| width: 49%; | |
| } | |
| } | |
| @media (max-width:991px) { | |
| ul.resp-tabs-list { | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| } | |
| @media (max-width:800px) { | |
| ul.resp-tabs-list { | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| ul.resp-tabs-list.inner-second { | |
| margin: 0 auto; | |
| width: 62%; | |
| } | |
| } | |
| @media (max-width:768px) { | |
| ul.resp-tabs-list { | |
| margin: 0 auto; | |
| width: 50%; | |
| } | |
| } | |
| @media only screen and (max-width: 568px) {} | |
| @media only screen and (max-width: 384px) { | |
| h2.resp-tab-active span.resp-arrow { | |
| margin-top: 0; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment