@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700); @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap'); .clear{ clear:both; padding:0px; margin:0px; } a{ text-decoration:none; outline:none; transition: all 0.4s ease-out; } a:hover{ text-decoration:none; outline:none; } h1,h2,h3,h4,h5,h6{ font-family: 'Montserrat', san-serif; padding:0px; margin:0px; line-height:24px; } /* */ :root{ --main-color: #0a8574; --sec-color:#b9e769; --bg-color:#f2f0ed; --border-color:#e3e5e8; --heading:#202a30; --content-color:#2C2C29; } /* */ body{ margin:0px; padding:0px; font-family: 'Open Sans', sans-serif; font-weight:400!important; background-color:#0a8574; line-height:30px; text-align:left; font-size:15px; color:#3a3a3a; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } html{ scroll-behavior: smooth; } , html { height: 100%; margin: 0; } .container-fluid{ padding:0px; } a{ text-decoration:none; } .nomargin{ margin:0px; padding:0px; } ::-moz-selection { /* Code for Firefox */ color:#fff; background: var(--main-color); } ::selection { color:#fff; background: var(--main-color); } h1{ font-size: 24px; font-weight:700; } h2{ font-size: 20px; text-transform:uppercase; font-weight:400; color:#0a8574; } h3{ font-size: 18px; color:#2d3142; font-weight:400; } h4{ font-size: 16px; font-weight:400; } h5{ font-weight:400; font-size: 14px; } h6{ font-size: 14px; } p{ padding:8px 0; margin-bottom:8px; } section{ padding:60px 0; } section h1,section h2,section h3,section h4 , section h5 , section h6{ padding:0px 0 8px 0; margin:0px 0 8px 0; } section h1 { color:var(--main-color); border-bottom:1px solid #ccc; } section h2{ color:#0a8574; position:relative; font-weight:400; font-size:20px; z-index:11!important; } /* header */ header{ padding:12px 0; } header #topbar{ padding:8px 0; position:relative; background-color:#f4f2f3; } #topbar .social-links { } #topbar .social-links a{ color:#333138; margin-right:15px; font-size:16px; } #topbar .social-links a:hover{ color:var(--main-color); } #topbar .contact{ color:#5d576b!important; font-size:16px; font-weight:500; } #topbar .contact i{ color:var(--main-color); margin-right:8px; } #topbar .top-links{ padding:4px 0; font-size:14px; } #topbar .top-links ul { display:inline-block; margin:0px; padding:0px; } #topbar .top-links ul li{ display:inline-block; margin:0px; padding:0px; } #topbar .top-links a{ color:var(--sec-color); padding:0 4px; text-transform:uppercase; font-weight:500; } #topbar .top-links ul li:after{ content:"|"; color:#bbc1c6; } #topbar .top-links a:hover{ color:#BCAF9C; } /*Menu */ #menu{ background-color:#b9e769; font-size:13px; padding:6px 0; } .sticky{ position:fixed; width:100%; top:0; z-index:111; box-shadow:0 0px 4px -2px #000; } /* menu */ .navbar-nav>li>a{ color:#195511; margin-left:1px; display:block; text-transform:uppercase; } .navbar-nav>li:after{ content:""; width:10px; } .navbar-nav>li>a:hover{ color:#fff; } .navbar-nav>li{ text-transform:uppercase; font-weight:600; padding:0px 4px; } .navbar-nav>li>a { padding:0px; } .navbar-nav>li>a:focus{ background:none!important } .navbar-nav>li.active>a:before{ width: 100%; background: var(--sec-color); } .navbar-nav>li.active>a:hover:before { width: 100%; background: var(--sec-color); } #menu .dropdown-menu{ background-color:var(--main-color); color:#fff; padding:4px; -webkit-box-shadow: 0 10px 4px -6px #333; -moz-box-shadow: 0 10px 4px -6px #333; box-shadow: 0 10px 4px -6px #333; border-radius:0px 0px 8px 8px; } #menu .dropdown-menu li{ margin-bottom:4px; text-transform:none; } #menu .dropdown-menu li:last-child{ margin-bottom:0px; } #menu .dropdown-menu li a{ color:#fff; font-size:13px; padding:4px; font-weight:400; } #menu .dropdown-menu li:hover{ background:none; } #menu .dropdown-menu li a:hover{ background-color:var(--sec-color); color:#fff; } .navbar-toggle{ background-color:#072436!important; } /* Menu end*/ /*Slider */ .flex-control-nav{ width: 100%; position: absolute; bottom:40px; text-align:center; z-index:11; } .flexslider img{ -webkit-box-shadow: 0 10px 6px -6px #777 inset; -moz-box-shadow: 0 10px 6px -6px inset; box-shadow: 0 10px 6px -6px inset; } .slider_wrap{ } .slider_title{ font-family: 'Montserrat', san-serif; position:absolute; bottom: 30%; left:20px; z-index:111; width:50%; } .slider_title h2{ color:var(--sec-color); font-size:22px; -webkit-animation-delay: 1.4s; margin-bottom:5px; text-transform:none; line-height:30px; text-align:left; margin:4px 2px; display: inline-block; font-weight:700; padding:8px 2px; border-bottom:1px solid var(--sec-color); display:block } .slider_title h2 strong{ text-transform:uppercase; color:#f80002; font-size:32px; } @media screen and (max-width:700px){ .slider_title h2{ font-size:14px; display:none; } .slider_title{ width:100%; left:0; bottom:0; } } .slider_title h2 span{ color:#0cb8b6; } .slider_title h1{ color:var(--main-color); font-size:2.5em; -webkit-animation-delay: 0.4s; text-transform:uppercase; border-bottom:none; padding:0px; margin:0px; } .slider_title h2 em{ font-weight:400; font-style:normal; } .slider_title p{ font-size:16px; -webkit-animation-delay: 1.8s; text-transform:uppercase; border-bottom:none; padding:10px 0px; margin:4px 4px; color:#333333; text-transform:none; text-align:left; display:block; width: 400px; line-height:30px; } .slider_title a{ -webkit-animation-delay: 1.4s; } .slider_title a{ padding:8px 16px; color:#fff; border:1px solid transparent; background-color:#898072; font-size:14px; } .slider_title a:hover{ background-color:var(--main-color)!important; } #slider{ border-bottom:0px solid rgba(204, 204, 204, .5); padding:0px; margin:0px; } #slider .container{ position:absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; top:0; bottom:0; width:100%; } #slider ol{ } /* Slider*/ /*=-====Bootstrapthemes.co btco-hover-menu=====*/ .navbar-light .navbar-nav .nav-link { } .btco-hover-menu a , .navbar > li > a { } .btco-hover-menu .active a, .btco-hover-menu .active a:focus, .btco-hover-menu .active a:hover, .btco-hover-menu li a:hover, .btco-hover-menu li a:focus , .navbar>.show>a, .navbar>.show>a:focus, .navbar>.show>a:hover{ } /*submenu style start from here*/ .dropdown-menu { padding: 10px 0; margin: 0px 0 0; border: 0px solid transition !important; border: 0px solid rgba(0,0,0,.15); border-radius: 0px; -webkit-box-shadow: none !important; box-shadow: none !important; } /*first level*/ .btco-hover-menu .collapse ul > li:hover > a{} .btco-hover-menu .collapse ul ul > li:hover > a, .navbar .show .dropdown-menu > li > a:focus, .navbar .show .dropdown-menu > li > a:hover{} /*second level*/ .btco-hover-menu .collapse ul ul ul > li:hover > a{} /*third level*/ .btco-hover-menu .collapse ul ul, .btco-hover-menu .collapse ul ul.dropdown-menu{} .btco-hover-menu .collapse ul ul ul, .btco-hover-menu .collapse ul ul ul.dropdown-menu{} .btco-hover-menu .collapse ul ul ul ul, .btco-hover-menu .collapse ul ul ul ul.dropdown-menu{} /*Drop-down menu work on hover*/ .btco-hover-menu{background: none;margin: 0;padding: 0;min-height:20px} @media only screen and (max-width: 991px) { .btco-hover-menu .show > .dropdown-toggle::after{ transform: rotate(-90deg); } } @media only screen and (min-width: 991px) { .btco-hover-menu .collapse ul li{position:relative;} .btco-hover-menu .collapse ul li:hover> ul{display:block; } .btco-hover-menu .collapse ul ul{position:absolute;top:100%;left:0;min-width:250px;display:none; transition:top 1s linear!important;} /*******/ .btco-hover-menu .collapse ul ul li{position:relative} .btco-hover-menu .collapse ul ul li:hover> ul{display:block} .btco-hover-menu .collapse ul ul ul{position:absolute;top:0;left:100%;min-width:250px;display:none} /*******/ .btco-hover-menu .collapse ul ul ul li{position:relative} .btco-hover-menu .collapse ul ul ul li:hover ul{display:block} .btco-hover-menu .collapse ul ul ul ul{position:absolute;top:0;left:-100%;min-width:250px;display:none;z-index:1} } .dropdown-toggle::after { display:none!important; } /*flex */ .flex-direction-nav { *height: 0; } .flex-direction-nav a { text-decoration: none; display: block; width: 100px!important; margin: 0 0 0; position: absolute; top:70%!important; bottom: 20%!important; left:1%!important; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0, 0, 0, 1)!important; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .flex-direction-nav a:before { font-family: 'FontAwesome'!important; content: '\f104'!important; font-size: 40px; display: inline-block; color: rgba(0, 0, 0, 1)!important; text-shadow:none!important; } .flex-direction-nav a.flex-next:before { content: '\f105'!important; } .flex-direction-nav .flex-prev { } .flex-direction-nav .flex-next { right: 0px!important; text-align: right; } .flexslider:hover .flex-direction-nav .flex-prev { opacity: 1; right: 80px; } .flexslider:hover .flex-direction-nav .flex-prev:hover { opacity: 1; } .flexslider:hover .flex-direction-nav .flex-next { opacity: 1; right: 10px; } .flexslider:hover .flex-direction-nav .flex-next:hover { opacity: 1; } .flex-direction-nav .flex-disabled { opacity: 1!important; filter: alpha(opacity=1); cursor: default; z-index: -1; } .flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; } .flex-pauseplay a:before { font-family: "FontAwesome"; font-size: 20px; display: inline-block; content: '\f105'; } .flex-pauseplay a:hover { opacity: 1; } .flex-pauseplay a.flex-play:before { content: '\f105'!important; } .flex-control-nav { width:100px!important; position: absolute; top: 50%!important; right: 0%!important; } .flex-control-nav li { margin: 0 6px; display: block!important; zoom: 1; *display: block!important; } .flex-control-paging li a { width: 11px; height: 11px; display: block; background: #fff!important; cursor: pointer; text-indent: -9999px; -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 0, 0.3); -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; margin-bottom: 10px; } .flex-control-paging li a:hover { background: var(--sec-color)!important; background: rgba(0, 0, 0, 0.7); } .flex-control-paging li a.flex-active { background: #000; background: var(--sec-color)!important; cursor: default; } .flex-control-thumbs { margin: 5px 0 0; position: static; overflow: hidden; } .flex-control-thumbs li { width: 25%; float: left; margin: 0; } .flex-control-thumbs img { width: 100%; height: auto; display: block; opacity: .7; cursor: pointer; -moz-user-select: none; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .flex-control-thumbs img:hover { opacity: 1; } .flex-control-thumbs .flex-active { opacity: 1; cursor: default; } .flex-direction-nav a:before { font-family: "FontAwesome"!important; font-size: 40px; display: inline-block; content: '\f104'; color: rgba(255, 255, 255, 1); text-shadow: none; } figcaption{ color:var(--main-color); } #about{ background-color:#fff; position:relative; } #about h2{ border-bottom:1px solid #0a8574; } #about imgs{ z-index:11!important; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); border:1px solid red; } #about:after{ content:""; right:0; bottom:0; position:absolute; z-index:1; width: 0; height: 0; border-bottom: 120px solid #b9e769; border-left: 120px solid transparent; } #about:before{ content:""; right:0px; bottom:0px; position:absolute; z-index:1; width: 0; height: 0; border-bottom: 130px solid #0a8574; border-left: 130px solid transparent; } .poligon { display: inline-block; position: relative; width: 220px; height: 220px; background: #0a8574; box-sizing: border-box; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } .poligon img { position: absolute; top: 3px; /* equal to border thickness */ left: 3px; /* equal to border thickness */ width: 215px; /* container height - (border thickness * 2) */ height: 215px; /* container height - (border thickness * 2) */ clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); ; } footer{ background-color:#075248; color:#ffff; font-size:14px; padding:40px 0; } footer h5{ margin-bottom:8px; width:70%; color:#fff; border-bottom:1px solid #fff; padding-bottom:8px; text-transform:uppercase; } footer .links{ font-size:13px; } footer i{ font-size:18px!important; } footer hr{ background-color:#b9e769; width:100%; height:1px; border:none; } footer .links ul{ padding:0px; margin:0px; display:inline; } footer .links ul li{ list-style:none; padding:0 0px; margin:0 0px; margin-right:6px; display:inline; } footer .bottom{ font-size:16px; margin-top:12px; border-top:2px solid rgba(0,0,0,0.2); padding-top:16px; } footer img{ width:18px; height:auto; } footer .social span{ margin-right:12px; } footer a{ color:#fff; } footer a:hover{ color:rgba(255,255,255,0.4)!important; } footer .social{ } footer .social a{ font-size:22px; border:1px solid #000; padding:8px 16px; text-align:center; } footer a:hover{ color:rgba(255,255,255,1); } footer .reach{ font-size:16px; } footer .reach i{ font-size:20px; padding:4px 8px; width:40px; height:40px; text-align:center; line-height:34px; } footer .reach div{ margin-bottom:4px; border:1px solid #000; width:80%; } .footer-bottom{ background-color:#464646; padding:16px 0; text-align:center; color:#e0e0e0; } /* ==================================================================================================================== * RESPONSIVE * ====================================================================================================================*/ @media screen and (max-width: 860px) { .flex-direction-nav .flex-prev { opacity: 1; left: 10px; } .flex-direction-nav .flex-next { opacity: 1; right: 10px; } } .move-top{ width:40px; height:40px; background-color:var(--main-color); position:fixed; bottom:20px; right:0; text-align:center; border-radius:8px 0px 0px 8px; transition:background 0.2s ease-out; display:none; } .move-top:hover{ background-color:var(--sec-color); box-shadow:0px 10px 10px -10px #333; } .move-top i{ color:#fff; font-size:20px; display:block; line-height:40px; } .hang-icon{ } .hang-icon{ width:40px; height:40px; background-color:var(--main-color); position:fixed; bottom:50%; right:left; border-radius:0px 8px 8px 0px; transition:all 0.5s ease-out; white-space:nowrap; color:#fff; overflow:hidden; z-index:111; text-transform:uppercase; } .call-icon{ bottom:44%; } .hang-icon span{ } .hang-icon:hover{ background-color:var(--sec-color); box-shadow:0px 10px 10px -10px #333; width:250px; cursor:pointer; } .hang-icon i{ color:#fff; font-size:20px; line-height:40px; margin:0px 20px 0px 10px; } /*Contact Form */ #contact-form{ } #contact-form label{ display:block; color:var(--heading); margin:4px 0px; font-weight:600; text-transform:uppercase; } #contact-form input[type="text"],#contact-form textarea , #contact-form input[type="email"]{ width:100%; border:none; border-bottom:1px solid var(--main-color); outline:none; transition:all 0.3s linear; } #contact-form input[type="text"]:focus, #contact-form textarea:focus{ border-bottom:1px solid var(--sec-color); } #contact-form input[type="submit"]{ background-color:#075248; color:#fff; padding:8px 16px; border:none; transition:all 0.3s linear; } #contact-form input[type="submit"]:hover{ background-color:var(--main-color); } .call{ border-bottom:1px solid rgba(0,0,0,0.1); border-top:1px solid rgba(0,0,0,0.1); padding:8px 0; } .call i{ margin-right:6px; font-size:16px; } .divider-top{ border-top:1px solid #DEE0E5; position:relative; } .divider-top:before{ content:""; width:100%; height:3px; position:absolute; top:0; background-color:#EFF2F6; z-index:-1; } @media screen and (max-width:700px){ #about{ margin-top:16px!important; } #donate-volunter .card{ top:0px; margin-bottom:16px; margin-top:16px; } } #news{ font-weight:500; } #news div{ } #news ul{ padding:0px; margin:0px; } #news li{ list-style:none; border-bottom:1px solid #ccc; } #news .title{ color:#383a8f; } #news p{ color:#5e5e5e; margin-top:0px; padding-top:0px; } .readmore{ font-weight:500; margin-top:8px; padding-top:2px; } .readmore i{ background-color:var(--main-color); color:#fff; width:20px; height:20px; text-align:center; line-height:20px; margin-left:4px; } .readmore a{ color:#fff; display:inline-block; max-width:150px; background-color:var(--sec-color); padding:2px 18px; } .readmore a:hover{ background-color:var(--main-color); color:#fff; } #tempo{ background:url(../images/tempo_bg.jpg) no-repeat center center; padding:40px 0; background-size:cover; } #tempo h2{ font-size:28px; line-height:40px; width:80%; text-align:center; padding:10px; margin:0 auto; color:#fff; } #middle-section{ background:url(../images/middle-bg.jpg) no-repeat center center; background-size:cover; } #middle-section .bx{ background-color:#383a8f; color:#fff; padding:12px; } #middle-section .bx h4{ color:var(--sec-color); border-top:1px solid var(--sec-color); } #star{ color:#585a58 } #star img{ background-color:#a45197; padding:4px; } #star .title{ border-bottom:1px solid #585a58 } #infra{ background-color:#f5f5f5 } #infra .bx{ background-color:#ece5f0; max-width:300px; margin:8px; color:#543e5f; padding:0px; } #infra .bx img{ } #infra .bx p{ padding:0px; padding-left:4px; } #tempo{ background:url(../images/tempo.jpg) no-repeat center center; background-size:cover; position:relative; color:var(--sec-color); padding:80px 0; line-height:60px; } #tempo:before{ content:""; width:100%; height:100%; background-color:#46344f; top:0; position:absolute; opacity:0.9; } #tempo .text{ font-size:21px; } #promo{ color:#fff; font-family: 'Montserrat', sans-serif; font-size:3.5em; position:relative; z-index:1; display:block; background:url(../images/prmo-bg.jpg) no-repeat center center; background-size:cover; width:100%; height:100%; line-height:50px; text-transform:uppercase; text-shadow: 0px 2px 8px #3b3d24; } #promo span{ text-transform:none; } #promo h4{ display:block; vertical-align:middle; width:100%; height:100%; } .admission{ font-family: 'Montserrat', sans-serif; } .admission a{ background-color:var(--sec-color); padding:8px 16px; color:#fff; font-size:16px; border:1px solid #fff; text-transform:uppercase; } .admission a:hover{ background-color:var(--main-color); color:#fff; } #why { background-color:#fefdff; font-family: 'Merriweather', serif; } #why h2 span{ padding:0 12px!important; background-color:#fefdff; } #why h3{ font-size:16px; margin-top:8px; padding:16px 0px; border-bottom:1px solid #451f55; } #testimonials{ background-color:#efeff1; } #testimonials .name { color:var(--main-color) } #testimonials h2 span{ background-color:#efeff1; padding-left:0px; } #front-cr{ background-color:#68498f; font-family: 'Merriweather', serif; font-size:13px; } #front-cr h2{ color:#fff; position:relative; font-weight:700; z-index:11!important; } #front-cr h2:before{ content:""; position:absolute; width:100%; height:2px; top:35%; z-index:-2!important; right:0; border-bottom:1px solid #fff; } #front-cr .bx{ background-color:#fff; min-height:310px; } #front-cr .bx img{ max-width:96%; height:auto; object-fit:cover; } #front-cr .bx div:nth-child(2){ padding:10px; padding-top:14px; } #front-cr span{ background-color:#68498f; padding:0px 18px; } #front-cr h4{ color:#ec6060; font-size:18px; } #front-cr ul { list-style:none; margin:0px; padding:0px; } #front-cr ul li { list-style:none; margin:8px 0px; padding:0px; } #front-cr ul li a { list-style:none; color:#382d40; } #front-cr ul li a:hover { color:var(--main-color); } #front-cr ul li:before{ font-family: 'FontAwesome'!important; content: '\f105'!important; font-size:18px; margin-right:8px; } .inner-content{ text-align:justify; font-size:14px; } .inner-content h2{ border-bottom:1px solid #0a8574; } #leftmenu{ } #leftmenu ul{ padding:0px; margin:0px; } #leftmenu ul li{ padding:0px 0; margin:0px 0; list-style:none; } #leftmenu ul li a{ color:var(--sec-color); display:block; border-bottom:1px solid #ccc; padding:6px 0; margin:6px 0; } #leftmenu ul li a:before{ font-family: 'FontAwesome'!important; content: '\f105'!important; font-size:20px; margin-right:8px; margin-left:8px; color:var(--main-color); } #leftmenu ul li a:hover{ background-color:var(--main-color); color:#fff; } #leftmenu ul li a:hover:before{ color:#fff; } #bread{ background-color:#f5f5f9; padding:8px 0; margin:0px; text-align:right; font-size:13px; } #bread a{ color:#737373; } #bread a:hover{ color:var(--main-color); } #blog .bx{ position:relative; padding:20px; } #blog .bx:before{ content:""; width:150px; height:150px; border-top:2px solid var(--main-color); border-right:2px solid var(--main-color); position:absolute; right:-10px; } #blog .bx img{ } #blog .bx div{ } #blog .bx h4{ padding-top:16px; color:var(--main-color); font-size:20px; } #blog .readmore a{ background:none; color:var(--sec-color); text-transform:uppercase; font-weight:400; font-size:13px; border:1px solid var(--sec-color); } #blog .readmore{ position:absolute; right:-14px; } #blog .readmore a:hover{ color:#fff; background-color:var(--main-color); border:1px solid var(--main-color); } .gallery div{ width:250px; margin:4px; position:relative; } .gallery div.overlay { position: absolute; top: -4px; bottom: 0; left: -4px; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: #000; z-index:11111; } .gallery div:hover.overlay { position: absolute; top: -4px; bottom: 0; left: -4px; right: 0; height: 100%; width: 100%; opacity: 0.4; transition: .5s ease; background-color: #000; z-index:1; } .galleryimg:hover .overlay { opacity: 0.5; } .gallery div.zoomicon { color: white; font-size: 20px; position: absolute; opacity:0; z-index:111111; } .gallery div:hover .zoomicon { color: white; font-size: 20px; position: absolute; top: 40%; left: 0; text-align: center; transition: .5s ease; opacity:1; } .zoomicon i{ color:var(--orange); background-color:#fff; padding:15px; background-color:#fff; border-radius:50px; } .sectionbg{ background:url(../images/bg1.jpg) repeat; } #act{ background:url(../images/bg1.jpg) repeat; } #act .bx{ background-color:#68d181; position:relative; width:100%; min-height:230px; max-height:230px; overflow:hidden; } #act .bx h2{ color:#fff; display:block; position:absolute; top: 50%; left:50%; transform: translateY(-50%); transform: translateX(-50%); width:100%; height:auto; text-align:center } #act .bx h3{ display:inline-block; position:absolute; bottom:10px; height:auto; background-color:#83e377; color:#044d43; padding:8px 20px; font-size:15px; z-index:1; } #act .bx img{ position:absolute; width:100%; height:auto; opacity:0.9; filter: grayscale(20%); transition: all 0.3s; } #act .bx:hover img{ filter: grayscale(0%); opacity:1; transform: scale(1.2); } #act .bg{ background-image: linear-gradient(to bottom right, #83e377, #048ba8); } .getin{ font-size:18px; font-weight:600; background-color:#fff; width:90%; background:url(../images/hand.jpg) no-repeat center bottom; min-height:320px; position:relative; background-color:#ececec; } .getin h2{ color:#0a8574; border-bottom:1px solid rgba(0,0,0,0.2); display:inline-block; width:80%; } .getin a{ color:#3c3c3c; display:block; } .getin:after{ content:""; right:0; bottom:0; position:absolute; z-index:1; width: 0; height: 0; border-bottom: 120px solid #b9e769; border-left: 120px solid transparent; } .getin div{ position:absolute; width:100%; top:50%; transform: translateY(-50%); left:16px; } .getin:before{ content:""; right:0px; bottom:0px; position:absolute; z-index:1; width: 0; height: 0; border-bottom: 130px solid #0a8574; border-left: 130px solid transparent; } .list ul{ margin:0px; padding:0px; } .list ul li{ margin:0 0 8px 0; padding:0px; list-style:none; } #member{ padding-top:0px; margin-top:0px; } #member .bx{ background-color:#fff; padding:20px; text-align:center; position:relative; } #member .bx h5{ color:#075248; border-bottom:1px solid rgba(0,0,0,0.2); } #member .bx:after{ content:""; right:0; bottom:0; position:absolute; z-index:1; width: 0; height: 0; border-bottom: 50px solid #b9e769; border-left: 50px solid transparent; } #member .bx:before{ content:""; right:0px; bottom:0px; position:absolute; z-index:1; width: 0; height: 0; border-bottom: 60px solid #0a8574; border-left: 60px solid transparent; } .btns{ } .btns a{ background-color:#075248; color:#fff; padding:4px 18px; border-radius:12px; } .btns a:hover{ background-color:#0a8574; } .error{ color:red!important; font-size:12px; } .figure{ position:relative; float:left; } .figure img{ z-index:22; border-right:4px solid #b9e769; border-bottom:4px solid #b9e769; } .mfp-wrap { z-index:1111111!important; } .live-btn{ position:fixed; left:0px; bottom:20%; width:150px; text-transform:uppercase; font-size:16px; z-index:111; font-weight:600; } .live-btn a{ display:block; background-color:#da1301; color:#fff; padding:8px 16px; } .live-btn a i{ margin-right:4px; } .live-btn a:hover{ background-color:#93b94c; } .no-fix{ position:relative; top:0; width:100%; } .view-button a{ background-color:var(--main-color); display:inline-block; padding:8px 12px; color:#fff; font-size:16px; text-transform:uppercase; } .view-button a:hover{ background-color:#363230; }