/*================================================================ "colors.css" has statements that overrides same named statements in main CSS file -> "style.css". You can change color code on some existing statement or add your own. To apply particular color scheme just add id name to body tag in index.html page. See example: To set slider background image, add class to body tag in index.html page: You can also change colors in "style.css" directly. In that case you don't need "colors.css" file at all. =================================================================*/ /********** S L I D E R B G **********/ .bg1 .slider-bg { background-image: url(../images/slider-bg1.jpg); } .bg2 .slider-bg { background-image: url(../images/slider-bg2.jpg); } .bg3 .slider-bg { background-image: url(../images/slider-bg3.jpg); } .bg4 .slider-bg { background-image: url(../images/slider-bg4.jpg); } .bg5 .slider-bg { background-image: url(../images/slider-bg5.jpg); } .bg6 .slider-bg { background-image: url(../images/slider-bg6.jpg); } /********** O R A N G E **********/ #orange a.logo { color: #8d321e; } #orange #nav-container { background-color: #de5434; } #orange a { color: #de5434; } #orange nav ul li a { color: #f2c6bf; } #orange nav ul li a:hover, #orange nav ul li a.active { border-bottom: 1px dotted #f2c6bf; } #orange nav ul li a.active { color: #fff; } #orange .btn { color: #de5434; border: 2px solid #de5434; } #orange .btn:hover { color: #fff; background: #de5434; } #orange ul.pluses li::before { color: #de5434; } #orange .service:hover h3 { color: #de5434; } #orange .blog-control ul li a.btn.active { color: #fff; background: #de5434; } #orange .team > li:hover div h3 { color: #de5434; } #orange #blog-single blockquote { border-left: 2px solid #de5434; } #orange #blog-single article header span { background: #de5434; } #orange #footer-top { background-color: #de5434; } #orange .og-grid li > a > div { background: #de5434; } #orange .og-details a { color: #de5434; border: 2px solid #de5434; } #orange .og-details a:hover { color: #fff; background: #de5434; } @media screen and (max-width: 640px) { #orange nav ul { background: #de5434; } #orange nav ul li a:hover, #orange nav ul li a.active { border-bottom: none; } } /********** R E D **********/ #red a.logo { color: #882e11; } #red #nav-container { background-color: #db4a3f; } #red a { color: #db4a3f; } #red nav ul li a { color: #f9c1bc; } #red nav ul li a:hover, #red nav ul li a.active { border-bottom: 1px dotted #f9c1bc; } #red nav ul li a.active { color: #fff; } #red .btn { color: #db4a3f; border: 2px solid #db4a3f; } #red .btn:hover { color: #fff; background: #db4a3f; } #red ul.pluses li::before { color: #db4a3f; } #red .service:hover h3 { color: #db4a3f; } #red .blog-control ul li a.btn.active { color: #fff; background: #db4a3f; } #red .team > li:hover div h3 { color: #db4a3f; } #red #blog-single blockquote { border-left: 2px solid #db4a3f; } #red #blog-single article header span { background: #db4a3f; } #red #footer-top { background-color: #db4a3f; } #red .og-grid li > a > div { background: #db4a3f; } #red .og-details a { color: #db4a3f; border: 2px solid #db4a3f; } #red .og-details a:hover { color: #fff; background: #db4a3f; } @media screen and (max-width: 640px) { #red nav ul { background: #db4a3f; } #red nav ul li a:hover, #red nav ul li a.active { border-bottom: none; } } /********** P I N K **********/ #pink a.logo { color: #84192d; } #pink #nav-container { background-color: #d82546; } #pink a { color: #d82546; } #pink nav ul li a { color: #e9c2c9; } #pink nav ul li a:hover, #pink nav ul li a.active { border-bottom: 1px dotted #e9c2c9; } #pink nav ul li a.active { color: #fff; } #pink .btn { color: #d82546; border: 2px solid #d82546; } #pink .btn:hover { color: #fff; background: #d82546; } #pink ul.pluses li::before { color: #d82546; } #pink .service:hover h3 { color: #d82546; } #pink .blog-control ul li a.btn.active { color: #fff; background: #d82546; } #pink .team > li:hover div h3 { color: #d82546; } #pink #blog-single blockquote { border-left: 2px solid #d82546; } #pink #blog-single article header span { background: #d82546; } #pink #footer-top { background-color: #d82546; } #pink .og-grid li > a > div { background: #d82546; } #pink .og-details a { color: #d82546; border: 2px solid #d82546; } #pink .og-details a:hover { color: #fff; background: #d82546; } @media screen and (max-width: 640px) { #pink nav ul { background: #d82546; } #pink nav ul li a:hover, #pink nav ul li a.active { border-bottom: none; } } /********** P U R P L E **********/ #purple a.logo { color: #671f3f; } #purple #nav-container { background-color: #a93969; } #purple a { color: #a93969; } #purple nav ul li a { color: #ecb8c9; } #purple nav ul li a:hover, #purple nav ul li a.active { border-bottom: 1px dotted #ecb8c9; } #purple nav ul li a.active { color: #fff; } #purple .btn { color: #a93969; border: 2px solid #a93969; } #purple .btn:hover { color: #fff; background: #a93969; } #purple ul.pluses li::before { color: #a93969; } #purple .service:hover h3 { color: #a93969; } #purple .blog-control ul li a.btn.active { color: #fff; background: #a93969; } #purple .team > li:hover div h3 { color: #a93969; } #purple #blog-single blockquote { border-left: 2px solid #a93969; } #purple #blog-single article header span { background: #a93969; } #purple #footer-top { background-color: #a93969; } #purple .og-grid li > a > div { background: #a93969; } #purple .og-details a { color: #a93969; border: 2px solid #a93969; } #purple .og-details a:hover { color: #fff; background: #a93969; } @media screen and (max-width: 640px) { #purple nav ul { background: #a93969; } #purple nav ul li a:hover, #purple nav ul li a.active { border-bottom: none; } } /********** B L U E **********/ #blue a.logo { color: #1b4b6b; } #blue #nav-container { background-color: #2a8aBa; } #blue a { color: #2a8aBa; } #blue nav ul li a { color: #b5d0dd; } #blue nav ul li a:hover, #blue nav ul li a.active { border-bottom: 1px dotted #b5d0dd; } #blue nav ul li a.active { color: #fff; } #blue .btn { color: #2a8aBa; border: 2px solid #2a8aBa; } #blue .btn:hover { color: #fff; background: #2a8aBa; } #blue ul.pluses li::before { color: #2a8aBa; } #blue .service:hover h3 { color: #2a8aBa; } #blue .blog-control ul li a.btn.active { color: #fff; background: #2a8aBa; } #blue .team > li:hover div h3 { color: #2a8aBa; } #blue #blog-single blockquote { border-left: 2px solid #2a8aBa; } #blue #blog-single article header span { background: #2a8aBa; } #blue #footer-top { background-color: #2a8aBa; } #blue .og-grid li > a > div { background: #2a8aBa; } #blue .og-details a { color: #2a8aBa; border: 2px solid #2a8aBa; } #blue .og-details a:hover { color: #fff; background: #2a8aBa; } @media screen and (max-width: 640px) { #blue nav ul { background: #2a8aBa; } #blue nav ul li a:hover, #blue nav ul li a.active { border-bottom: none; } } /********** C Y A N **********/ #cyan a.logo { color: #196969; } #cyan #nav-container { background-color: #3bb7bb; } #cyan #nav-container { box-shadow: 0px 1px 3px rgba(0, 0, 0, .1); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .1); -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, .1); } #cyan a { color: #3bb7bb; } #cyan nav ul li a { color: #c3e6e7; } #cyan nav ul li a:hover, #cyan nav ul li a.active { border-bottom: 1px dotted #c3e6e7; } #cyan nav ul li a.active { color: #fff; } #cyan .btn { color: #3bb7bb; border: 2px solid #3bb7bb; } #cyan .btn:hover { color: #fff; background: #3bb7bb; } #cyan ul.pluses li::before { color: #3bb7bb; } #cyan #default-slider .btn { color: #fff; border: 2px solid #fff; } #cyan #default-slider .btn:hover { border: 2px solid #3bb7bb; } #cyan .service:hover h3 { color: #3bb7bb; } #cyan .blog-control ul li a.btn.active { color: #fff; background: #3bb7bb; } #cyan .team > li:hover div h3 { color: #3bb7bb; } #cyan #blog-single blockquote { border-left: 2px solid #3bb7bb; } #cyan #blog-single article header span { background: #3bb7bb; } #cyan #footer-top { background-color: #3bb7bb; } #cyan .og-grid li > a > div { background: #3bb7bb; } #cyan .og-details a { color: #3bb7bb; border: 2px solid #3bb7bb; } #cyan .og-details a:hover { color: #fff; background: #3bb7bb; } @media screen and (max-width: 640px) { #cyan nav ul { background: #3bb7bb; } #cyan nav ul li a:hover, #cyan nav ul li a.active { border-bottom: none; } } /********** Y E L L O W **********/ #yellow a.logo { color: #8f671b; } #yellow #nav-container { background-color: #ffb120; } #yellow #nav-container { box-shadow: 0px 1px 3px rgba(0, 0, 0, .07); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .07); -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, .07); } #yellow a { color: #ffb120; } #yellow nav ul li a { color: #f7ead1; } #yellow nav ul li a:hover, #yellow nav ul li a.active { border-bottom: 1px dotted #f7ead1; } #yellow nav ul li a.active { color: #fff; } #yellow .btn { color: #ffb120; border: 2px solid #ffb120; } #yellow .btn:hover { color: #fff; background: #ffb120; } #yellow ul.pluses li::before { color: #ffb120; } #yellow #default-slider .btn { color: #fff; border: 2px solid #fff; } #yellow #default-slider .btn:hover { border: 2px solid #ffb120; } #yellow .service:hover h3 { color: #ffb120; } #yellow .blog-control ul li a.btn.active { color: #fff; background: #ffb120; } #yellow .team > li:hover div h3 { color: #ffb120; } #yellow #blog-single blockquote { border-left: 2px solid #ffb120; } #yellow #blog-single article header span { background: #ffb120; } #yellow #footer-top { background-color: #ffb120; } #yellow .og-grid li > a > div { background: #ffb120; } #yellow .og-details a { color: #ffb120; border: 2px solid #ffb120; } #yellow .og-details a:hover { color: #fff; background: #ffb120; } @media screen and (max-width: 640px) { #yellow nav ul { background: #ffb120; } #yellow nav ul li a:hover, #yellow nav ul li a.active { border-bottom: none; } } /********** G R E E N **********/ #green a.logo { color: #527333; } #green #nav-container { background-color: #85b545; } #green a { color: #85b545; } #green nav ul li a { color: #d4ebbd; } #green nav ul li a:hover, #green nav ul li a.active { border-bottom: 1px dotted #d4ebbd; } #green nav ul li a.active { color: #fff; } #green .btn { color: #85b545; border: 2px solid #85b545; } #green .btn:hover { color: #fff; background: #85b545; } #green ul.pluses li::before { color: #85b545; } #green #default-slider .btn { color: #fff; border: 2px solid #fff; } #green #default-slider .btn:hover { border: 2px solid #85b545; } #green .service:hover h3 { color: #85b545; } #green .blog-control ul li a.btn.active { color: #fff; background: #85b545; } #green .team > li:hover div h3 { color: #85b545; } #green #blog-single blockquote { border-left: 2px solid #85b545; } #green #blog-single article header span { background: #85b545; } #green #footer-top { background-color: #85b545; } #green .og-grid li > a > div { background: #85b545; } #green .og-details a { color: #85b545; border: 2px solid #85b545; } #green .og-details a:hover { color: #fff; background: #85b545; } @media screen and (max-width: 640px) { #green nav ul { background: #85b545; } #green nav ul li a:hover, #green nav ul li a.active { border-bottom: none; } } /********** G R A Y **********/ #grey a.logo { color: #474a4c; } #grey #nav-container { background-color: #808789; } #grey a { color: #808789; } #grey nav ul li a { color: #c7cacc; } #grey nav ul li a:hover, #grey nav ul li a.active { border-bottom: 1px dotted #c7cacc; } #grey nav ul li a.active { color: #fff; } #grey .btn { color: #808789; border: 2px solid #808789; } #grey .btn:hover { color: #fff; background: #808789; } #grey ul.pluses li::before { color: #808789; } #grey .service:hover h3 { color: #808789; } #grey .blog li div p a { text-decoration: underline; } #grey .blog li div p a:hover { text-decoration: none; } #grey .blog-control ul li a.btn.active { color: #fff; background: #808789; } #grey .team > li:hover div h3 { color: #808789; } #grey #blog-single blockquote { border-left: 2px solid #808789; } #grey #blog-single article header span { background: #808789; } #grey #footer-top { background-color: #808789; } #grey .og-grid li > a > div { background: #808789; } #grey .og-details a { color: #808789; border: 2px solid #808789; } #grey .og-details a:hover { color: #fff; background: #808789; } @media screen and (max-width: 640px) { #grey nav ul { background: #808789; } #grey nav ul li a:hover, #grey nav ul li a.active { border-bottom: none; }