diff --git a/css/main.css b/css/main.css index 4efd44c..2589b14 100644 --- a/css/main.css +++ b/css/main.css @@ -9,3 +9,1577 @@ #editor { height: 600px; } + +body { + background: linear-gradient(325deg, #dd5e89, #f7bb97) fixed; +} + +body,html{ + height: 100%; +} + +.content { + position: absolute; + display: inline; + top: 70%; + transform: translateY(-70%); + width: 98%; + margin-left: 1%; + margin-right: 1%; +} + +.leftbox{ + width: 60%; +} + +.rightbox{ + width: 33%; + float: right; +} + +/*!---------- 7. NAVIGATION ----------*/ + +.nav-container { + -webkit-backface-visibility: hidden; + max-width: 100%; +} + +nav { + background: #3d4c5a; + -webkit-backface-visibility: hidden; + max-width: 100%; +} + +nav ul { + margin-bottom: 0; +} + +.module { + display: inline-block; + padding: 0 32px; +} + +.module-group { + display: inline-block; +} + +.module.left, .module-group.left { + float: left; +} + +.module.right, .module-group.right { + float: right; +} + +nav .btn, .nav-bar .btn { + margin: 0; + height: auto; +} + +.nav-utility { + height: 45px; + line-height: 43px; + border-bottom: 1px solid #ccc; + overflow: hidden; +} + +.nav-utility i { + position: relative; + top: 1px; +} + +.nav-bar { + height: 64px; + max-height: 64px; + line-height: 60px; + border-bottom: 1px solid #3d4c5a; +} + +.nav-bar .module, .nav-bar .module-group { + height: 55px; +} + +.nav-bar a { + display: inline-block; + height: 55px; +} + +.nav-bar h2 { + color: #fff; + text-transform: uppercase; + font-size: 20px; + line-height: 60px; + font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif!important; + font-weight: 500; +} + +.logo { + max-height: 80%; +} + +.logo-light { + display: none; +} + +nav.nav-centered .logo { + max-height: 64px; + margin: 64px 0 40px 0; +} + +nav.bg-dark .logo-light { + display: inline; +} + +nav.bg-dark .logo-dark { + display: none; +} + +.has-dropdown { + padding-right: 18px; +} + +.has-dropdown:after { + position: absolute; + top: 0; + right: 0; + font-size: 11px; + content: "\e64b"; + font-family: 'themify'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; +} + +.menu { + width: 100%; + height: 55px; + font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +.menu.inline-block { + width: auto; +} + +.menu li a { + font-size: 11px; + text-transform: uppercase; + font-weight: 600; + letter-spacing: 1px; + color: #fff; + opacity: 0.5; + transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + max-width: 100%; + white-space: normal; +} + +.menu li a:hover { + opacity: 1 !important; + color: #f7bb97; +} + +.menu>li { + margin-right: 32px; + float: left; + position: relative; + transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + opacity: 1; +} + +.menu>li:last-child { + margin-right: 0; +} + +.menu>li:last-child>ul { + right: 0; +} + +.menu>li:last-child>ul ul { + left: auto; + right: 100%; +} + +.menu>li ul { + width: 200px; + padding: 8px 0; + background: #292929; + position: absolute; + z-index: 99; + opacity: 0; + transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + transform: translate3d(0, 10px, 0); + -webkit-transform: translate3d(0, 10px, 0); + -moz-transform: translate3d(0, 10px, 0); + visibility: hidden; + margin-top: -1px; +} + +.menu>li>ul>li { + position: relative; + line-height: 24px; + width: 100%; + vertical-align: top; +} + +.menu>li>ul>li i { + display: inline-block; + margin-right: 2px; +} + +.menu>li>ul>.has-dropdown:after { + color: #fff; + top: 5px; + right: 24px; + content: "\e649"; +} + +.menu>li>ul li a { + color: #fff; + height: auto; + padding: 6px 24px; +} + +.menu>li>ul>li>ul { + left: 100%; + top: 0; +} + +.menu>li:hover>ul { + opacity: 1; + transform: translate3d(0, 0px, 0); + -webkit-transform: translate3d(0, 0px, 0); + -moz-transform: translate3d(0, 0px, 0); + visibility: visible; +} + +.menu>li>ul>li:hover>ul, .has-dropdown:hover .mega-menu ul { + opacity: 1; + transform: translate3d(0, 0px, 0); + -webkit-transform: translate3d(0, 0px, 0); + -moz-transform: translate3d(0, 0px, 0); + visibility: visible; +} + +.mega-menu { + width: auto !important; + white-space: nowrap; + line-height: 24px; +} + +.mega-menu ul { + position: relative !important; + left: auto !important; + padding: 0 !important; +} + +.mega-menu>li { + width: 200px !important; + overflow: hidden; + display: inline-block; +} + +.mega-menu .title { + letter-spacing: 1px; + color: #fff; + display: inline-block; + padding: 6px 24px; + text-transform: uppercase; + font-size: 11px; + font-weight: 600; +} + +.make-right { + right: 0; +} + +.module.widget-handle { + border-left: 1px solid #ccc; + padding: 0 24px; + cursor: pointer; + position: relative; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + margin: 0; +} + +nav.nav-centered .module.widget-handle { + border: none !important; +} + +@media all and (max-width: 1100px) { + .module.widget-handle { + padding: 0 16px; + } +} + +.module.widget-handle i { + font-size: 20px; + line-height: 53px; + opacity: 0.5; + transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; +} + +.module.widget-handle:hover i, .module.active i { + opacity: 1; +} + +.widget-handle .function { + -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); + cursor: default; + width: 200px; + background: #292929; + position: absolute; + z-index: 99; + opacity: 0; + transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + transform: translate3d(0, 10px, 0); + -webkit-transform: translate3d(0, 10px, 0); + -moz-transform: translate3d(0, 10px, 0); + visibility: hidden; + margin-top: -2px; + right: 0; +} + +.module.widget-handle:hover .function { + opacity: 1; + transform: translate3d(0, 0px, 0); + -webkit-transform: translate3d(0, 0px, 0); + -moz-transform: translate3d(0, 0px, 0); + visibility: visible; +} + +.module.widget-handle .title { + font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; + letter-spacing: 1px; + text-transform: uppercase; + font-size: 11px; + font-weight: 600; + display: none; + opacity: .5; + transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; +} + +.module.widget-handle .title:hover { + opacity: 1; +} + +.widget-handle .cart { + position: relative; +} + +.widget-handle .cart .label { + width: 17px; + height: 17px; + font-size: 10px; + line-height: 17px; + padding: 0; + text-align: center; + position: absolute; + background: #fc4f4f; + top: 10px; + right: -10px; + border-radius: 50%; +} + +.widget-handle .search-form { + padding: 8px; + display: inline-block; + width: 100%; + line-height: 50px; +} + +.widget-handle .search-form input { + margin: 0; + font-size: 16px; +} + +nav .widget { + margin: 0; + padding: 24px; +} + +nav .widget .title { + display: none !important; +} + +nav .widget, nav .widget a:not(.btn) { + color: #fff; +} + +nav .widget hr { + border-color: #777; + margin-bottom: 16px; +} + +nav .widget hr:first-of-type { + display: none; +} + +.cart-widget-handle .function { + width: auto; + background: #fff; +} + +.cart-widget-handle .function span { + color: #222 !important; +} + +nav .cart-overview { + min-width: 300px; + margin-bottom: 16px; +} + +nav .cart-overview a { + height: auto; +} + +.language .menu>li ul { + max-width: 150px; +} + +.nav-open { + max-height: 10000px !important; + height: auto !important; +} + +.nav-open .mobile-toggle { + border-bottom: 1px solid #ccc; +} + +@media all and (max-width: 1120px) { + .menu>li { + margin-right: 24px; + } +} + +.has-offscreen-nav .main-container { + transition: all 0.4s ease; + -webkit-transition: all 0.4s ease; + -moz-transition: all 0.4s ease; +} + +.offscreen-container { + position: fixed; + transform: translate3d(200%, 0, 0); + -webkit-transform: translate3d(200%, 0, 0); + -moz-transform: translate3d(200%, 0, 0); + width: 50%; + top: 0; + height: 100%; + min-height: 100vh; + z-index: 20; + transition: all 0.4s ease; + -webkit-transition: all 0.4s ease; + -moz-transition: all 0.4s ease; + overflow: hidden; +} + +.offscreen-container.reveal-nav { + transform: translate3d(100%, 0, 0); + -webkit-transform: translate3d(100%, 0, 0); + -moz-transform: translate3d(100%, 0, 0); +} + +.main-container.reveal-nav { + transform: translate3d(-50%, 0, 0); + -webkit-transform: translate3d(-50%, 0, 0); + -moz-transform: translate3d(-50%, 0, 0); +} + +.offscreen-left .offscreen-container { + transform: translate3d(-50%, 0, 0); + -webkit-transform: translate3d(-50%, 0, 0); + -moz-transform: translate3d(-50%, 0, 0); +} + +.offscreen-left .offscreen-container.reveal-nav { + transform: translate3d(0%, 0, 0); + -webkit-transform: translate3d(0%, 0, 0); + -moz-transform: translate3d(0%, 0, 0); +} + +.offscreen-left .main-container.reveal-nav, .offscreen-left nav.reveal-nav { + transform: translate3d(50%, 0, 0) !important; + -webkit-transform: translate3d(50%, 0, 0) !important; + -moz-transform: translate3d(50%, 0, 0) !important; +} + +.offscreen-container .close-nav { + position: absolute; + right: 24px; + top: 16px; + z-index: 24; + font-size: 20px; + transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + opacity: .5; +} + +.offscreen-container .close-nav:hover { + opacity: 1; +} + +.offscreen-container.bg-dark .close-nav i { + color: #fff; +} + +@media all and (max-width: 990px) { + .offscreen-container { + width: 100vw; + } + .offscreen-container.reveal-nav { + transform: translate3d(0vw, 0, 0); + -webkit-transform: translate3d(0vw, 0, 0); + -moz-transform: translate3d(0vw, 0, 0); + } + .main-container.reveal-nav { + transform: none !important; + } +} + +@media all and (max-width: 990px) { + nav.fixed { + position: absolute !important; + opacity: 1 !important; + visibility: visible !important; + } + nav.outOfSight { + transform: translate3d(0, 0px, 0) !important; + -webkit-transform: translate3d(0, 0px, 0) !important; + -moz-transform: translate3d(0, 0px, 0) !important; + } + .nav-bar, .nav-bar .module-group, .nav-bar .module { + height: auto; + overflow: hidden; + } + .nav-bar .module { + padding: 0 16px; + } + .nav-bar .module-group { + width: 100%; + padding: 16px 0; + } + .nav-bar .module-group .module { + display: block; + float: none; + width: 100%; + } + nav.nav-centered .logo { + margin: 24px 0 16px 0; + max-height: 40px; + } + .menu { + height: auto; + } + .menu.inline-block { + width: 100%; + } + .menu a { + height: auto; + line-height: 24px; + padding: 4px 0; + } + .menu li { + line-height: 24px; + float: none; + display: block; + width: 100%; + max-width: 100%; + } + .menu>li ul { + position: relative; + width: 100%; + opacity: 1; + visibility: visible; + transform: translate3d(0, 0px, 0); + -webkit-transform: translate3d(0, 0px, 0); + -moz-transform: translate3d(0, 0px, 0); + left: 0; + } + .menu>li>ul { + position: relative; + opacity: 1; + visibility: visible; + display: none; + transform: translate3d(0, 0px, 0); + -webkit-transform: translate3d(0, 0px, 0); + -moz-transform: translate3d(0, 0px, 0); + } + .menu>li>ul>.has-dropdown:after { + content: "\e64b"; + } + .menu>li>ul>li>ul { + left: 0; + display: none; + padding: 0; + } + .menu>li>ul li a, .mega-menu .title { + padding: 4px 16px; + } + .has-dropdown .has-dropdown li { + padding-left: 18px; + } + .has-dropdown { + padding-right: 0; + } + .mega-menu { + margin-left: 0 !important; + } + .mega-menu li { + width: 100% !important; + } + .toggle-sub>ul, .toggle-sub .mega-menu ul { + display: block !important; + } + .module.widget-handle { + border-left: none; + border-top: 1px solid #ccc; + line-height: 40px; + min-height: 40px; + } + .module.widget-handle .menu { + line-height: 40px; + } + .module.widget-handle .menu li { + line-height: 40px; + } + .module.widget-handle i { + line-height: 40px; + } + .module.widget-handle .title { + display: inline-block; + position: relative; + bottom: 3px; + margin-left: 8px; + } + .widget-handle .function { + width: 100%; + position: relative; + opacity: 1; + transform: translate3d(0, 0px, 0); + -webkit-transform: translate3d(0, 0px, 0); + -moz-transform: translate3d(0, 0px, 0); + visibility: visible; + margin-top: 0; + display: none; + box-shadow: none !important; + } + .toggle-widget-handle .function { + display: block !important; + } + .widget-handle .cart .label { + width: 22px; + height: 22px; + font-size: 12px; + line-height: 22px; + top: 18px; + } + .mobile-toggle { + border-left: 1px solid #ccc !important; + border-bottom: none !important; + } + .mobile-toggle i { + line-height: 53px !important; + } + .mobile-toggle.absolute-xs { + position: absolute; + top: 0; + } + nav.nav-centered .mobile-toggle { + width: 100%; + } + nav.bg-dark .module.widget-handle { + border-top: 1px solid #444; + } + nav.bg-dark .mobile-toggle { + border-left: 1px solid #444 !important; + } + nav.bg-dark .nav-open .mobile-toggle { + border-bottom: 1px solid #444; + } +} + +nav.outOfSight { + transform: translate3d(0, -200px, 0); + -webkit-transform: translate3d(0, -200px, 0); + -moz-transform: translate3d(0, -200px, 0); +} + +nav.scrolled { + transform: translate3d(0, 0px, 0); + -webkit-transform: translate3d(0, 0px, 0); + -moz-transform: translate3d(0, 0px, 0); + transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; +} + +nav.fixed, nav.absolute { + top: 0; + width: 100%; + z-index: 999; + left: 0; + right: 0; +} + +nav.absolute { + position: absolute; +} + +nav.fixed { + position: fixed; + visibility: hidden; + opacity: 0; +} + +nav.fixed .nav-utility { + display: none; +} + +nav.fixed.scrolled { + visibility: visible; + opacity: 1; +} + +nav.transparent .menu>li>a, nav.transparent .module.widget-handle i, nav.transparent .nav-utility { + color: #fff; +} + +nav.transparent .nav-utility, nav.transparent .nav-bar { + border-bottom: 1px solid rgba(255, 255, 255, 0.2); +} + +nav.transparent .module.widget-handle { + border-left: 1px solid rgba(255, 255, 255, 0.2) !important; +} + +nav.transparent .menu>li>a, nav.transparent .module.widget-handle i { + opacity: 1; +} + +nav.transparent .has-dropdown:after { + color: #fff; +} + +nav.transparent .logo-dark { + display: none; +} + +nav.transparent .logo-light { + display: inline; +} + +nav.transparent { + background: none; +} + +.has-offscreen-nav>nav.fixed { + opacity: 1; + transform: none; + visibility: visible; +} + +@media all and (max-width: 990px) { + nav.transparent .nav-open { + background: #fff; + } + nav.transparent .nav-open .menu>li>a, nav.transparent .nav-open .module.widget-handle i, nav.transparent .nav-open .nav-utility { + color: #292929; + } + nav.transparent .nav-open .logo-dark { + display: inline; + } + nav.transparent .nav-open .logo-light { + display: none; + } + nav.transparent .nav-open .has-dropdown:after { + color: #292929; + } + .menu>li:last-child>ul ul { + right: 0; + } +} + +nav.transparent.fixed { + background: #fff; +} + +nav.transparent.fixed .logo-light { + display: none; +} + +nav.transparent.fixed .logo-dark { + display: inline; +} + +nav.transparent.fixed .menu>li>a, nav.transparent.fixed .module.widget-handle i { + color: #292929; +} + +nav.transparent.fixed .menu>.has-dropdown:after { + color: #fff; + color: #292929; +} + +nav.transparent.fixed .module.widget-handle { + border-left: 1px solid #ccc; +} + +nav.transparent.fixed .menu>li>a, nav.transparent.fixed .module.widget-handle i { + opacity: .5; +} + +nav.bg-dark .menu>li>a, nav.bg-dark .module.widget-handle i, nav.bg-dark .nav-utility { + color: #fff; + opacity: .7; +} + +nav.bg-dark .module.widget-handle { + border-left: 1px solid rgba(255, 255, 255, 0.2); +} + +nav.bg-dark .nav-utility, nav.bg-dark .nav-bar { + border-bottom: 1px solid rgba(255, 255, 255, 0.2); +} + +nav.transparent.fixed.bg-dark { + background: #292929; +} + +nav.transparent.fixed.bg-dark .menu>li>a, nav.transparent.fixed.bg-dark .module.widget-handle i { + color: #fff; +} + +nav.nav-centered.outOfSight .logo { + display: none; +} + +.vnu { + display: inline; +} + +.logo { + max-height: 80%; +} + +/*!---------- 6. BUTTONS ----------*/ + +.btn { + font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; + border: 2px solid #5bc0de; + padding: 0 26px; + height: 40px; + min-width: 150px; + line-height: 36px; + font-size: 12px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 1px; + text-align: center; + transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + margin-right: 8px; + margin-bottom: 24px; +} + +.btn:last-child, .btn:last-of-type { + margin-right: 0; +} + +.btn:hover { + color: #fff; +} + +.btn-icon { + width: 40px; + height: 40px; + font-size: 20px; + min-width: 0; + padding: 0; + line-height: 38px; +} + +.btn-lg { + height: 50px; + line-height: 46px; + min-width: 200px; +} + +.btn-icon.btn-lg { + width: 50px; + height: 50px; + line-height: 49px; + font-size: 24px; + min-width: 0; +} + +.btn-icon.btn-sm { + width: 30px; + height: 30px; + line-height: 29px; + font-size: 13px; + min-width: 0; + padding: 0 0 0 1px!important; +} + +.btn-sm { + height: 30px; + font-size: 11px; + line-height: 27px; + min-width: 0; +} + +.btn-filled { + background: #5bc0de; + color: #fff; +} + +.btn-white, .image-bg .btn, .image-bg .btn:visited { + color: #fff; + border-color: #fff; +} + +.btn-white:hover, .image-bg .btn:hover, .image-bg .btn:visited:hover { + background: #fff; + color: #222; +} + +.image-bg .btn.btn-filled, .image-bg .btn-filled:visited { + border-color: #5bc0de; +} + +.image-bg .btn-filled:hover { + border-color: #fff; +} + +.btn-rounded { + border-radius: 25px; +} + +body.btn-rounded .btn { + border-radius: 25px !important; +} + +.bg-light .btn { + border-color: #222; + color: #222; +} + +.bg-light .btn:visited, .bg-light .btn:visited:hover { + color: #222; +} + +.bg-light .btn-filled, .bg-light .btn-filled:visited { + color: #fff; +} + +.btn:visited { + color: #5bc0de; +} + +.btn-white:visited, .btn:visited:hover { + color: #fff; +} + +.btn-white:visited:hover { + color: #222; +} + +.btn-filled:visited { + color: #fff; +} + +.btn.bg-dark { + color: #fff; + border-color: #333; + background: #333; +} + +.btn.bg-dark:hover { + background: #434343; + border-color: #434343; +} + +.bg-primary .btn { + color: #fff; + border-color: #fff; +} + +.bg-primary .btn:hover { + background: #fff; + color: #5bc0de; +} + +.li { + display: list-item!important; +} + + +/*!---------- 1. GLOBAL STYLES ----------*/ + +body { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-size: 13px; + line-height: 24px; + font-family: "Nunito", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #666; + overflow-x: hidden; +} + +body.boxed-layout { + background: #eee; +} + +body.boxed-layout .main-container { + background: #fff; +} + +body.boxed-layout, .boxed-layout .nav-container, .boxed-layout .main-container, .boxed-layout nav { + max-width: 1366px; + margin: 0 auto; + left: 0; + right: 0; +} + +ul { + list-style: none; +} + +ul.bullets { + list-style: inside; +} + +.main-container { + clear: both; +} + +hr { + border: none; + border-top: 1px solid #ccc; + margin: 0 0 24px 0; + width: 100%; +} + +hr.short-thick { + max-width: 50px; + border-top: 5px solid #ccc; + opacity: 1 !important; +} + +.image-bg hr { + border-color: #fff; + opacity: .6; +} + +.image-bg.bg-light hr { + border-color: #ccc; + opacity: 1; +} + +.bg-dark hr { + border-color: #555; +} + +.inline-block { + display: inline-block; +} + +.list-inline { + margin-left: 0; +} + +.list-inline>li { + padding: 0 8px; +} + +.list-inline>li:last-child { + padding-right: 0; +} + +.list-inline>li:first-child { + padding-left: 0; +} + +.bg-primary .list-inline i { + color: #feb3b3; +} + +.overflow-hidden { + overflow: hidden; +} + +.display-block { + display: block; +} + +.show-grid { + border: 1px dashed rgba(255, 255, 255, 0); + padding: 8px; + transition: all 0.2s ease; + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + cursor: default; +} + +.show-grid:hover { + border-color: #222; +} + +.right { + right: 0; +} + +.relative { + position: relative; + z-index: 2; +} + +.clearboth { + clear: both; +} + +.spread-children * { + display: inline-block; + margin-left: 12px; + margin-right: 12px; +} + +.spread-children-large * { + display: inline-block; + margin-left: 24px; + margin-right: 24px; +} + +.container { + position: relative; +} + +.vnu { + display: inline; +} + +.row-gapless>div[class*='col-'] { + padding: 0; +} + +@media all and (max-width: 1100px) { + .col-md-push-1 { + left: 0; + } +} + +@media all and (max-width: 768px) { + .pull-left-sm { + float: left !important; + } + .overflow-hidden-xs { + overflow: hidden; + } +} + +@media all and (max-width: 767px) { + .spread-children * { + margin-left: 6px; + margin-right: 6px; + } +} + +/*!---------- 3. TYPOGRAPHY ----------*/ + +@media all and (max-width: 767px) { + .text-center-xs { + text-align: center !important; + } +} + +.bold { + font-weight: 600 !important; +} + +.thin { + font-weight: 100 !important; +} + +@media all and (max-width: 767px) { + .thin { + font-weight: 300 !important; + } +} + +h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, input, button, select, textarea { + margin-bottom: 24px; + margin-top: 0; + padding: 0; +} + +h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { + font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +h1, h2, h3, h4, h5, h6 { + font-weight: 300; + color: #292929; +} + +h1, .h1 { + font-size: 56px; + line-height: 64px; +} + +h1.large { + font-size: 72px; + line-height: 80px; + font-weight: 100; +} + +@media all and (max-width: 990px) { + h1.large { + font-size: 56px; + line-height: 64px; + } +} + +h2 { + font-size: 40px; + line-height: 48px; +} + +h3 { + font-size: 32px; + line-height: 40px; +} + +h4 { + font-size: 24px; + line-height: 32px; +} + +h5 { + font-size: 16px; + line-height: 24px; + font-weight: 400; +} + +h6, .h6 { + font-size: 12px; + line-height: 24px; + font-weight: 700; +} + +@media all and (max-width: 767px) { + h1, h1.large, .h1 { + font-size: 32px; + line-height: 40px; + font-weight: 300; + } + h2 { + font-size: 32px; + line-height: 40px; + } + h3 { + font-size: 24px; + line-height: 32px; + } + h4 { + font-size: 18px; + line-height: 26px; + } + h5 { + font-size: 16px; + line-height: 24px; + font-weight: 400; + } + h6, .h6 { + font-size: 12px; + line-height: 24px; + font-weight: 700; + } +} + +.uppercase { + font-weight: 400; + text-transform: uppercase; +} + +h1.uppercase { + letter-spacing: 17px; + margin-right: -17px; +} + +h2.uppercase { + letter-spacing: 10px; + margin-right: -10px; +} + +h3.uppercase { + letter-spacing: 6px; + margin-right: -6px; +} + +h4.uppercase { + letter-spacing: 3px; + margin-right: -3px; +} + +h5.uppercase { + letter-spacing: 2px; + margin-right: -2px; +} + +h6.uppercase, .h6-u { + letter-spacing: 2px; + font-weight: 700; +} + +.bold-h6 { + font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 12px; + line-height: 24px; + font-weight: 400; + text-transform: uppercase; + letter-spacing: 2px; + font-weight: 700; +} + +p, span { + font-weight: 400; +} + +p.lead { + font-size: 16px; + font-weight: 400; + line-height: 28px; +} + +.sub { + font-size: 12px; +} + +@media all and (max-width: 767px) { + p.lead { + font-size: 13px; + line-height: 24px; + } + p { + font-size: 12px; + } +} + +a, a:visited, a:focus, a:active, a:hover { + text-decoration: none; + outline: none; +} + +a { + font-weight: 600; + color: #5bc0de; + transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + cursor: poitner; +} + +.image-bg a, .bg-primary a { + color: #fff; +} + +.image-bg a:hover, .bg-primary a:hover { + color: #fff; + opacity: .9; +} + +.bg-light a { + color: #5bc0de; +} + +.bg-light a:hover { + color: #5bc0de; + opacity: 1; +} + +.label { + font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 12px; + line-height: 24px; + font-weight: 400; + text-transform: uppercase; + letter-spacing: 2px; + font-weight: 700; + letter-spacing: 1px; + background: #5bc0de; + border-radius: 0; + padding: 6px 12px; + font-size: 10px; + vertical-align: middle; +} + +blockquote { + overflow: hidden; + font-family: "Merriweather", "Georgia", Times New Roman, Times, serif; + font-size: 20px; + line-height: 40px; + font-style: italic; + background: #f5f5f5; + padding: 32px; + color: #777; + font-weight: 300; +} + +.bg-secondary blockquote { + background: #fff; + border-color: #fc4f4f; +} + +blockquote .author { + font-size: 12px; + display: block; + float: right; + margin-top: 16px; +} + +.number { + font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +.columns-2 { + column-count: 2; + -webkit-column-count: 2; +} + +@media all and (max-width: 767px) { + br { + display: none; + } + blockquote { + font-size: 16px; + line-height: 32px; + } + .columns-2 { + column-count: 1; + -webkit-column-count: 1; + } +} + +.text-left { + text-align: left !important; +} + +@media all and (max-width: 767px) { + .text-left-xs { + text-align: left !important; + } +} + + +/*!---------- 3.1. TYPOGRAPHY - LISTS ----------*/ + +ul[data-bullet] li { + line-height: 32px; +} + +ul[data-bullet] li i:first-child { + margin-right: 16px; + transform: scale(1.5); + -webkit-transform: scale(1.5); + display: inline-block; +} + +ul.lead li { + font-size: 16px; + line-height: 40px; +} + +.hovercard:hover { + box-shadow: 0 1px 5px 5px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .5); + transition: all 300ms linear +} + +.hovercard { + box-shadow: 0 1px 5px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2); + transition: all 300ms linear +} + +.hovercard-light:hover { + box-shadow: 0 1px 5px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .05); + transition: all 300ms linear +} + +.hovercard-light { + transition: all 300ms linear +} + +.hover-light { + box-shadow: 0 1px 5px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .05); + transition: all 300ms linear +} + +.hover-light:hover { + box-shadow: 0 1px 5px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .4); + transition: all 300ms linear +} + +.menuContent{ + display: none; +} +@media (max-width: 1023px){ + + .content { + display: block; + top: 0%; + transform: translateY(0%); + width: 100%!important; + margin: 0%!important; + } + + .leftbox{ + width: 100%!important; + margin-top: 230px; + } + .rightbox{ + width: 100%; + float: left; + margin-top: 0%; + } + .row{ + margin: 0px 0px!important; + } + .container-fluid { + padding: 0px 0px; + margin: 0px 0px!important; + } + .menuHead{ + display: none!important; + } + .menuContent{ + display: inline!important; + margin-top: 115px!important; + } + .btn-md{ + height: 30px!important; + font-size: 11px!important; + line-height: 27px!important; + min-width: 0!important; + } +} diff --git a/index.html b/index.html index 3e52d75..6260f1d 100644 --- a/index.html +++ b/index.html @@ -2,41 +2,74 @@ - Happy Coders - The Coders Game - + Happy Coders - The Coders Game + - - + + + + - - - - - - - - - - -