/* blue: #59C1E4 green: #6EBC71 */ html, body { overflow-x: hidden; } #logo { width: 200px; min-width: 350px; } #sample:focus { height: 500px; } #donate { background-color: #59C1E4; margin-right: 2px; } #amazon { background-color: #FF9900; float: left; margin-right: 2px; } #volunteerbtn { background-color: #cb2343; float: left; } #onetwo { font-size: 12px; color: #a5a5a5; } /* Dropdown Button */ .dropbtn { background-color: transparent; padding: 16px; font-size: 12px; border: none; cursor: pointer; text-transform: uppercase; color: #FFF; font-size: 12px; letter-spacing: 1px; } /* The container <div> - needed to position the dropdown content */ .dropdown { position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display:none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* Change color of dropdown links on hover */ .dropdown-content a:hover { background-color: #f1f1f1 } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; } /*GRID*/ .wrap { overflow: hidden; margin: 10px; } .box { display: inline; height: auto; padding-bottom: 1%; } .boxInner { position: relative; display: inline; overflow: hidden; } .boxInner img { display: inline-block; width: 15%; margin: 5px; } body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox { margin-bottom: 0; }
@media only screen and (max-width: 768px) { .dropdown-content a { display: none; } } @media only screen and (max-width: 480px) { /* Smartphone view: 1 tile */ .box { width: 100%; } .boxInner img { display: inline-block; width: 35% } .fnav { font-size: 1em; } #submit, #donate, #amazon, #volunteerbtn { width: 50%; padding: 10px; margin: 0px; float: none; } } @media only screen and (max-width: 650px) and (min-width: 481px) { /* Tablet view: 2 tiles */ .box { width: 100%; } .boxInner img { display: inline-block; width: 30%; } nav#footer p { font-size: 5px; margin-top: 2px; } } /*GRID*/
/* THEME DEFAULT CSS BELOW */
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic); @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,700,300,600,800,400); body, html { font-family: 'Lato', sans-serif; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; color: #5a5a5a; } h1 { text-transform: uppercase; } h1 strong { font-weight: 900; } h2 { text-transform: uppercase; line-height: 20px; margin: 0; line-height: 26px; } h3 { font-size: 18px; font-weight: 900; } h4 { text-transform: uppercase; } h5 { text-transform: uppercase; font-weight: 700; line-height: 20px; } p { font-family: 'Open Sans', sans-serif; } p.intro { font-size: 16px; margin: 12px 0 0; line-height: 24px; font-family: 'Open Sans', sans-serif; } a { color: #6EBC71; } a:hover, a:focus { text-decoration: none; color: #6EBC71; } .section-title hr { border-color: #6EBC71; border-width: 4px; width: 60px; float: left; clear: both; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } .clearfix { display: block; } ul, ol { padding: 0; webkit-padding: 0; moz-padding: 0; } /* Navigation */ #tf-menu { padding: 20px; transition: all 0.8s; } #tf-menu.navbar-default { background-color: rgba(0, 0, 0, 0.5); border-color: rgba(231, 231, 231, 0); } #tf-menu a.navbar-brand { text-transform: uppercase; font-size: 22px; color: #fff; font-weight: 900; } #tf-menu.navbar-default .navbar-nav>li>a { text-transform: uppercase; color: #FFF; font-size: 12px; letter-spacing: 1px; } .on { background-color: #222222 !important; padding: 0 !important; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { color: #6EBC71 !important; background-color: transparent; font-weight: 700; } .navbar-toggle { border-radius: 0; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #6EBC71; border-color: #6EBC71; } .navbar-default .navbar-toggle:hover>.icon-bar { background-color: #FFF; } /* Home Style */ #tf-home { background: url('/img/ezgif.gif'); background-size:cover; background-position: center center; background-attachment:fixed; background-repeat: no-repeat; color: #cfcfcf; height: 750px; } #tf-home .overlay { background: rgba(26, 26, 26, 0.56); height: 750px; background-attachment: fixed } #tf-home p.lead { color: #e3e3e3; } #tf-home .content { height: auto; position: absolute; top: 150px; left: 0; right: 0; } .color { color: #6EBC71; } a.fa.fa-angle-down { padding: 10px 15px; color: #fff; border: 2px solid #b4b4b4; border-radius: 50%; font-size: 24px; margin-top: 20px; transition: all 0.5s; } a.fa.fa-angle-down:hover { background: #6EBC71; color: #ffffff; border: 2px solid #6EBC71; } /* About Section */ #tf-about { padding: 80px 0; } ul.about-list { margin: 30px 0 0; } ul.about-list li { display: block; font-size: 16px; line-height: 30px; font-family: 'Open Sans', sans-serif; } ul.about-list li span { margin-right: 10px; } /* Team Section */ #tf-team { background: url(/img/pool.jpg); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; color: #ffffff; } #tf-team .overlay { background: rgba(26, 26, 26, 0.56); height: auto; background-attachment: fixed; padding: 80px 0; } .section-title.center { padding: 30px 0; } .section-title h2, .section-title.center h2 { font-weight: 300; } .section-title.center .line { border-top: 4px solid #6EBC71; height: 10px; width: 60px; text-align: center; margin: 0 auto; margin-top: 20px; } .section-title.center hr { border-top: 4px solid rgba(91, 181, 95, 0.78); width: 40px; text-align: center; margin-top: 10px; position: relative; left: 17%; } #team { margin: 0 auto } #team .item { padding: 0; margin: 15px; color: #FFF; text-align: center; } img.img-circle.team-img { width: 120px; height: 120px; border: 4px solid transparent; transition: all 0.5s; } #tf-team .item .thumbnail:hover>img.img-circle.team-img { border: 4px solid #6EBC71; } #tf-team .thumbnail { background: transparent; border: 0; } #tf-team .thumbnail .caption { padding: 9px; color: #F2F2F2; } .owl-theme .owl-controls .owl-page span { display: block; width: 10px; height: 10px; margin: 5px 7px; filter: Alpha(Opacity=1); opacity: 1; -webkit-border-radius: 0; -moz-border-radius: 20px; border-radius: 0; background: #FFFFFF; transition: all 0.5s; } .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span { filter: Alpha(Opacity=100); opacity: 1; background: #6EBC71; } .owl-theme .owl-controls .owl-page.active span { background: #6EBC71; } /* Services Section */ #tf-services { padding: 80px 0; } .space { margin-top: 40px; } #tf-services i.fa { font-size: 40px; border: 4px solid #6EBC71; width: 100px; height: 100px; padding: 27px 25px; margin-bottom: 10px; border-radius: 50%; transition: all 0.5s; } #tf-services i.fa.fa-mobile { font-size: 50px; padding: 20px 25px; } #tf-services .service:hover>i.fa { background: #6EBC71; color: #ffffff; } /* Sponsors Section */ #tf-sponsors { background: url(/img/water.png); background-color: white; background-size: cover; background-position: left; background-attachment: fixed; background-repeat: no-repeat; color: #ffffff; } #tf-sponsors .overlay { background: rgba(26, 26, 26, 0.56); padding: 80px 0; background-attachment: fixed; } #tf-sponsors #clients { margin-top: 20px; margin-bottom: 20px; width: 100%; } #clients .item { padding: 0; margin: 3px; color: #FFF; text-align: center; } /* Gallery Section ==============================*/ #tf-gallery { padding: 80px 0; } .categories { padding: 10px 0; } ul.cat li { display: inline-block; } #tf-gallery li.pull-right { margin-top: 5px; } ol.type li { display: inline-block; margin-left: 5px; } ol.type li:after { content: ' | '; margin-left: 5px; } ol.type li:last-child:after { content: ''; } ol.type li a { color: #222222 } ol.type li a.active { font-weight: 700; } .isotope-item { z-index: 2 } .isotope-hidden.isotope-item { z-index: 1 } .isotope, .isotope .isotope-item { /* change duration value to whatever you like */ -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope-item { margin-right: -1px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .isotope { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; } .portfolio-item { margin-bottom: 30px; } .portfolio-item .hover-bg { height: auto; overflow: hidden; position: relative; } .hover-bg .hover-text { position: absolute; text-align: center; margin: 0 auto; color: #ffffff; background: rgba(0, 0, 0, 0.66); padding: 25% 0; height: 100%; width: 100%; opacity: 0; transition: all 0.5s; }
.hover-bg .hover-text>h4 { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); transition: all 0.3s; } .hover-bg:hover .hover-text>h4 { opacity: 1; -webkit-backface-visibility: hidden; -webkit-transform: translateY(0); transform: translateY(0); } .hover-bg .hover-text>i { opacity: 0; -webkit-transform: translateY(0); transform: translateY(0); transition: all 0.3s; } .hover-bg:hover .hover-text>i { opacity: 1; -webkit-backface-visibility: hidden; -webkit-transform: translateY(100%); transform: translateY(100%); } .hover-bg:hover .hover-text { opacity: 1; } #tf-gallery i.fa { height: 30px; width: 30px; border: 1px solid #6EBC71; font-size: 20px; padding: 5px; border-radius: 50%; color: #FCAC45; } 122 /* Contact Section */ #tf-contact { padding: 80px 0; }
#tf-contact .container { padding-bottom: 30px; } label { float: left; font-size: 12px; font-weight: 400; font-family: 'Open Sans', sans-serif; } #tf-contact .form-control { display: block; width: 100%; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 2px; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: none; -o-transition: none; transition: none; } #tf-contact .form-control:focus { border-color: inherit; outline: 0; -webkit-box-shadow: transparent; box-shadow: transparent; } button.btn.tf-btn.btn-default { float: right; background: #6EBC71; border: 0; border-radius: 0; padding: 10px 40px; color: #ffffff; text-transform: uppercase; } .btn:active, .btn.active { background-image: none; outline: 0; -webkit-box-shadow: none; box-shadow: fnone; } .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: thin dotted; outline: none; outline-offset: none; } /* Footer */ nav#footer, nav#footer a { background-color: #1c1c1c; color: #d6d6d6; padding:1% 0 2% 0; }
.container #onetwo { max-width: 350px; position: relative; margin: 0 auto; } } nav#footer .fnav { vertical-align: middle; } ul.footer-social li { display: inline-block; } nav#footer p { font-size: 12px; margin-top: 10px; } nav#footer a:hover { color: #6EBC71; -o-transition: .2s; -ms-transition: .2s; -moz-transition: .2s; -webkit-transition: .2s; } #footer i.fa { height: 30px; width: 30px; border: 2px solid #8c8c8c; font-size: 20px; padding: 4px 5px; border-radius: 50%; color: #8c8c8c; transition: all 0.5s; } #footer i.fa:hover { background: #6EBC71; border-color: #6EBC71; color: #ffffff;
|