@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,500,600,700&display=swap); @import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400,700&display=swap'); .clear{ clear:both; padding:0px; margin:0px; } *{ margin:0px; padding: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', sans-serif; padding:0px; margin:0px; line-height:24px; font-weight:500; } /* */ :root{ --main-color: #153266; --sec-color:#f45d01; --bg-color:#f2f0ed; --border-color:#e3e5e8; --heading:#202a30; --content-color:#2C2C29; } /* */ body{ margin:0px; padding:0px; font-family: 'Arimo', sans-serif; font-weight:400!important; background-color:#fff; line-height:30px; text-align:left; font-size:16px; color:#48525B; -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; margin: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:700; } h3{ font-size: 18px; color:#2d3142; font-weight:400; } h1 span ,h2 span,h3 span{ } 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:40px 0; } section h1,section h2,section h3,section h4 , section h5 , section h6{ padding:0px 0 8px 0; margin:0px 0 8px 0; } section h2{ color:#1d1e2c; position:relative; font-weight:500; z-index:11!important; padding-bottom:8px; margin-bottom:20px } section h2:before{ content:""; position:absolute; width:65%; height:3px; bottom:0; z-index:-2!important; left:0; background-color:var(--main-color); border-right:100px solid var(--sec-color); } section h2 span{ background-color:#fff; padding-right:4px; } /* header */ header{ background-color:#fff; padding:20px 0; } header:before{ position:absolute; width:100%; height:4px; background: linear-gradient(90deg, var(--main-color) 50%, var(--sec-color) 50%); content:""; top:0px; } /*Menu */ #menu{ background-color:var(--main-color); font-size:13px; padding:8px 0; font-family: 'Roboto', sans-serif; } .sticky{ position:fixed; width:100%; top:0; z-index:111; box-shadow:0 0px 4px -2px #000; } /* menu */ .navbar-nav>li>a{ color:#ffff; margin-left:1px; display:block; font-size:13px; text-transform:uppercase; } .navbar-nav>li:after{ content:""; width:10px; } .navbar-nav>li>a:hover{ } .navbar-nav>li{ text-transform:uppercase; font-weight:700; padding:0px 4px; } .navbar-nav>li>a:hover{ color:var(--sec-color); } .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{ position:absolute; bottom: 30%; left:8px; z-index:111; width:50%; } .slider_title h2{ color:#fff; 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:500; padding:6px 8px; display:block; background-color:var(--sec-color); text-transform:uppercase } .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; left: 8%!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:#f4f5f4; padding-top:20px; padding-bottom:20px; } #about .img img{ z-index:11!important; } #about .img{ position:relative; } #about .img:before{ content:""; width:50%; height:50%; position:absolute; bottom:-2px; right:-2px; border-right:6px solid var(--sec-color); border-bottom:6px solid var(--sec-color); } #about .img:after{ content:""; width:50%; height:80%; position:absolute; top:-2px; left:-2px; border-left:6px solid var(--main-color); border-top:6px solid var(--main-color); } footer{ background-color:#071122; color:#faf5f4; font-size:14px; padding:0px 0px 20px 0px; position:relative; } footer img{ width:22px; height:auto; margin-right:4px; } footer:before{ position:absolute; width:100%; height:4px; background: linear-gradient(90deg, var(--main-color) 50%, var(--sec-color) 50%); content:""; top:0px; } footer h5{ margin-bottom:8px; width:70%; color:#a1b5d8; border-bottom:1px solid #a1b5d8; padding-bottom:8px; text-transform:uppercase; } footer .links{ font-size:13px; } footer i{ font-size:18px!important; } footer .links ul{ padding:0px; margin:0px; } footer .links ul li{ list-style:none; padding:0px; margin:0px; } footer .top-border{ border-top:1px solid #a1b5d8; } footer .social img{ width:22px; 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-top{ background-color:#0a1933; padding:8px 0; text-align:center; color:#e0e0e0; text-transform:uppercase; font-weight:600; font-family: 'Open Sans', sans-serif; font-size:13px; } .footer-top ul{ padding:0px; margin:0px; } .footer-top ul li{ display:inline-block; } .footer-top ul li:after{ content:"|"; padding:0 4px; } .footer-top ul li:last-child:after{ content:""; } /* ==================================================================================================================== * 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(--main-color); margin:4px 0px; font-weight:600; text-transform:uppercase; font-size:14px; } #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; } .error{ color:red!important; font-size:12px!important; } #contact-form input[type="text"]:focus, #contact-form textarea:focus{ border-bottom:1px solid var(--sec-color); } #contact-form input[type="submit"]{ background-color:var(--sec-color); 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{ padding-top:20px; padding-bottom:20px; } #news div{ } #news ul{ padding:0px; margin:0px; } #news li{ list-style:none; border-bottom:1px solid #ccc; } #news ul li a{ display:block; padding:14px 0; color:#414141; font-size:16px; border-bottom:1px solid rgba(231,19,109,0.2); font-weight:600; } #news ul li a strong{ color:#e7136a; } #news .title{ color:#383a8f; } #news p{ color:#5e5e5e; margin-top:0px; padding-top:0px; } .readmore{ font-weight:500; font-size:13px; position:relative; margin-right:40px; } .readmore a{ color:#fff; display:inline-block; background-color:var(--sec-color); padding:1px 18px; } .readmore a:hover{ background-color:var(--main-color); } /*Why Us */ #whyus{ background-image: linear-gradient(to right, #fff 50% ,#1a3d7d 50%); position:relative; } .list{ } .list ul{ } .list ul li{ color:var(--main-color); list-style:none; margin-bottom:4px; font-weight:500; } .list ul li:before{ font-family: 'FontAwesome'!important; content: '\f105'!important; font-size:18px; margin-right:8px; color:var(--sec-color); } /*Why Us/ */ /* Founder */ #founder{ padding:16px; color:#fff; position:relative; } #founder h2{ color:#fff; margin-bottom:4px; padding-bottom:4px; } #founder h2:before{ height:0px; } #whyus .title{ background-color:var(--sec-color); font-family: 'Montserrat', Sans-serif; font-size:18px; text-transform:none; padding:8px 12px; position:absolute; width:80%; left:-15px; bottom:-56px; line-height:20px; } @media screen and (max-width:700px){ #whyus{ background-image:none; position:relative; background-color:#f4f4f4; } #founder .title{ left:0px; right:0px; bottom:0px; position:relative; display:block } } /* */ #tempo{ padding:40px 0; font-family: 'Montserrat', Sans-serif; background-image:url(../images/tempo.jpg); background-size:cover } #tempo a{ color:#fff; } #tempo h2{ font-size:28px; line-height:40px; width:80%; text-align:center; padding:10px; margin:0 auto; color:#fff; } #infra{ background-color:#f4f5f4; } #infra .bx{ margin:8px; color:#543e5f; padding:0px; position:relative; background-color:#ccc; overflow:hidden; } #infra .bx img{ width:100%; transition: all 0.3s linear; } #infra .bx:hover img{ transform: scale(1.1); } #infra .bx h6{ background-color:#7d45c1; color:#fff; text-align:center; text-transform:uppercase; padding:8px; clip-path: ellipse(50% 100% at 50% 100%); position:absolute; width:100%; bottom:-8px; right: 0; left: 50%; transform: translate(-50%, 0); } #infra .bx p{ } #tempo{ font-family: 'Montserrat', sans-serif; position:relative; color:#fff; font-size:18px; text-transform:uppercase; padding:80px 0; margin:0px; } #tempo h4{ font-size:26px; } #tempo h5{ font-size:20px; background-color:var(--sec-color); display:inline-block; padding:8px 22px 8px 8px; } @media screen and (max-width: 800px) { } #promo{ color:#fff; 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:var(--main-color); } #why h3{ font-size:16px; margin-top:8px; padding:16px 0px; border-bottom:1px solid var(--sec-color); } #testimonials{ background-color:#efeff1; } #testimonials .name { color:var(--main-color) } #testimonials h2 span{ background-color:#efeff1; padding-left:0px; } #inner-content .content{ text-align:justify; font-size:16px; } #inner-content .content h4{ font-size:16px; color:var(--sec-color); text-transform:uppercase; } /*mobile_menu */ .mobile_menu { height: 100%; width: 0; position: fixed; z-index: 2147483638; top: 0; left: 0; background-color: var(--main-color); overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .mobile_menu li{ padding:4px; } .mobile_menu li a { padding: 0px; padding-left: 4px; text-decoration: none; font-size: 13px; color: #fff; display: block; transition: 0.3s; border-bottom:1px solid rgba(255,255,255,0.1); margin-bottom:2px; } .mobile_menu li a:hover { color: #f1f1f1; background-color:var(--sec-color); } .mobile_menu ul li ul{ display: none; } .mobile_menu ul li ul li ul{ list-style: none; } .mobile_menu .menu-item-has-children{ position: relative; } .mobile_menu .menu-item-has-children:after{ position:absolute; content: "\f107"; font-family: 'FontAwesome'; font-size: 16px; top:0; color: #fff; font-weight: 700; right: 25px; } .mobile_menu ul li:hover ul{ display: block; } .mobile_menu .closebtn { position: absolute; top: 10px; right: 25px; font-size: 20px; margin-left: 50px; color:var(--sec-color); z-index: 11; } @media screen and (max-height: 450px) { .mobile_menu {padding-top: 15px;} .mobile_menu a {font-size: 18px;} } .menu-toogle{ background: var(--main-color); color:#fff; width: 100%; text-align: right; padding: 4px; font-size: 16px; padding-right:40px; display: none; } @media screen and (max-width: 700px) { .menu-toogle{ display: block; } .grecaptcha-badge{ visibility: collapse !important; } .move-top{ bottom:0px; left:0px; } } #leftmenu{ text-transform:uppercase; font-size:14px; } #leftmenu ul li{ list-style:none; color:#fff; margin-bottom:2px; padding:0px; } #leftmenu ul li a{ background-color:var(--main-color); color:#fff; display:block; clip-path: polygon(0 0, 100% 0, 96% 100%, 0% 100%); position:relative; } #leftmenu ul li a:before{ content:""; width:25px; height:100%; background-color:var(--sec-color); color:#fff; clip-path: polygon(52% 0, 100% 0, 96% 100%, 0% 100%); position:absolute; right:0; top:0; } #leftmenu ul li a:hover,#leftmenu .active a{ background-color:var(--sec-color); } #gallery{ } #gallery .bx{ padding:4px; background-color:#f4f4f4; overflow:hidden; transition: all 0.4s ease-out; border:4px solid transparent; } #gallery .bx img{ transition: all 0.4s ease-out; } #gallery .bx:hover { border:4px solid var(--sec-color); } #gallery .bx:hover img{ transform: scale(1.1); } .bigtext{ font-size:22px!important; color:var(--sec-color)!important; font-weight:600; } .btns a{ background-color:var(--sec-color); color:#fff; padding:8px 16px; border:none; transition:all 0.3s linear; } .live-btn{ position:fixed; left:0px; bottom:20%; width:180px; text-transform:uppercase; font-size:15px; 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; } .box{ border:1px solid rgba(0,0,0,0.1); padding:20px; }