/************************************************************ 1.google fonts ************************************************************/ @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Ubuntu:400,500,700'); @import url('http://fonts.cdnfonts.com/css/aerologica'); @import url('https://fonts.googleapis.com/css?family=Arbutus'); @import url('https://fonts.googleapis.com/css?family=Antonio'); @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500&display=swap'); @font-face { font-family: josevine; src: url(../webfonts/jose1.ttf); } /************************************************************ 2.normalize ************************************************************/ html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: 'Josefin Sans', sans-serif; } body { font-size: 16px; margin: 0; color: rgba(49, 50, 58, 0.7); width:100%; overflow-x: hidden; /* font-family: 'Open Sans', sans-serif; */ font-family: 'Josefin Sans', sans-serif; } h1 { font-size: 46px; line-height: 1.0833333333333333; } h2 { font-size: 35px; line-height: 1.4444444444444444; } h3 { font-size: 26px; line-height: 1.0833333333333333; } h4 { font-size: 20px; line-height: 1.2380952380952381; } .text-red{ color: #ff0031 !important; } h1, h2, h3, h4, h5, h6 { /* color: #31323a; */ font-weight: 700; font-family: 'Josefin Sans', sans-serif; } p { font-size: 16px; color: #31323a; line-height: 1.625; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } a { color: #31323a; text-decoration: none; } a, a:hover, a:focus, a:active { text-decoration: none; outline: none; } a i { padding: 0 2px; } img { max-width: 100%; } /*input and button type focus outline disable*/ input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="number"]:focus, textarea:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, select:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; border: 1px solid #ddd; } /* Video Play icon effect Start*/ .video-play-btn { display: inline-block; width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 18px; background-color: #fff; border-radius: 50%; position: relative; z-index: 1; } .video-play-btn:before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); display: block; width: 60px; height: 60px; background: rgba(255, 255, 255, 0.8); border-radius: 50%; -webkit-animation: pulse-border 1500ms ease-out infinite; animation: pulse-border 1500ms ease-out infinite; z-index: -1; } .video-play-btn i { color: #ff0031; -webkit-animation-duration: 5s; -moz-animation-duration: 5s; -o-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: text-color; -moz-animation-name: text-color; -o-animation-name: text-color; animation-name: text-color; -webkit-animation-direction: alternate; -moz-animation-direction: alternate; animation-direction: alternate; -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; position: inherit; z-index: 9; } @-webkit-keyframes pulse-border { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.3); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.3); opacity: 0; } } @-moz-keyframes pulse-border { 0% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.3); opacity: 0; } } @-o-keyframes pulse-border { 0% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.3); opacity: 0; } } @keyframes pulse-border { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.3); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.3); opacity: 0; } } /* Video Play icon effect End*/ /* Section heading Area Start */ .section-title { margin-bottom: 58px; text-align: center; } .section-title.extra-padding {} .section-title .title { font-size: 40px; line-height: 50px; margin-bottom: 12px; color: #fff; text-transform: uppercase; } .section-title.bg-white .title { color: #333; } .section-title .text { font-size: 16px; line-height: 26px; color: #fff; margin-bottom: 0px; } .section-title.bg-white .text { color: #31323a; } .section-title .title span { color: #ff0031; } .section-title .sub-title { font-size: 20px; line-height: 30px; text-transform: uppercase; margin-bottom: 12px; } /* Section heading Area End */ /************************************************************ 3.alignment ************************************************************/ .alignleft { float: left; } .alignright { float: right; } .aligncenter { clear: both; display: block; margin: 0 auto 1.75em; } ul { margin: 0; padding: 0; list-style: none; } /************************************************************ 4.global ************************************************************/ .remove-col-padding { padding: 0; } .boxed-btn { display: inline-block; padding: 15px 35px; border-radius: 25px; text-transform: uppercase; color: #fff; background-color: #ff0031; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .boxed-btn:hover { color: #fff; } .back-to-top { position: fixed; width: 45px; height: 60px; right: 30px; bottom: 40px; border-radius: 23px; background-color: #ff0031; z-index: 9; cursor: pointer; } .back-to-top .icon { position: relative; } .back-to-top .icon img { position: absolute; left: 50%; top: 8px; -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); } .slicknav_menu { display: none; } /************************************************************ 5.preloader ************************************************************/ #preloader { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999; background: rgba(0, 0, 0, 0.4); /*background-color: #4b47fd;*/ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .spinner { /*width: 40px; height: 40px;*/ width: 350px; height: 350px; margin: 100px auto; background-color: #fff; border-radius: 100%; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out; } @-webkit-keyframes sk-scaleout { 0% { -webkit-transform: scale(0); } 100% { -webkit-transform: scale(1); opacity: 0; } } @keyframes sk-scaleout { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } /************************************************************ 6.support bar area ************************************************************/ .support-bar { padding-top: 15px; padding-bottom: 10px; } .support-bar .support-bar-left { display: flex; } .support-bar .support-bar-left .languages { position: relative; padding-right: 10px; } .support-bar .support-bar-left .languages:after { position: absolute; left: 97%; top: 2px; content: '\f0d7'; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #fff; cursor: pointer; font-size: 14px; } .support-bar .support-bar-left .languages select { border: none; font-size: 14px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; color: #fff; cursor: pointer; } .support-bar .support-bar-left .languages select option { color: #000; } .support-bar .support-bar-left .follow-us { display: flex; margin-left: 18px; } .support-bar .support-bar-left .follow-us .title { font-size: 14px; line-height: 24px; color: #fff; margin-right: 7px; } .support-bar .support-bar-left .follow-us .social-links { flex: 1; } .support-bar .support-bar-left .follow-us li { display: inline-block; } .support-bar .support-bar-left .follow-us li a { color: #fff; padding: 0px 7px; font-size: 14px; } .support-bar .support-bar-right { text-align: right; } .support-bar .support-bar-right ul { display: inline-block; } .support-bar .support-bar-right ul li { display: inline-block; margin-right: 10px; } .support-bar .support-bar-right ul li:last-child { margin-right: 0px; } .support-bar .support-bar-right ul li a { font-size: 14px; color: #fff; } /*--------------------------- ** Main Menu Area Start ---------------------------*/ .navigation .navbar { background: transparent; border-radius: 0px; color: #000; } .owl-carousel{ z-index: 0; } .navigation.stiky-nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; /*background: #fff;*/ background:#000; border-bottom: 0px; -webkit-box-shadow: 0px 5px 20px rgba(36, 36, 36, 0.12); -moz-box-shadow: 0px 5px 20px rgba(36, 36, 36, 0.12); box-shadow: 0px 5px 20px rgba(36, 36, 36, 0.12); } .navigation .navbar { padding: 0px 15px 0px; transition: .5s; } .navigation .navbar .navbar-brand { margin-top: -2px; color: #242424; } .navigation .navbar .navbar-brand img { width: 180px; transition: .5s; } .navigation .navbar #mainmenu ul .nav-item .nav-link { color: #ff0031; position: relative; /* font-weight: 800; font-size: 18px;*/ /* font-weight: 700; */ font-size: 16px; text-transform: uppercase; /*padding: 25px 10px 25px;*/ padding: 25px 8px 25px; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .navigation .navbar #mainmenu ul .nav-item .nav-link:hover{ color:#ff0031; } .navigation .navbar #mainmenu ul .nav-item.active .nav-link{ color:#ff0031; } .navigation .navbar #mainmenu ul .nav-item.dropdown:hover .dropdown-menu { display: block; padding: 0px; margin-top: 0px; border: 0px; font-size: 14px; text-transform: uppercase; border-radius: 0px; -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.06); box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.06); } .navigation .navbar #mainmenu ul .nav-item.dropdown:hover .dropdown-menu .dropdown-item { background: #fff; padding: 10px 20px; font-weight: 600; border-bottom: 1px solid rgba(0, 0, 0, 0.185); -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .navigation .navbar #mainmenu ul .nav-item.dropdown:hover .dropdown-menu .dropdown-item:hover { background: #ddd; } .navigation .navbar #mainmenu ul .nav-item.dropdown:hover .dropdown-menu .dropdown-item:last-child { border-bottom: 0px; } /*--------------------------- ** Main Menu Area End ---------------------------*/ /************************************************************ 9.header area ************************************************************/ .heder-slider-area { background-color: #ddd; position: relative; z-index: 1; } .heder-slider-area .overlay { position: absolute; content: " "; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0 0 0); /*opacity: 0.90;*/opacity: 0.70; } .sports-football.header-bg{ background-image: url(../img/football1.jpg) !important; } .sports-baseball.header-bg{ background-image: url(../img/baseball2.jpg)!important; background-size: cover; left:0px; background-position: center!important; } .sports-basketball.header-bg{ background-image: url(../img/basketball1.jpg) !important; } .sports-hockey.header-bg{ background-image: url(../img/hockey1.jpg) !important; } .sports-soccer.header-bg{ background-image: url(../img/soccer.jfif) !important; } .choose_sport_bg{ background-image: url(../img/teamxy.jpg) !important; background-size: cover !important; } .heder-slider-area.header-bg { background-image: url(../img/teamxy.jpg); background-size: cover; background-position: center; } .heder-slider-area:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; background-color: rgb(0 0 0); /* opacity: .85;*/opacity: 0.60; z-index: -1; } .heder-slider-area .right-image { position: absolute; right: 0; z-index: 2; bottom: 0 } .heder-slider-area .bottom-shape { position: absolute; bottom: -10px; left: 0; width: 100%; z-index: 1; } .heder-slider-area .bottom-shape img { width: 100%; } .heder-slider-area .single-slider-area { /*padding-top: 75px;*/padding-top: 0px; padding-bottom: 140px; } .heder-slider-area .single-slider-area .title { color: #fff; margin-bottom: 15px; font-size: 50px; line-height: 60px; } .heder-slider-area .single-slider-area .subtitle { color: #fff; font-weight: 500; font-size: 62px; line-height: 34px; color: #0059ba; margin-bottom: 12px; text-transform: uppercase; text-shadow: 0px 2px 0px #FFF; font-family: 'Antonio', sans-serif;/*text-shadow: 2px 2px 5px #fff*/ } /*.heder-slider-area .single-slider-area .subtitle span.readable-bg {background:#000; padding:3px 8px; border-radius:8px;}*/ .heder-slider-area .single-slider-area h1 span { color: #ff0031; } .heder-slider-area .single-slider-area .subtitle2 { color: #fff; text-align:center; font-weight: 500; font-size: 72px; line-height: 34px; color: #2185c7; margin-bottom: 12px; text-transform: uppercase; text-decoration:underline; text-shadow: 0px 2px 0px #FFF; font-family: 'Antonio', sans-serif;/*text-shadow: 2px 2px 5px #fff*/ } /*.heder-slider-area .single-slider-area .subtitle2::after { background: #2185c7 none repeat scroll 0 0; bottom: 0; content: ""; height: 4px;left:35%; position: absolute; width:235px; }*/ .heder-slider-area .single-slider-area p { color: #f5f6f7; font-size: 18px; line-height: 28px; } .heder-slider-area .single-slider-area .header-btn-group { padding-top: 31px; } .heder-slider-area .single-slider-area .header-btn-group .boxed-btn { width: 170px; height: 50px; font-size: 14px; line-height: 50px; font-weight: 600; padding: 0; text-align: center; margin-right: 10px; display: inline-block; margin-right: 20px; } .heder-slider-area .single-slider-area .header-btn-group .boxed-btn:hover { background-color: #fff; color: #ff0031; } .heder-slider-area .single-slider-area .header-btn-group .boxed-btn.blank { background-color: transparent; } .heder-slider-area .single-slider-area .header-btn-group .boxed-btn.blank:hover { color: #ff0031; } .heder-slider-area .single-slider-area .header-btn-group .boxed-btn.blank:hover i { background-color: #ff0031; border-color: #ff0031; color: #fff; } .heder-slider-area .single-slider-area .header-btn-group .boxed-btn.blank i { width: 48px; height: 48px; margin-left: 10px; border: 1px solid #fff; line-height: 48px; border-radius: 50%; text-align: center; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } /************************************************************ 10.progress area ************************************************************/ .progress-area { padding: 120px 0px 120px; background-image: url(../img/grass.jpg); } .progress-area .proccess li { display: inline-block; box-shadow: 0px 8px 20px rgb(0 0 0 / 10%); padding: 38px 30px 15px 30px; border: 1px solid rgba(163, 163, 163, 0.3); width: 255px; text-align: center; margin-right: 165px; -webkit-transition: 0.3s ease-in; -moz-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; transition: 0.3s ease-in; border-radius: 10px; background: #FFF; } .progress-area .proccess li:hover { -webkit-box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1); box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1); } .progress-area .proccess li .single-proccess-box { position: relative; } .progress-area .proccess li .single-proccess-box h4 { margin-top: 29px; text-transform: uppercase; color: #31323a; font-size: 18px; line-height: 28px; } .progress-area .proccess li .single-proccess-box .icon { width: 80px; height: 80px; border-radius: 50%; display: inline-block; border-radius: 50%; position: relative; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear; } .progress-area .proccess li .single-proccess-box .icon::after { position: absolute; content: " "; top: 0; left: 0; width: 100%; height: 100%; background: #ff0031; border-radius: 50%; } .progress-area .proccess li .single-proccess-box .icon::before { position: absolute; content: " "; top: -10%; left: -10%; width: 120%; height: 120%; background: #ff0031; border-radius: 50%; opacity: .3; } .progress-area .proccess li .single-proccess-box .icon i { position: inherit; z-index: 99; line-height: 80px; color: #fff; font-size: 30px; } .progress-area .proccess li .single-proccess-box .right-arrow img { position: absolute; top: 50%; left: 240px; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .progress-area .proccess li:last-child { margin-right: 0; } /************************************************************ 11.about area ************************************************************/ .about-area { position: relative; z-index: 0; padding: 80px 0 80px; padding-bottom: 90px; } .about-area.about-bg { background-image: url(../img/1.jpg); background-size: cover; background-position: center; } .about-area:after { position: absolute; content: " "; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0 0 0 / 75%); opacity: 0.90; z-index: -1; } .about-area .single-about-box-item { text-align: center; background-color: #0F236B; border-radius: 5px; margin-bottom: 30px; padding: 20px 10px 5px; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear; } .about-area .single-about-box-item:hover { -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); transform: translateY(-5px); box-shadow: 0px 10px 25px rgba(15, 35, 107, 0.50); } .about-area .single-about-box-item:hover .icon { background-color: #ff0031; } .about-area .single-about-box-item:hover .content p { color: #fff; opacity: 1; } .about-area .single-about-box-item .icon { width: 80px; height: 80px; border-radius: 50%; display: inline-block; border-radius: 50%; position: relative; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear; } .about-area .single-about-box-item .icon::after { position: absolute; content: " "; top: 0; left: 0; width: 100%; height: 100%; background: #ff0031; border-radius: 50%; opacity: .3; } .about-area .single-about-box-item .icon::before { position: absolute; content: " "; top: -10%; left: -10%; width: 120%; height: 120%; background: #ff0031; border-radius: 50%; opacity: .3; } .about-area .single-about-box-item .icon i { position: inherit; z-index: 99; line-height: 80px; color: #fff; font-size: 30px; } .about-area .single-about-box-item .content h3 { color: #fff; text-transform: uppercase; margin-bottom: 17px; margin-top: 30px; font-size: 20px; line-height: 30px; font-weight: 500; } .about-area .single-about-box-item .content p { color: #dfe1e7; padding-bottom: 0px; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } /************************************************************ 12.download area ************************************************************/ .download-area { padding: 110px 0px 0px; } .download-area .right-tile-image img { border-radius: 15px; height: 100%; } .download-area .download-area-wrapper { position: relative; z-index: 0; } .download-area .download-area-wrapper .right-tile-image { position: absolute; right: 0; top: 0; z-index: -1; height: 100%; } .download-area .download-area-wrapper .left-tile-content { margin-top: 120px; margin-bottom: 120px; padding: 52px 30px 56px; background-color: #fff; -webkit-box-shadow: 0 0 26px rgba(5, 5, 5, 0.3); -moz-box-shadow: 0 0 26px rgba(5, 5, 5, 0.3); box-shadow: 0 0 26px rgba(5, 5, 5, 0.3); border-radius: 10px; } .download-area .download-area-wrapper .left-tile-content .content { padding-bottom: 10px; } .download-area .download-area-wrapper .left-tile-content .content h2 { color: #31323a; text-transform: uppercase; font-size: 24px; line-height: 34px; margin-bottom: 15px; } .download-area .download-area-wrapper .left-tile-content .content p { color: #31323a; margin-bottom: 15px; } .download-area .download-area-wrapper .left-tile-content .icon-box { display: inline-block; margin-right: 30px; } .download-area .download-area-wrapper .left-tile-content .icon-box .icon { font-size: 40px; color: #ff0031; } .download-area .download-area-wrapper .left-tile-content .icon-box .content { margin-top: 15px; border-right: 2px dotted #C9C9C9; display: block; padding-right: 30px; padding-bottom: 0; } .download-area .download-area-wrapper .left-tile-content .icon-box .content.last { border-right: none; } .download-area .download-area-wrapper .left-tile-content .icon-box .content span { color: #25292f; font-size: 28px; line-height: 38px; font-weight: 700; display: block; margin-bottom: 9px; line-height: 100%; } .download-area .download-area-wrapper .left-tile-content .icon-box .content .text-link { margin-top: 15px; display: block; color: #ff0031; font-size: 16px; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear; } .text-green{ color: #ff0031 !important; } .download-area .download-area-wrapper .left-tile-content .icon-box .content .text-link:hover { text-decoration: underline; } /************************************************************ 13.download bottom area ************************************************************/ .download-area-bottom { padding: 120px 0 135px 0; background-image: url(../img/grass.jpg); background-size: cover; } .download-title { font-size: 30px; letter-spacing: 0; line-height: 32px; margin: 0 0 39px; padding: 20px 0 11px; position: relative; text-transform: uppercase; color: #FFF; } .download-title::after { background: #ff0031 none repeat scroll 0 0; bottom: 0; content: ""; height: 2px; left: 0; position: absolute; width: 54px; } .download-area-bottom .single-download-box { border-bottom: 2px solid #ff0031; background-color: #f3f3f3; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; text-align: center; position: relative; min-height: 300px; width: 220px; } .download-area-bottom .single-download-box:hover { border-bottom-color: #0F236B; -webkit-box-shadow: 0 0 6px rgba(5, 5, 5, 0.5); -moz-box-shadow: 0 0 6px rgba(5, 5, 5, 0.5); box-shadow: 0 0 6px rgba(5, 5, 5, 0.5); background: #fff; } .download-area-bottom .single-download-box:hover h4 { color: #ff0031; } .download-area-bottom .single-download-box:hover .boxed-btn { background-color: #0F236B; } .download-area-bottom .single-download-box h4 { color: #31323a; font-size: 18px; line-height: 30px; font-weight: 600; margin-top: 0; margin-bottom: 17px; text-transform: uppercase; padding: 20px 0px 0px; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .download-area-bottom .single-download-box p { color: #31323a; margin-bottom: 5px; padding: 0px 20px; font-size: 16px; } .download-area-bottom .single-download-box .boxed-btn { bottom: 10px; right: 0; text-transform: capitalize; padding: 6px 33px; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; display: inline-block; position: absolute; /* width: 60%; */ left: 0; /* text-align: center; */ margin: 10px; } .download-area-bottom .single-download-box .boxed-btn:hover { background-color: #0F236B; } .download-title1 { font-size: 30px; letter-spacing: 0; line-height: 32px; margin: 0 0 39px; padding: 20px 0 11px; position: relative; text-transform: uppercase; color: #FFF; } .download-title1::after { background: #ff0031 none repeat scroll 0 0; bottom: 0; content: ""; height: 2px;/*left:48%;*/left:35%; position: absolute; /*width: 54px;*/width:338px; } /************************************************************ 14.counter area ************************************************************/ .counter-area { position: relative; padding: 120px 0 110px 0; z-index: 0; } .counter-area.counter-bg { background-image: url(../img/bg/counter-bg.jpg); background-position: center; background-size: cover; } .counter-area:after { position: absolute; content: " "; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0 0 0); opacity: 0.90; z-index: -1; } .counter-area .single-counter-box:hover .icon .icon-inner .icon-wrapper { background-color: #ff0031; } .counter-area .single-counter-box:hover .icon .icon-inner .icon-wrapper i { color: #fff; } .counter-area .single-counter-box .content h5 { color: #fff; font-size: 18px; line-height: 16px; text-transform: uppercase; font-weight: 500; margin-bottom: 15px; } .counter-area .single-counter-box .content .count-number { color: #fff; font-size: 40px; font-weight: 700; margin-bottom: 0; } .counter-area .single-counter-box .icon { background-color: transparent; border: 1px solid #eee; display: inline-block; border-radius: 50%; padding: 10px; margin-bottom: 30px; } .counter-area .single-counter-box .icon .icon-inner { background-color: #e1e1e1; height: 106px; width: 106px; border-radius: 50%; border: 1px solid #ff0031; position: relative; } .counter-area .single-counter-box .icon .icon-inner .icon-wrapper { position: absolute; right: 0px; top: 9px; display: inline-block; width: 86px; height: 86px; border-radius: 50%; background-color: #fff; color: #fff; font-size: 40px; line-height: 86px; position: relative; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .counter-area .single-counter-box .icon .icon-inner .icon-wrapper i { position: absolute; left: 50%; top: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #ff0031; } /************************************************************ 15.feature area ************************************************************/ .amazing-feature-area { position: relative; padding: 121px 0 157px; } .amazing-feature-area .right-image { position: relative; } .amazing-feature-area .right-image img { position: absolute; top: 0; left: 51%; } .amazing-feature-area .left-content { margin-top: -6px; } .amazing-feature-area .left-content h2 span { color: #ff0031; } .amazing-feature-area .left-content p { color: #31323a; } .amazing-feature-area .left-content .feature-list-box-wrapper { margin-top: 55px; } .amazing-feature-area .left-content .feature-list-box-wrapper .single-feature-box { position: relative; margin-bottom: 20px; display: flex; background-color: #fff; padding: 10px; padding-bottom: 13px; -webkit-box-shadow: 0 0 90px rgba(101, 99, 99, 0.2); box-shadow: 0 0 90px rgba(101, 99, 99, 0.2); border-radius: 5px; clear: both; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .amazing-feature-area .left-content .feature-list-box-wrapper .single-feature-box:hover { background-color: #0F236B; } .amazing-feature-area .left-content .feature-list-box-wrapper .single-feature-box:hover .icon .icon-inner { border-color: #fff; } .amazing-feature-area .left-content .feature-list-box-wrapper .single-feature-box:hover .content h6 { color: #fff; } .amazing-feature-area .left-content .feature-list-box-wrapper .single-feature-box .icon { display: inline-flex; } .amazing-feature-area .left-content .feature-list-box-wrapper .single-feature-box .icon .icon-inner { font-size: 30px; text-align: center; line-height: 60px; display: inline-block; width: 60px; height: 60px; border-radius: 50%; border: 1px solid #9a9aa1; position: relative; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .amazing-feature-area .left-content .feature-list-box-wrapper .single-feature-box .icon .icon-inner i { position: absolute; left: 50%; top: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #ff0031; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .amazing-feature-area .left-content .feature-list-box-wrapper .single-feature-box .content { display: inline-flex; padding-left: 20px; align-items: center; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .amazing-feature-area .left-content .feature-list-box-wrapper .single-feature-box .content h6 { font-size: 16px; text-transform: capitalize; color: #31323a; margin-bottom: 0; font-weight: 400; line-height: 24px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } /************************************************************ 16.team area ************************************************************/ .expert-team-area { padding: 110px 0 120px 0; background-color: #494B56; background: url(../img/team.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } .expert-team-area .overlay { position: absolute; content: " "; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0 0 0); opacity: 0.90; } .expert-team-area .section-title p { color: #dfd6d9; } .expert-team-area .single-expert-team:hover .thumb { background-color: #f7dad4; } .expert-team-area .single-expert-team .thumb { background-color: #80828E; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .expert-team-area .single-expert-team .content { background-color: #4b47fd; -webkit-box-shadow: 0 0 13px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 13px rgba(0, 0, 0, 0.3); box-shadow: 0 0 13px rgba(0, 0, 0, 0.3); padding: 24px 27px 20px 30px; text-align: center; } .expert-team-area .single-expert-team .content h4 { font-size: 20px; line-height: 30px; font-weight: 700; text-transform: uppercase; color: #fff; margin-bottom: 0px; } .expert-team-area .single-expert-team .content .post { text-transform: uppercase; font-size: 14px; color: #dfe1e7; } .expert-team-area .single-expert-team .content .social { margin-top: 15px; } .expert-team-area .single-expert-team .content .social li { display: inline-block; padding: 5px; } .expert-team-area .single-expert-team .content .social li a { color: #dfd6d9; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .expert-team-area .single-expert-team .content .social li a:hover { color: #ff0031; opacity: 1; } /************************************************************ 17.partner area ************************************************************/ .our-reputable-partner-area { padding: 120px 0 90px 0; background: url(../img/stad3.jfif); background-repeat: no-repeat; background-position: bottom; background-size: cover; position: relative; } .our-reputable-partner-area .overlay { position: absolute; content: " "; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0 0 0); opacity: 0.80; } .our-reputable-partner-area .left-content { margin-top: -14px; } .our-reputable-partner-area .left-content h2 { font-size: 35px; text-transform: uppercase; font-weight: 700; margin-bottom: 10px; } .our-reputable-partner-area .left-content h2 span { color: #ff0031; } .our-reputable-partner-area .left-content p { color: #31323a; margin-top: 12px; } .our-reputable-partner-area .left-content .boxed-btn { background-color: #31323a; width: 150px; height: 40px; padding: 0; text-align: center; line-height: 40px; } .our-reputable-partner-area .left-content .boxed-btn:hover { background-color: #ff0031; } .our-reputable-partner-area .right-area img { -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); margin-bottom: 30px; } /************************************************************ 18.affiliate area ************************************************************/ .affiliate-area { background-repeat: no-repeat; background-position: center; background-size: cover; padding: 120px 0 120px; position: relative; } .affiliate-area .overlay { position: absolute; content: " "; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0 0 0); opacity: 0.90; } .affiliate-area .left-content .sub-title { color: #fff; } .affiliate-area .left-content p { color: #dfd6d9; } .affiliate-area .left-content .boxed-btn { margin-top: 30px; background-color: #ff0031; padding: 8px 35px; color: #fff; } .affiliate-area .left-content .boxed-btn:hover { background: #fff; color: #ff0031; } .affiliate-area .left-content .feature-list-box-wrapper { margin-top: 26px; } .affiliate-area .left-content .feature-list-box-wrapper .single-feature-box { position: relative; margin-bottom: 20px; display: flex; background-color: #0f236b; padding: 10px; -webkit-box-shadow: 0 0 5px rgba(101, 99, 99, 0.2); box-shadow: 0 0 5px rgba(101, 99, 99, 0.2); border-radius: 5px; clear: both; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .affiliate-area .left-content .feature-list-box-wrapper .single-feature-box:hover { background-color: #ff0031; } .affiliate-area .left-content .feature-list-box-wrapper .single-feature-box:hover .icon .icon-inner { border-color: #fff; } .affiliate-area .left-content .feature-list-box-wrapper .single-feature-box:hover .icon .icon-inner i { color: #fff; } .affiliate-area .left-content .feature-list-box-wrapper .single-feature-box:hover .content h6 { color: #fff; opacity: 1; } .affiliate-area .left-content .feature-list-box-wrapper .single-feature-box .icon { display: flex; } .affiliate-area .left-content .feature-list-box-wrapper .single-feature-box .icon .icon-inner { font-size: 30px; text-align: center; line-height: 60px; display: inline-block; width: 60px; height: 60px; border-radius: 50%; border: 1px solid #9a9aa1; position: relative; } .affiliate-area .left-content .feature-list-box-wrapper .single-feature-box .icon .icon-inner i { position: absolute; left: 50%; top: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #dfd6d9; } .affiliate-area .left-content .feature-list-box-wrapper .single-feature-box .content { display: flex; align-items: center; margin-left: 20px; } .affiliate-area .left-content .feature-list-box-wrapper .single-feature-box .content h6 { font-size: 15px; text-transform: capitalize; color: #dfe1e7; margin-bottom: 0; font-weight: 400; line-height: 24px; align-items: center; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .affiliate-area .right-content .img-thumb { position: relative; display: inline-block; } .affiliate-area .right-content .img-thumb .hover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(75, 71, 253, 0.60); color: #fff; } .affiliate-area .right-content .img-thumb .hover .icon { position: absolute; left: 50%; top: 50%; -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ transform: translate(-50%, -50%); display: inline-block; border-radius: 50%; padding: 5px; } .affiliate-area .right-content .img-thumb .hover .icon .icon-inner { width: 60px; height: 60px; background-color: rgb(252 75 75 / 50%) ; border-radius: 50%; position: relative; } .affiliate-area .right-content .img-thumb .hover .icon .icon-inner .icon-wrapper a { position: absolute; left: 4.5px; top: 4.7px; color: #fff; width: 50px; height: 50px; line-height: 50px; background-color: #ff0031; text-align: center; border-radius: 50%; } /************************************************************ 19.latest news area ************************************************************/ .latest-news-area { padding: 106px 0 120px 0; } .latest-news-area .section-title h2 { color: #31323a; } .latest-news-area .section-title p { color: #31323a; } .latest-news-area .single-latest-new-item { padding: 30px; -webkit-box-shadow: 0 0 13px rgba(0, 0, 0, 0.18); -moz-box-shadow: 0 0 13px rgba(0, 0, 0, 0.18); box-shadow: 0 0 13px rgba(0, 0, 0, 0.18); border-radius: 15px; } .latest-news-area .single-latest-new-item .thumb { display: inline-block; border-radius: 15px; position: relative; } .latest-news-area .single-latest-new-item .thumb .icon { display: inline-block; position: relative; width: 80px; height: 80px; line-height: 80px; text-align: center; font-size: 35px; background-color: #ff0031; border-radius: 50%; position: absolute; left: 50%; bottom: -40px; -ms-transform: translate(-50%); /* IE 9 */ -webkit-transform: translate(-50%); /* Chrome, Safari, Opera */ transform: translate(-50%); -webkit-box-shadow: 0 0 13px rgba(0, 0, 0, 0.18); -moz-box-shadow: 0 0 13px rgba(0, 0, 0, 0.18); box-shadow: 0 0 13px rgba(0, 0, 0, 0.18); } .latest-news-area .single-latest-new-item .thumb .icon i { display: inline-block; position: absolute; left: 50%; top: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #ffffff; font-size: 40px; } .latest-news-area .single-latest-new-item .content { margin-top: 62px; } .latest-news-area .single-latest-new-item .content h3 { font-size: 20px; line-height: 30px; color: #31323a; margin-bottom: 0; text-transform: uppercase; } .latest-news-area .single-latest-new-item .content .post-meta { padding-top: 17px; } .latest-news-area .single-latest-new-item .content .post-meta ul li { display: inline-block; padding: 0 16px 0 0; color: #acadad; font-size: 14px; } .latest-news-area .single-latest-new-item .content .post-meta ul li a { color: #acadad; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .latest-news-area .single-latest-new-item .content .post-meta ul li a:hover { color: #ff0031; } .latest-news-area .single-latest-new-item .content .post-details { padding-top: 21px; } .latest-news-area .single-latest-new-item .content .post-details p { color: #31323a; font-size: 16px; } .latest-news-area .single-latest-new-item .content .boxed-btn.blank { margin-top: 11px; width: 135px; height: 40px; padding: 0; line-height: 40px; text-align: center; background: #ff0031; color: #fff; } .latest-news-area .single-latest-new-item .content .boxed-btn.blank:hover { background-color: #0F236B; color: #fff; } /************************************************************ 20.contact area ************************************************************/ .contact-area { padding: 112px 0 90px 0; /* background: url(../img/contact.jpg); */ background-image: url(../img/grass.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } .contact-area .overlay { position: absolute; content: " "; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0 0 0); /* background-color: rgb(12, 4, 51); */ opacity: 0.90; } .contact-area .contact-form-area .sub-title,.contact-area .contact-form-area .title,.testimonial-wrapper .title,.testimonial-wrapper .sub-title { color: #FFF; } .contact-area .contact-form-area .contact-form-wrapper { margin-top: -7px; } .contact-area .contact-form-area .contact-form-wrapper input { /* background-color: transparent; */ border: 1px solid rgb(0 0 0 / 43%); padding: 10px 25px; border-radius: 25px; width: 100%; margin-bottom: 30px; color: #000; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .contact-area .contact-form-area .contact-form-wrapper input:focus { border: 1px solid #ff0031; } .contact-area .contact-form-area .contact-form-wrapper input::-webkit-input-placeholder { /* WebKit browsers */ color: #000; } .contact-area .contact-form-area .contact-form-wrapper input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #000; } .contact-area .contact-form-area .contact-form-wrapper input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #000; } .contact-area .contact-form-area .contact-form-wrapper input:-ms-input-placeholder { /* Internet Explorer 10+ */ /* color: #000; */ color: #000; } .contact-area .contact-form-area .contact-form-wrapper textarea { /* background-color: transparent; */ border: 1px solid rgb(0 0 0 / 43%); padding: 10px 25px; border-radius: 25px; width: 100%; margin-bottom: 30px; color: #000; resize: none; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .contact-area .contact-form-area .contact-form-wrapper textarea:focus { border: 1px solid #ff0031; } .contact-area .contact-form-area .contact-form-wrapper textarea::-webkit-input-placeholder { /* WebKit browsers */ color: #000; /* dfd6d9 */ } .contact-area .contact-form-area .contact-form-wrapper textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #000; } .contact-area .contact-form-area .contact-form-wrapper textarea::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #000; } .contact-area .contact-form-area .contact-form-wrapper textarea:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #000; } .contact-area .contact-form-area .contact-form-wrapper input[type=submit] { margin-top: 2px; width: 180px; color: #fff; background-color: #ff0031; border-color: #ff0031; cursor: pointer; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .contact-area .contact-form-area .contact-form-wrapper input[type=submit]:hover { background-color: #fff; color: #ff0031; border-color: #fff; } .contact-area .testimonial-wrapper .inner-section-title { margin-bottom: 58px; } .contact-area .testimonial-carosel { display: inline-block; z-index: 0; } .contact-area .testimonial-carosel .single-testimonial-item { margin-bottom: 70px; background-color: #4b47fd; -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); padding: 35px 30px 50px 30px; position: relative; z-index: 1; } .contact-area .testimonial-carosel .single-testimonial-item:after { position: absolute; content: "\f10d"; font-family: "Font Awesome 5 Free"; font-weight: 900; left: 50%; font-size: 215px; color: rgba(255, 255, 255, 0.10); top: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -1; } .contact-area .testimonial-carosel .single-testimonial-item p { color: #dfe1e7; font-size: 16px; text-align: center; line-height: 26px; } .contact-area .testimonial-carosel .single-testimonial-item .clients-details { margin-top: 22px; margin-bottom: 26px; text-align: center; } .contact-area .testimonial-carosel .single-testimonial-item .clients-details h4 { font-size: 20px; color: #fff; text-transform: uppercase; } .contact-area .testimonial-carosel .single-testimonial-item .clients-details .location { font-size: 14px; color: #dfe1e7; } .contact-area .testimonial-carosel .single-testimonial-item .thumb { display: inline-block; padding: 6px; position: absolute; left: 50%; bottom: -42px; -ms-transform: translate(-50%, 0); /* IE 9 */ -webkit-transform: translate(-50%, 0); /* Chrome, Safari, Opera */ transform: translate(-50%, 0); border-radius: 50%; } .contact-area .testimonial-carosel .single-testimonial-item .thumb img { max-width: 84px; max-height: 84px; border-radius: 50%; } .testimonial-carosel .owl-dots div { height: 10px; width: 10px; background: #31323a; border: 2px solid #bbbbbd; display: inline-block; margin: 2px; border-radius: 50%; } .testimonial-carosel .owl-dots div.active { background: #ff0031; border-color: #ff0031; } .testimonial-wrapper .sub-title { color: #FFF; } .testimonial-carosel .owl-dots { text-align: center; position: absolute; left: 50%; bottom: -42px; -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); } /************************************************************ 21.faq area ************************************************************/ .faq-area { padding: 106px 0 153px 0; } .faq-area .section-title h2 { color: #31323a; } .faq-area .section-title p { color: #31323a; } .faq-area #accordion .card { border: none; -webkit-box-shadow: 0 0 13px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 13px rgba(0, 0, 0, 0.15); box-shadow: 0 0 13px rgba(0, 0, 0, 0.15); margin-bottom: 20px; } .faq-area #accordion .card .card-body { padding-top: 0; margin-top: -5px; padding-bottom: 25px; padding-left: 88px; padding-right: 70px; color: #31323a; } .faq-area #accordion .card .card-header { position: relative; border: none; background: none; padding-left: 30px; } .faq-area #accordion .card .card-header h5 { display: flex; align-items: center; } .faq-area #accordion .card .card-header h5 i { color: #31323a80; font-size: 40px; } .faq-area #accordion .card .card-header h5 a { padding-left: 16px; font-size: 20px; font-weight: 700; line-height: 60px; text-decoration: none; text-align: left; display: block; background-color: #fff; text-transform: uppercase; color: #31323a; } .faq-area #accordion .card .card-header h5 a:after { position: absolute; right: 30px; top: 50%; font-family: "Font Awesome 5 Free"; font-weight: 900; content: '\f107'; font-size: 20px; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .faq-area #accordion .card .card-header h5 a[aria-expanded~="false"]:after { content: '\f107' !important; } /************************************************************ 22.footer area ************************************************************/ .footer-area { position: relative; z-index: 0; } .footer-area .overlay { position: absolute; content: " "; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0 0 0 / 75%); opacity: 0.90; } .footer-area.footer-bg { background-position: center; background-size: cover; background-image: url(../img/stad6.jpg); } .footer-area .copyright-area { padding: 25px 0; background-color: #1d2453; color: #fff; text-align: center; font-size: 16px; line-height: 26px; } .footer-area .footer-bottom { padding: 46px 0 83px 0; } .footer-area .footer-bottom .widget-area .widget-title h4 { color: #fff; font-size: 20px; line-height: 30px; text-transform: uppercase; margin-top: -4px; } .footer-area .footer-bottom .widget-area .widget-body .footer-logo { display: block; margin-bottom: 25px; } .footer-area .footer-bottom .widget-area .widget-body p { color: #dfd6d9; } .footer-area .footer-bottom .widget-area .widget-body .social-icons { margin-top: 25px; } .footer-area .footer-bottom .widget-area .widget-body .social-icons ul li { display: inline-block; margin-right: 6px; } .footer-area .footer-bottom .widget-area .widget-body .social-icons ul li a { display: inline-block; color: #fff; width: 35px; height: 35px; line-height: 35px; text-align: center; border-radius: 50%; background-color: #80828e; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .footer-area .footer-bottom .widget-area .widget-body .social-icons ul li a:hover { background-color: #ff0031; } .footer-area .footer-bottom .widget-area .widget-body .footer-menu li { display: block; border-bottom: 1px dotted rgba(225, 225, 225, 0.3); padding: 15px 0; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .footer-area .footer-bottom .widget-area .widget-body .footer-menu li:last-child { border-bottom: 0; } .footer-area .footer-bottom .widget-area .widget-body .footer-menu li:hover { padding-left: 10px; } .footer-area .footer-bottom .widget-area .widget-body .footer-menu li:hover a { color: #ff0031; } .footer-area .footer-bottom .widget-area .widget-body .footer-menu li a { color: #dfe1e7; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .footer-area .footer-top .subscription-wrapper { top: 50%; width: 100%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); padding: 23px 15px 17px 30px; background-color: #000; -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 0 11px rgba(0, 0, 0, 0.7); box-shadow: 0 0 11px rgba(0, 0, 0, 0.7); border-radius: 10px; } .footer-area .footer-top .subscription-wrapper .subtitle { font-size: 14px; line-height: 24px; font-weight: 700; text-transform: uppercase; color: #fff; } .footer-area .footer-top .subscription-wrapper h4 { font-size: 20px; line-height: 30px; text-transform: uppercase; font-weight: 700; color: #fff; } .footer-area .footer-top .subsscribe-form .form-element-x { position: relative; } .footer-area .footer-top .subsscribe-form .form-element-x .icon { position: absolute; left: 0; top: 10px; } .footer-area .footer-top .subsscribe-form .form-element-x .icon img { width: 45px; height: 34px; } .footer-area .footer-top .subsscribe-form .form-element-x input[type=email] { padding: 12px 35px; padding-left: 60px; width: 70%; background-color: transparent; border: none; border-bottom: 1px solid rgba(223, 214, 217, 0.4); color: #fff; bottom: -1px; position: relative; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .footer-area .footer-top .subsscribe-form .form-element-x input::placeholder { color: #fff; } .footer-area .footer-top .subsscribe-form .form-element-x input::-webkit-placeholder { color: #fff; } .footer-area .footer-top .subsscribe-form .form-element-x input::-moz-placeholder { color: #fff; } .footer-area .footer-top .subsscribe-form .form-element-x input[type=email]:focus { border-bottom: 1px solid #ff0031; } .footer-area .footer-top .subsscribe-form input[type=submit] { display: inline-block; position: absolute; top: 0px; right: 0px; padding: 10px 25px; border-radius: 25px; color: #fff; font-size: 16px; margin-top: 7px; background-color: #ff0031; border: none; margin-right: 30px; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; cursor: pointer; } .footer-area .footer-top .subsscribe-form input[type=submit]:hover { color: #ff0031; background: #fff; } /*----------------------------- breadcrumb-area ------------------------------*/ .breadcrumb-area { padding: 110px 0px 120px; position: relative; overflow: hidden; } .breadcrumb-area .title { color: #fff; font-size: 40px; line-height: 50px; font-weight: 700; margin-bottom: 12px; } .breadcrumb-area .links { padding-left: 0px; } .breadcrumb-area .links li { display: inline-block; position: relative; margin-right: 20px; } .breadcrumb-area .links li::after { position: absolute; content: "\f054"; font-family: 'Font Awesome 5 Free'; font-weight: 900; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: -17px; color: #fff; } .breadcrumb-area .links li:last-child::after { display: none; } .breadcrumb-area .links li a { color: #fff; font-size: 18px; line-height: 28px; -webkit-transition: 0.3s ease-in; -moz-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; transition: 0.3s ease-in; } .breadcrumb-area .links li a i { -webkit-transition: 0.3s ease-in; -moz-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; transition: 0.3s ease-in; color: #fff; } .breadcrumb-area .links li a:hover, .breadcrumb-area .links li a.active { color: #eee; } .breadcrumb-area .links li a:hover i, .breadcrumb-area .links li a.active i { color: #eee; } .breadcrumb-area .links li i { color: #fff; display: inline-block; padding: 0px 5px; } /* =============================== Pagination Area Css Start ==================================*/ .pagination .page-item .page-link { width: 40px; height: 40px; border: 1px solid rgba(0, 0, 0, 0.15); text-align: center; line-height: 40px; color: rgba(0, 0, 0, 0.6); font-size: 16px; margin: 0px 4px 0px; border-radius: 3px; padding: 0px; font-weight: 600; -webkit-transition: all .3s linear; transition: all .3s linear; } .pagination .page-item .page-link.active, .pagination .page-item .page-link:hover { border-color: transparent; color: #fff; background: #0F236B; } /* =========================== Blog Page & Blog Details Css Start ==============================*/ .blog-page-area .single-latest-new-item { margin-bottom: 30px; } .blog-page-area { padding: 120px 0px 172px; } .blog-page-area .date-area { position: absolute; width: 100px; height: 100px; background: #4b47fd; border-radius: 50%; top: -20px; right: -20px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.30); } .blog-page-area .single-latest-new-item .thumb { position: relative; overflow: hidden; } .blog-page-area .single-latest-new-item .thumb img { width: 100%; border-radius: 30px; } .blog-page-area .single-latest-new-item { padding: 10px; } .blog-page-area .single-latest-new-item .content h3 { font-size: 24px; font-weight: 600; text-transform: uppercase; line-height: 36px; } .blog-page-area .thumb .date { position: absolute; top: 33px; right: 40px; color: #ffff; text-align: center; font-size: 30px; margin-bottom: 0px; line-height: 28px; } .blog-page-area .thumb .date span { display: block; font-size: 16px; } .blog-page-area .single-latest-new-item .content { margin-top: 16px; } .blog-page-area .single-latest-new-item .content .post-meta { padding-top: 15px; } .blog-page-area .blog-details .blockquote { background: #4b47fd; position: relative; padding: 34px 40px 37px; margin-top: 25px; margin-bottom: 25px; } .blog-page-area .blog-details .content .blockquote p { color: #fff; margin-bottom: 0px; font-size: 18px; line-height: 28px; } .blog-page-area .blog-details .content .blockquote i { font-size: 80px; color: rgba(255, 255, 255, 0.20); position: absolute; top: 20px; left: 30px; } .blog-page-area .blog-details .content { padding: 0px 20px 0px; } .blog-page-area .blog-details .content .list li i { color: #444; font-size: 14px; margin-right: 5px; } .blog-page-area .blog-details .content .list { margin-top: 21px; margin-bottom: 21px; } .blog-page-area .blog-details .content .social-link-area { border-top: 1px solid rgba(0, 0, 0, 0.30); padding-top: 26px; margin-top: 27px; } .blog-page-area .blog-details .content .social-link-area { display: flex; } .blog-page-area .blog-details .content .social-link-area .title { margin-right: 20px; } .blog-page-area .blog-details .content .social-link-area li { display: inline-block; } .blog-page-area .blog-details .content .social-link-area li a { width: 30px; height: 30px; border: 1px solid rgba(0, 0, 0, 0.20); display: inline-block; text-align: center; line-height: 30px; border-radius: 50%; font-size: 14px; margin: 0px 2px; transition: all .3s linear; } .blog-page-area .blog-details .content .social-link-area li a:hover { background: #4b47fd; color: #fff; border-color: #4b47fd; } .blog-page-area .post-author-area { margin-top: 43px; } .blog-page-area .post-author-area .header-area .title { font-size: 21px; font-weight: 600; text-transform: uppercase; line-height: 31px; border-bottom: 1px solid rgba(0, 0, 0, 0.20); padding-bottom: 21px; margin-bottom: 30px; } .blog-page-area .post-author-area { border-bottom: 1px solid rgba(0, 0, 0, 0.20); padding-bottom: 11px; } .blog-page-area .post-author-area .author-info { display: flex; } .blog-page-area .post-author-area .author-info .left { text-align: center; margin-right: 30px; } .blog-page-area .post-author-area .author-info .left .img { width: 80px; height: 80px; border-radius: 50%; border: 2px solid #4b47fd; } .blog-page-area .post-author-area .author-info .left .img img { border-radius: 50%; } .blog-page-area .post-author-area .author-info .right { flex: 1; } .blog-page-area .post-author-area .author-info .right .name { font-size: 18px; line-height: 28px; font-weight: 600; } .blog-page-area .post-author-area .social-links li { display: inline-block; } .blog-page-area .post-author-area .social-links { margin-top: 10px; } .blog-page-area .post-author-area .social-links li a { display: inline-block; text-align: center; line-height: 30px; border-radius: 50%; font-size: 14px; transition: all .3s linear; } .blog-page-area .post-author-area .social-links li a:hover { color: #4b47fd; } .blog-page-area .post-comments { margin-top: 43px; } .blog-page-area .post-comments .header-area .title { font-size: 21px; font-weight: 600; text-transform: uppercase; line-height: 31px; border-bottom: 1px solid rgba(0, 0, 0, 0.20); padding-bottom: 21px; margin-bottom: 30px; } .blog-page-area .post-comments .wright-comment-area { display: flex; } .blog-page-area .post-comments .wright-comment-area .left { text-align: center; margin-right: 30px; } .blog-page-area .post-comments .wright-comment-area .left .img { width: 60px; height: 60px; border-radius: 50%; border: 2px solid #4b47fd; } .blog-page-area .post-comments .wright-comment-area .img img { border-radius: 50%; } .blog-page-area .post-comments .wright-comment-area .right-area { flex: 1; } .blog-page-area .post-comments .wright-comment-area .right-area input { width: 100%; height: 60px; resize: none; border: 1px solid rgba(0, 0, 0, 0.20); font-size: 14px; padding: 0px 20px 0px } .blog-page-area .post-comments .view-comment-area .left-area { text-align: center; margin-right: 30px; } .blog-page-area .post-comments .view-comment-area .left-area .img { width: 60px; height: 60px; border-radius: 50%; border: 2px solid #4b47fd; } .blog-page-area .post-comments .view-comment-area .img img { border-radius: 50%; } .blog-page-area .post-comments .view-comment-area { margin-top: 24px; } .blog-page-area .single-comment { display: flex; } .blog-page-area .single-comment .right-area .name { font-size: 18px; line-height: 28px; font-weight: 600; margin-bottom: 0px; } .blog-page-area .single-comment .right-area .date p { font-size: 14px; margin-bottom: 9px; color: #727799; } .blog-page-area .single-comment .right-area .comment-meta li { display: inline-block; } .blog-page-area .single-comment .right-area .comment-meta li a { font-size: 14px; color: #727799; margin-right: 15px; position: relative; } .blog-page-area .single-comment .right-area .comment-meta li a::before { position: absolute; content: '\f111'; font-family: Font Awesome\ 5 Free; font-weight: 900; color: #727799; font-size: 6px; top: 50%; transform: translateY(-50%); right: -13px; } .blog-page-area .single-comment .right-area .comment-meta li:last-child a::before { display: none; } .blog-page-area .single-comment .right-area .text p { margin-bottom: 9px; } .blog-page-area .single-comment { border-bottom: 1px solid rgba(0, 0, 0, 0.20); padding-bottom: 17px; padding-top: 20px; } .blog-page-area .post-comments .loadmore { width: 100%; height: 50px; line-height: 50px; font-size: 14px; text-transform: uppercase; font-weight: 600; color: #fff; background: #4b47fd; text-align: center; display: block; margin-top: 30px; -webkit-transition: 0.3s ease-in; -moz-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; transition: 0.3s ease-in; } .blog-page-area .post-comments .loadmore:hover { background: #0F236B; } .categori-widget { padding: 22px 30px 22px; border-radius: 10px; -webkit-box-shadow: 0 0 13px rgba(0, 0, 0, 0.18); -moz-box-shadow: 0 0 13px rgba(0, 0, 0, 0.18); box-shadow: 0 0 13px rgba(0, 0, 0, 0.18); } .categori-widget .title { font-size: 21px; font-weight: 600; text-transform: uppercase; line-height: 31px; border-bottom: 1px solid rgba(0, 0, 0, 0.20); padding-bottom: 11px; margin-bottom: 12px; text-align: center; } .categori-widget .cat-list a { line-height: 28px; font-size: 16px; -webkit-transition: 0.3s ease-in; -moz-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; transition: 0.3s ease-in; } .categori-widget .cat-list a:hover { color: #4b47fd; } .categori-widget .cat-list a i { font-size: 14px; } .latest-post-widget { margin-top: 30px; padding: 22px 30px 28px; border-radius: 10px; -webkit-box-shadow: 0 0 13px rgba(0, 0, 0, 0.18); -moz-box-shadow: 0 0 13px rgba(0, 0, 0, 0.18); box-shadow: 0 0 13px rgba(0, 0, 0, 0.18); } .latest-post-widget .title { font-size: 21px; font-weight: 600; text-transform: uppercase; line-height: 31px; border-bottom: 1px solid rgba(0, 0, 0, 0.20); padding-bottom: 11px; text-align: center; } .latest-post-widget .post-list { padding-left: 0px; margin-bottom: 0px; margin-top: 20px; } .latest-post-widget .post-list li { list-style: none; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-bottom: 14px; margin-bottom: 15px; } .latest-post-widget .post-list li:last-child { border-bottom: 0px; margin-bottom: 0px; padding-bottom: 0px; } .latest-post-widget .post-list li .post { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-item-align: start; align-self: flex-start; } .latest-post-widget .post-list li .post .post-img { width: 60px; height: 60px; margin-right: 20px; } .latest-post-widget .post-list li .post .post-img img { width: 100%; } .latest-post-widget .post-list li .post .post-details { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .latest-post-widget .post-list li .post .post-details .post-title { color: #2f3744; font-size: 14px; line-height: 20px; font-weight: 600; margin-bottom: 0px; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .latest-post-widget .post-list li .post .post-details .post-title:hover { color: #9191ff; } .latest-post-widget .post-list li .post .post-details .date { color: #7b8698; font-size: 12px; line-height: 22px; margin-bottom: 0px; } .arcive-widget { margin-top: 30px; padding: 22px 30px 19px; border-radius: 10px; -webkit-box-shadow: 0 0 13px rgba(0, 0, 0, 0.18); -moz-box-shadow: 0 0 13px rgba(0, 0, 0, 0.18); box-shadow: 0 0 13px rgba(0, 0, 0, 0.18); } .arcive-widget .title { font-size: 21px; font-weight: 600; text-transform: uppercase; line-height: 31px; border-bottom: 1px solid rgba(0, 0, 0, 0.20); padding-bottom: 11px; margin-bottom: 9px; text-align: center; } .arcive-widget .archives-list { padding-left: 0px; margin-bottom: 0px; } .arcive-widget .archives-list li { list-style: none; line-height: 36px; } .arcive-widget .archives-list li a { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 16px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .arcive-widget .archives-list li a:hover { color: #9191ff; } .tags-widget { margin-top: 30px; padding: 22px 30px 14px; border-radius: 10px; -webkit-box-shadow: 0 0 13px rgba(0, 0, 0, 0.18); -moz-box-shadow: 0 0 13px rgba(0, 0, 0, 0.18); box-shadow: 0 0 13px rgba(0, 0, 0, 0.18); } .tags-widget .title { font-size: 21px; font-weight: 600; text-transform: uppercase; line-height: 31px; border-bottom: 1px solid rgba(0, 0, 0, 0.20); padding-bottom: 11px; margin-bottom: 9px; text-align: center; } .tags-widget .tags-list { padding-left: 0px; margin-bottom: 0px; margin-top: 20px; } .tags-widget .tags-list li { list-style: none; display: inline-block; } .tags-widget .tags-list li a { font-size: 13px; text-transform: uppercase; padding: 3px 14px; background: none; border: 1px solid #e5e9f4; border-radius: 50px; color: #505b6d; display: inline-block; margin-bottom: 15px; margin-right: 9px; -webkit-transition: 0.3s ease-in; -moz-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; transition: 0.3s ease-in; } .tags-widget .tags-list li a:hover { background: #4b47fd; border-color: transparent; color: #fff; -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1); box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1); } /* live Game Area Start */ .live-game .live-game-bord{ position: relative; z-index: 9; } .live-game{ background: #ff0031; padding: 30px 0px 15px; position: relative; overflow: hidden; } .live-game::after{ position: absolute; content: ""; top: 0; right: -5%; height: 100%; width: 60%; background: #0F236B; transform: skewX(-20deg); } .live-game .live-game-bord .top-area{ display: flex; justify-content: space-between; } .live-game .live-game-bord .top-area .left{ max-width: 180px; } .live-game .live-game-bord .top-area .center{ width: 40px; height: 40px; display: inline-block; text-align: center; line-height: 40px; font-size: 16px; font-weight: 600; color: #fff; position: relative; margin-top: 7px; } .live-game .live-game-bord .top-area .center::after{ position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; border-radius: 3px; background: #ff0031; z-index: -1; transform: rotate(45deg); } .live-game .live-game-bord .top-area .right{ max-width: 180px; } .live-game .live-game-bord .bottom-area{ text-align: center; } .live-game .live-game-bord .bottom-area .text{ color: #eeee; font-size: 14px; margin-top: 20px; text-transform: uppercase; } .live-game .heading-area .title{ font-size: 16px; line-height: 26px; color: #fff; font-weight: 400; text-transform: uppercase; } .live-game .deal-counter { margin-top: 10px; } .live-game .deal-counter span { display: inline-block; margin-right: 10px; font-weight: 700; font-size: 24px; line-height: 28px; color: #fff; } .live-game .deal-counter span:last-child { margin-right: 0px; } .live-game .deal-counter span small { display: block; font-weight: 400; font-size: 14px; color: #fff; } .live-game .owl-controls .owl-nav .owl-prev, .live-game .owl-controls .owl-nav .owl-next { color: #143250; font-size: 14px; position: absolute; top: -35px; text-align: center; line-height: 30px; width: 30px; height: 30px; line-height: 30px; opacity: 1; background: none; border-radius: 50%; color: #fff; -webkit-transition: 0.3s ease-in; -moz-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; transition: 0.3s ease-in; } .live-game .owl-controls .owl-nav .owl-prev:hover, .live-game .owl-controls .owl-nav .owl-next:hover { background: #4b47fd; } .live-game .owl-controls .owl-nav .owl-prev { right: 60px; } .live-game .owl-controls .owl-nav .owl-next { right: 25px; } /* Water bg */ .heder-slider-area{ position: relative; overflow: hidden; } .water canvas { z-index: 5; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .water .heder-slider-area .overlay { display: none; } /* Particles bg */ .particales-home div#particles-js{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* video-home bg */ .video-home .overlay{ opacity: .8; } .mb_YTPBar .buttonBar { display: none; } /* Parallax Area Start */ .parallex .heder-slider-area.header-bg, .parallex .about-area.about-bg, .parallex .counter-area.counter-bg, .parallex .expert-team-area, .parallex .affiliate-area, .parallex .contact-area, .parallex .footer-area.footer-bg { background-attachment: fixed; } .heder-slider-area .overlay { opacity: 0.70!important; /*opacity: 0.90!important;*/ } .ptable table{ margin: 30px auto; border-collapse: collapse; } .ptable{ margin: 0px 0% 30px 0%; } th, td { padding: 10px; } th{ background-color: black; color: #ffe221; } .headin{ text-align: center; text-decoration: none; color: #ffe221; margin: 30px; display: block; } .wpos{ text-align: center; } .wpos td{ color: #77ff21; font-weight: bolder; } tr.wpos{ background-color: #d1d6db7d; } tr.pos{ background-color: #d1d6db7d; } .pos{ text-align: center; } .pos td{ color: #fff810; font-weight: bolder; } table .col{ border-bottom: 1px solid #FFFFFF; } .wpos:hover{ background-color: #77ff21; } .wpos:hover td{ color: #000000; } .pos:hover{ background-color: #ff7b21; } .pos:hover td{ color: #000000; } .nav-tracker .single-counter-box{ background-color: transparent; border: 1px solid #eee; display: inline-block; color: #d8d8d8 !important; border-radius: 50px; padding: 10px; text-align: center; margin: 0 10px; } .nav-tracker .single-counter-box h5 { font-weight:500!important; font-size:16px!important;} .aboutus-section { padding: 50px 0; background-image: url(../img/stad2.jpg); background-size: cover; background-position: center; position: relative; } .aboutus-section .overlay { position: absolute; content: " "; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0 0 0); opacity: 0.80; } .aboutus-title { font-size: 30px; letter-spacing: 0; line-height: 32px; margin: 0 0 39px; padding: 0 0 11px; position: relative; text-transform: uppercase; color: #FFF; } .aboutus-title::after { background: #ff0031 none repeat scroll 0 0; bottom: 0; content: ""; height: 2px; left: 0; position: absolute; width: 54px; } .aboutus-text { color: #FFF; font-size: 16px; margin: 0 0 35px; } a:hover, a:active { color: #ff0031; text-decoration: none; outline: 0; } .aboutus-more { border: 1px solid #ff0031; border-radius: 25px; color: #ff0031; display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: 0; padding: 7px 20px; text-transform: uppercase; } .feature .feature-box .iconset { /* background: #fff none repeat scroll 0 0; */ float: left; position: relative; width: 15%; } .feature .feature-box .iconset::after { /* background: #ff0031 none repeat scroll 0 0; */ content: ""; height: 150%; left: 43%; position: absolute; top: 100%; width: 1px; } .feature .feature-box .feature-content h4 { color: #0f0f0f; font-size: 18px; letter-spacing: 0; line-height: 22px; margin: 0 0 5px; } .feature .feature-box{ margin: 10px 0; } .feature .feature-box .feature-content { float: left; padding-left: 0; margin: 10px 0; width: 78%; } .feature .feature-box .feature-content h4 { color: #fff; font-size: 18px; letter-spacing: 0; line-height: 22px; margin: 0 0 5px; } .feature .feature-box .feature-content p { color: #606060; font-size: 13px; line-height: 22px; } .feature .icon { color : #ff0031; padding:0px; font-size:40px; border: 1px solid #ff0031; border-radius: 100px; font-size: 28px; height: 70px; line-height: 70px; text-align: center; width: 70px; } .sports-state .card .card-title{ box-shadow: 1px 1px 10px 1px #ccc; } .sports-state .cards{ display: flex; } .sports-state .card{ margin: 10px 8px; width: 155px; transform-style: preserve-3d; transition: .5s; } .sports-state .card:hover{ transform:scale(1.5); transition: .5s; } .sports-state .card ul { margin-left: 10px; } .sports-state .card ul li{ list-style: circle; transition: .5s; font-weight: bold; text-align: left; } .sports-state .card ul li:hover{ margin-left:5px; transition: .5s; cursor: pointer; } /*City-panel*/ .city-box {background-image:url(../img/bg/card-bg.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-alaska {background-image:url(../img/bg/card-bg-alaska.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-newjersey {background-image: url(../img/bg/card-bg-new-jersey.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-arizona {background-image: url(../img/bg/card-bg-arizona-.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-alabama {background-image: url(../img/bg/card-bg-alabama.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-california {background-image: url(../img/bg/card-bg-california.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-nevada {background-image: url(../img/bg/card-bg-nevada.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-colorado {background-image: url(../img/bg/card-bg-colorado.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-connecticut {background-image: url(../img/bg/card-bg-connecticut.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-delaware {background-image: url(../img/bg/card-bg-delaware.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-florida {background-image: url(../img/bg/card-bg-florida.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-georgia {background-image: url(../img/bg/card-bg-georgia.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-hawaii {background-image: url(../img/bg/card-bg-hawaii.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-idaho {background-image: url(../img/bg/card-bg-idaho.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-illinois {background-image: url(../img/bg/card-bg-illinois.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-indiana {background-image: url(../img/bg/card-bg-indiana.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-iowa {background-image: url(../img/bg/card-bg-iowa.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-kansas {background-image: url(../img/bg/card-bg-kansas.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-kentucky {background-image: url(../img/bg/card-bg-kentucky.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-louisiana {background-image: url(../img/bg/card-bg-louisiana.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-maine {background-image: url(../img/bg/card-bg-maine.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-maryland {background-image: url(../img/bg/card-bg-maryland.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-massachusetts {background-image: url(../img/bg/card-bg-massachusetts.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-michigan {background-image: url(../img/bg/card-bg-michigan.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-minnesota {background-image: url(../img/bg/card-bg-minnesota.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-mississippi {background-image: url(../img/bg/card-bg-mississippi.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-missouri {background-image: url(../img/bg/card-bg-missouri.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-montana {background-image: url(../img/bg/card-bg-montana.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-nebraska {background-image: url(../img/bg/card-bg-nebraska.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-newhampshire {background-image: url(../img/bg/card-bg-newhampshire.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-newmexico {background-image: url(../img/bg/card-bg-newmexico.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-newyork {background-image: url(../img/bg/card-bg-newyork.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-northcarolina {background-image: url(../img/bg/card-bg-northcarolina.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-northdakota {background-image: url(../img/bg/card-bg-northdakota.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-ohio {background-image: url(../img/bg/card-bg-ohio.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-oklahoma {background-image: url(../img/bg/card-bg-oklahoma.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-oregon {background-image: url(../img/bg/card-bg-oregon.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-pennsylvania {background-image: url(../img/bg/card-bg-pennsylvania.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-rhodeisland {background-image: url(../img/bg/card-bg-rhodeisland.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-southcarolina {background-image: url(../img/bg/card-bg-southcarolina.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-southdakota {background-image: url(../img/bg/card-bg-southdakota.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-tennessee {background-image: url(../img/bg/card-bg-tennessee.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-texas {background-image: url(../img/bg/card-bg-texas.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-utah {background-image: url(../img/bg/card-bg-utah.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-vermont {background-image: url(../img/bg/card-bg-vermont.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-virginia {background-image: url(../img/bg/card-bg-virginia.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-washington {background-image: url(../img/bg/card-bg-washington.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-westvirginia {background-image: url(../img/bg/card-bg-westvirginia.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-wisconsin {background-image: url(../img/bg/card-bg-wisconsin.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-wyoming {background-image: url(../img/bg/card-bg-wyoming.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-ontario {background-image: url(../img/bg/card-bg-ontario.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-quebec {background-image: url(../img/bg/card-bg-quebec.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-novascotia {background-image: url(../img/bg/card-bg-novascotia.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-newbrunswick {background-image: url(../img/bg/card-bg-newbrunswick.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-manitoba {background-image: url(../img/bg/card-bg-manitoba.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-britishcolumbia {background-image: url(../img/bg/card-bg-britishcolumbia.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-princeedwardisland {background-image: url(../img/bg/card-bg-princeedwardisland.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-saskatchewan {background-image: url(../img/bg/card-bg-saskatchewan.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-alberta {background-image: url(../img/bg/card-bg-alberta.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important; background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-newfoundland {background-image: url(../img/bg/card-bg-newfoundland.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-northwestterritories {background-image: url(../img/bg/card-bg-northwestterritories.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-yukon {background-image: url(../img/bg/card-bg-yukon.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box-nunavut {background-image: url(../img/bg/card-bg-nunavut.jpg), linear-gradient(rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.84) 100%)!important;background-position: center; background-repeat: no-repeat;background-size: cover;} .city-box .card-body li, .city-box-nevada .card-body li, .city-box-california .card-body li, .city-box-alabama .card-body li, .city-box-arizona .card-body li, .city-box-alaska .card-body li, .city-box-newjersey .card-body li, .city-box-colorado .card-body li, .city-box-connecticut .card-body li, .city-box-delaware .card-body li, .city-box-florida .card-body li, .city-box-georgia .card-body li, .city-box-hawaii .card-body li, .city-box-idaho .card-body li, .city-box-illinois .card-body li, .city-box-indiana .card-body li, .city-box-iowa .card-body li, .city-box-kansas .card-body li, .city-box-kentucky .card-body li, .city-box-louisiana .card-body li, .city-box-maine .card-body li, .city-box-maryland .card-body li, .city-box-massachusetts .card-body li, .city-box-michigan .card-body li, .city-box-minnesota .card-body li, .city-box-mississippi .card-body li, .city-box-missouri .card-body li, .city-box-montana .card-body li, .city-box-nebraska .card-body li, .city-box-newhampshire .card-body li, .city-box-newmexico .card-body li, .city-box-newyork .card-body li, .city-box-northcarolina .card-body li, .city-box-northdakota .card-body li, .city-box-ohio .card-body li, .city-box-oklahoma .card-body li, .city-box-oregon .card-body li, .city-box-pennsylvania .card-body li, .city-box-rhodeisland .card-body li, .city-box-southcarolina .card-body li, .city-box-southdakota .card-body li, .city-box-tennessee .card-body li, .city-box-texas .card-body li, .city-box-utah .card-body li, .city-box-vermont .card-body li, .city-box-virginia .card-body li, .city-box-washington .card-body li, .city-box-westvirginia .card-body li, .city-box-wisconsin .card-body li,.city-box-wyoming .card-body li, .city-box-ontario .card-body li, .city-box-quebec .card-body li, .city-box-novascotia .card-body li, .city-box-newbrunswick .card-body li, .city-box-manitoba .card-body li, .city-box-britishcolumbia .card-body li, .city-box-princeedwardisland .card-body li, .city-box-saskatchewan .card-body li, .city-box-alberta .card-body li, .city-box-newfoundland .card-body li, .city-box-northwestterritories .card-body li, .city-box-yukon .card-body li, .city-box-nunavut .card-body li{color:#fff;} /*************************************** league-finder ***************************************************/ .leaguefinder-section { padding: 50px 0px; background-image: url(../img/stad2.jpg); background-size: cover; background-position: center; position: relative; } .leaguefinder-section .overlay { position: absolute; content: " "; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0 0 0); opacity: 0.80; } .leaguefinder-container { background:#FFF; border-radius:10px; padding:30px;} .leaguefinder-title { font-size: 30px; letter-spacing: 0; line-height: 32px; margin: 0 0 39px; padding: 20px 0 11px; position: relative; text-transform: uppercase; color: #31323a; } .leaguefinder-title::after { background: #ff0031 none repeat scroll 0 0; bottom: 0; content: ""; height: 2px; left: 48%; position: absolute; width: 54px; } .leaguefinder-text { color: #31323a; font-size: 16px; margin: 0 0 35px; } .leaguefinder-section h4 {color: #31323a; font-size: 18px; line-height: 30px; font-weight: 600; margin-top: 0; margin-bottom: 17px; text-transform: uppercase; padding: 20px 0px 0px; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in;} .filter input[type="text"],.filter input[type="email"],.filter input[type="tel"],.filter input[type="url"],.filter select,.filter button[type="submit"] {font-size:14px;} #contact { background: #F9F9F9; text-align:center; position:relative; padding: 25px 25px 10px; margin: 35px 0; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);} .filter label { color:#31323a;} .filter select { width: 100%; border: 1px solid #31323a; background: #FFF; color:#31323a; margin: 0 0 5px; padding: 10px;} table.filter-table th { background:#f3f3f3;color:#31323a;} .chat-box {position: relative; width:100%;} /* Button used to open the chat form - fixed at the bottom of the page */ .open-button { background-color: #555; color: white; padding: 16px 20px; border: none; cursor: pointer; opacity: 0.8;/* position: fixed; bottom: 23px; left:178px;*/ width: 100px; margin-top:30px; } /* The popup chat - hidden by default */ .open-button { background-color: #dc3545; color: white; padding: 16px 20px; border: none; cursor: pointer; opacity: 0.8; position: fixed; top: 30%; right: 18px; width: 100px; border-radius: 10px; z-index: 999; } /* The popup chat - hidden by default */ .chat-popup { display: none; position: fixed; top: 10%; padding: 10px; right: 15px; border:1px solid #f1f1f1; background: #fff; z-index: 999; width:50%; } .chat-popup h1 { font-size:16px; font-weight: 600; padding: 5px;} /* Full-width textarea */ .chat-popup1 { border:1px solid #f1f1f1; background: #fff; z-index: 999; width:100%; } .chat-popup1 h1 { font-size:16px; font-weight: 600; padding: 5px;} /* Full-width textarea */ #chat-messages{ display:flex; flex-direction:column-reverse; height: 300px; } #chat-messages::scrollbar{ background: gray; color: gray; } #chat-messages::scrollbar-button{ background: purple; color: purple; } /* width */ #chat-messages::-webkit-scrollbar { width: 5px; } /* Track */ #chat-messages::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px; } /* Handle */ #chat-messages::-webkit-scrollbar-thumb { background: #138496;; border-radius: 10px; } /* Handle on hover */ #chat-messages::-webkit-scrollbar-thumb:hover { background: #b30000; } @media (max-width:800px) { .open-button { bottom: 500px; right: 18px; } .chat-popup{ top: 10%; } } .form-container textarea { width: 100%; padding: 8px; margin: 5px 0 5px 0; border: none; background: #f1f1f1; resize: none; height:45px; } /* When the textarea gets focus, do something */ .form-container textarea:focus { background-color: #ddd; outline: none; } /* Set a style for the submit/send button */ .form-container .btn { background-color: #4CAF50; color: white; padding: 8px 15px; border: none; cursor: pointer; width: 100%; margin-bottom:10px; opacity: 0.8; } /* Add a red background color to the cancel button */ .form-container .cancel { background-color: #fff; position:absolute; top:0px; right:0px; padding: 2px; width:49px; height: 49px; } /* Add some hover effects to buttons */ .form-container .btn:hover, .open-button:hover { opacity: 1; } /*CHAT*/ #chatview{ width:100%; height:250px; position:absolute; top:0; left:0; display:none; background:#fff; } #profile{ height:153px; overflow:hidden; text-align:center; color:#fff; } .p1 #profile{ background:#fff url("") 0 0 no-repeat; } #profile .avatar{ width:68px; border:3px solid #fff; margin:23px 0 0; border-radius:50%; } #profile p{ font-weight:600; font-size:15px; margin:118px 0 -1px; opacity:0; -webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -ms-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); } #profile p.animate{ margin-top:97px; opacity:1; -webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -ms-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); } #profile span{ font-weight:400; font-size:11px; } #chat-messages{ opacity:0; background: #fff; margin-top:30px; width:100%; height:320px; overflow-y:scroll; overflow-x:hidden; padding-right: 20px; -webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -ms-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); } #chat-messages.animate{ opacity:1; margin-top:0; } #chat-messages label{ color:#aab8c2; font-weight:600; font-size:12px; text-align:center; margin:15px 0; width:290px; display:block; } #chat-messages div.message{ padding:0 0 30px 58px; clear:both; margin-bottom:45px; } #chat-messages div.message.right{ padding: 0 58px 30px 0; margin-right: -19px; margin-left: 19px; } #chat-messages .message img{ float: left; margin-left: -38px; border-radius: 50%; width: 30px; margin-top: 12px; } #chat-messages div.message.right img{ float: right; margin-left: 0; margin-right: -38px; } .message .bubble{ background:#f0f4f7; font-size:13px; font-weight:600; padding:12px 13px; border-radius:5px 5px 5px 0px; color:#8495a3; position:relative; float:left; } #chat-messages div.message.right .bubble{ float:right; border-radius:5px 5px 0px 5px ; } .bubble .corner{ background:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/bubble-corner.png") 0 0 no-repeat; position:absolute; width:7px; height:7px; left:-5px; bottom:0; } div.message.right .corner{ background:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/bubble-cornerR.png") 0 0 no-repeat; left:auto; right:-5px; } .bubble span{ color: #aab8c2; font-size: 11px; position: absolute; right: 0; bottom: -22px; } .bubble i.me{ color: #aab8c2; font-size: 11px; position: absolute; left: 0px; bottom: -22px; } .bubble i.other{ color: #aab8c2; font-size: 11px; position: absolute; left: 10px; bottom: -22px; } #sendmessage{ height:60px; border-top:1px solid #e7ebee; position:absolute; bottom:0; right:0px; width:290px; background:#fff; padding-bottom:50px; } /* #sendmessage input{ border } */ #sendmessage input{ background: #fff; margin:21px 0 0 21px; border:none; padding:0; font-size:14px; font-family:"Open Sans", sans-serif; font-weight:400px; color:#aab8c2; } #sendmessage input:focus{ outline: 0; } #sendmessage button{ background:#fff url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/send.png") 0 -41px no-repeat; width:30px; height:30px; position:absolute; right: 15px; top: 23px; border:none; } #sendmessage button:hover{ cursor:pointer; background-position: 0 0 ; } #sendmessage button:focus{ outline: 0; } #close{ position:absolute; top: 8px; opacity:0.8; right: 10px; width:20px; height:20px; cursor:pointer; } #close:hover{ opacity:1; } .cx, .cy{ background:#fff; position:absolute; width:0px; top:15px; right:15px; height:3px; -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } .cx.s1, .cy.s1{ right:0; width:20px; -webkit-transition: all 100ms ease-out; -moz-transition: all 100ms ease-out; -ms-transition: all 100ms ease-out; -o-transition: all 100ms ease-out; transition: all 100ms ease-out; } .cy.s2{ -ms-transform: rotate(50deg); -webkit-transform: rotate(50deg); transform: rotate(50deg); -webkit-transition: all 100ms ease-out; -moz-transition: all 100ms ease-out; -ms-transition: all 100ms ease-out; -o-transition: all 100ms ease-out; transition: all 100ms ease-out; } .cy.s3{ -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 100ms ease-out; -moz-transition: all 100ms ease-out; -ms-transition: all 100ms ease-out; -o-transition: all 100ms ease-out; transition: all 100ms ease-out; } .cx.s1{ right:0; width:20px; -webkit-transition: all 100ms ease-out; -moz-transition: all 100ms ease-out; -ms-transition: all 100ms ease-out; -o-transition: all 100ms ease-out; transition: all 100ms ease-out; } .cx.s2{ -ms-transform: rotate(140deg); -webkit-transform: rotate(140deg); transform: rotate(140deg); -webkit-transition: all 100ms ease-out; -moz-transition: all 100ms ease-out; -ms-transition: all 100ease-out; -o-transition: all 100ms ease-out; transition: all 100ms ease-out; } .cx.s3{ -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: all 100ease-out; -moz-transition: all 100ms ease-out; -ms-transition: all 100ms ease-out; -o-transition: all 100ms ease-out; transition: all 100ms ease-out; } #chatview, #sendmessage { overflow:hidden; border-radius:6px; } .chat-popup2 { border:1px solid #f1f1f1; background: #fff; z-index: 999; width:100%; } /*************************************** Profile ***************************************************/ .profile-section { padding: 50px 0px; background: url(../img/profile-bg.jpg); background-size: cover; background-position: center; position: relative; } .profile-section .overlay { position: absolute; content: " "; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0 0 0); opacity: 0.80; } .profile-container { opacity:0.9; border-radius:10px; padding:30px;} .profile-nav { /*border-bottom:1px solid #007bff;border-top:1px solid #007bff;*/ background: #fff; margin-bottom:30px; position:relative;} .profile-nav ul {} .profile-nav ul li { display:inline; float:left;padding: 25px 25px 25px;} .profile-nav ul li.pic { width:80px; height:80px;} .profile-nav ul li a { color: #000; position: relative; font-weight: 600; font-size: 18px; text-transform:none; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .profile-nav ul li a:hover{ color:#007bff; } .profile-nav ul li a.active{ color:#007bff; } .profile-details { color:#000;} .profile-details h4 {/*color: #007bff;*/ color:#000; font-size: 24px; line-height: 30px; font-weight: 600; text-transform: uppercase; margin: 15px 0px;} .profile-details h6 {font-size:18px; text-transform: uppercase; font-weight: 500; margin-bottom: 10px;} .profile-details p, .profile-details ul li { color:#fff; list-style-type:disc;} .profile-details a {color:#ff0031; text-decoration:none;} .profile-details a:hover { text-decoration:underline;} .bdr {border-top:1px solid #FFF; padding:10px 0px;} .profile-card { box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06); } .profile-details .name { font-size:18px; font-weight:bold;/*color: #007bff;*/} .profile-card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #FFF; background-clip: border-box; border: 0 solid rgba(0,0,0,.125); border-radius: .25rem; } .profile-card-body { flex: 1 1 auto; min-height: 1px; padding:25px; } /*Account*/ .form-panel { background:#fff; padding:30px 30px; color:#000; border-radius: 4rem; box-shadow: 0 0 40px #777;} .form-panel h2 { font-size:30px; color:#000; text-transform:uppercase; line-height:32px; font-weight:300; margin-bottom:30px; font-style:normal;} .form-panel h2 span { font-size:25px; color:#000;} .form-panel h4 { font-size:20px; color:#000; text-transform:uppercase; line-height:32px; font-weight:600; margin:30px 0px 20px; font-style:normal;} .form-panel p { font-size:18px; color:#232323; line-height:22px; margin-bottom:15px;} .form-panel label { width:100%; font-size:16px; text-transform:capitalize; font-weight:500; color:#000; line-height:22px; margin-bottom:5px;} .form-panel .icon-container { margin-bottom:15px;} .form-panel form input.input-text { font-size: 14px; border:1px solid #e7e7e7; width: 95%; color:#000!important; height:40px; outline: none; padding:10px 15px; background:none; margin-bottom: 15px; vertical-align: top} .form-panel form select { font-size: 14px; border:1px solid #e7e7e7; width: 95%; color:#000!important; height:40px; outline: none; padding:10px 15px; background:none; margin-bottom: 15px;} .form-control::-webkit-input-placeholder{color:#6a6b6b;opacity:1} .form-panel form input.input-text::placeholder {color: #6a6b6b; opacity: 1; /* Firefox */} .form-panel form input.input-text:-ms-input-placeholder { /* Internet Explorer 10-11 */ color:#6a6b6b;} .form-panel form input.input-text::-ms-input-placeholder { /* Microsoft Edge */ color:#6a6b6b;} .form-panel form textarea.input-text {font-size: 14px; border:1px solid #e7e7e7; width: 95%; color:#6a6b6b!important; height:40px; outline: none; padding:10px 15px; background:none; margin-bottom: 15px;} .form-panel form textarea.input-text {height: 100px; resize: none; padding:5px 20px;} .contact-panel { background:#fff; padding:30px 30px; color:#000; border-radius: 4rem;} .contact-panel h2 { font-size:30px; color:#000; text-transform:uppercase; line-height:32px; font-weight:300; margin-bottom:30px; font-style:normal;} .contact-panel h2 span { font-size:25px; color:#000;} .contact-panel h4 { font-size:20px; color:#000; text-transform:uppercase; line-height:32px; font-weight:600; margin:30px 0px 20px; font-style:normal;} .contact-panel p { font-size:18px; color:#232323; line-height:22px; margin-bottom:15px;} .social-icons ul li { display: inline-block; margin-right: 6px;} .social-icons ul li a { display: inline-block; color: #fff; width: 35px; height: 35px; line-height: 35px; text-align: center; border-radius: 50%; background-color: #80828e; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in;} .social-icons ul li a:hover { background-color: #ff0031;} .inner-pg-panel { background:#fff; padding:30px 30px; color:#000;} .inner-pg-panel h2 { font-size:30px; color:#000; text-transform:uppercase; line-height:32px; font-weight:300; margin-bottom:30px; font-style:normal;} .inner-pg-panel h2 span { font-size:25px; color:#000;} .inner-pg-panel h4 { font-size:20px; color:#000; text-transform:uppercase; line-height:32px; font-weight:600; margin:30px 0px 20px; font-style:normal;} .inner-pg-panel p { font-size:18px; color:#232323; line-height:22px; margin-bottom:15px;} /*FAQ*/ .accordion { background-color: #eee; color: #000; cursor: pointer; padding:8px 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; margin-bottom: 8px;} .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; display: none; background-color: white; overflow: hidden;} .panel p { font-size:14px; color:#232323; line-height:20px; margin-bottom:15px;} /*Pricing*/ .pricing-panel { background:#E7E3E3; padding:15px; color:#000; border-radius:10px; border:1px solid #DDDDDD; text-align: center;} .pricing-panel h2 { font-size:25px; color:#fff; background: #333; text-transform:uppercase;border-radius:10px; padding: 5px; line-height:32px; font-weight:300; margin-bottom:30px; font-style:normal;} .pricing-panel h2 span { font-size:25px; color:#000;} .pricing-panel h5 { font-size:20px; color:#000; text-transform:uppercase; line-height:32px; font-weight:600; margin:30px 0px 20px; font-style:normal;} .pricing-panel h5 span { font-size:18px; color:#000; font-weight: normal; text-transform:capitalize; } .pricing-panel p { font-size:18px; color:#232323; line-height:22px; margin-bottom:15px;} .pricing-panel ul { margin-bottom:15px;} .pricing-panel ul li { font-size:16px; color:#232323; line-height:20px; padding: 5px; text-align: left; list-style-type: circle; margin-left:15px;border-bottom: 1px solid #b5b5b5; } .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Style the buttons inside the tab */ .tab button { background-color: inherit; border: none; outline: none; cursor: pointer; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { background-color: #fff; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; postion:absolute; top:95px; } .tabcontent h3 {Font-size:18px; font-weight:bold; color:#000;} .tabcontent p {Font-size:14px; color:#000; border-bottom:1px solid #ddd; padding:5px 0px;} .leftPanel { position: relative; display: inline-block; left: 0px; width: 320px; height:70vh; float: left; background: #FFF; border-right: 1px solid #DDD; } .hdr { width: 100%; height: 70px; background: #FFF; } .trigger { float: left; width: 32px; height: 32px; margin: 20px 15px; margin-bottom: 0px; color: #BBB; cursor: pointer; opacity: 0.6; background: none; } .trigger:hover { opacity: 1; } .trigger > svg { width: 24px; height: 24px; fill: #888; } .searchChats { width: calc(100% - 85px); height: 40px; background: #EEE; float: left; padding: 8px; margin-top: 14px; border: none; border-radius: 4px; font-size: 14px; font-weight: 600; } .searchChats:focus { color: #444; border: 2px solid #419fd9; background: rgb(243, 243, 243); } .leftPanel .chats { width: 100%; /*height: calc(100vh - 70px);*/ float: left; overflow-x: hidden; /*overflow-y: auto;*/ height: 350px;overflow-y: scroll; } .chatButton { float: left; width: 100%; height: 80px; background: #FFF; color: #555; cursor: pointer; overflow: hidden; } .chatButton:hover { color: #555; background: #EEE; } .active, .active:hover { color: #FFF; background: #419fd9; } .chatInfo { float: left; } .chatInfo p { float: left; } .chatInfo .image img { position: absolute; width: 55px; height: 55px; background: #DDD ; background-size: cover; border-radius: 100%; margin: 13px 13px; } .chatInfo .name { float: left; font-weight: 600; margin-left: 80px; margin-top: 8px; margin-bottom: 5px; } .chatInfo .message { float: left; clear: left; margin-left: 80px; margin-top: 0px; } .status { width: 60px; height: 100%; position: relative; float: right; } .status .fixed { position: absolute; right: 10px; bottom: 10px; display: none; } div[class~="normal"] > .fixed { display: none; } div[class~="normal"] > .count { right: 65px; bottom: 3px; font-size:14px; } div[class~="onTop"] > .fixed { display: block; width: 24px; height: 24px; fill: #FFF; } div[class~="onTop"] > .count { right: 65px; bottom: 3px; background: #FFF; color: #419fd9; font-size:14px; } .status .count { position: absolute; right: 49px; bottom: 7px; width: auto; height: auto; padding: 7px; border-radius: 20px; color: #222; background: rgba(0, 0, 0, 0.12); } .status .date { position: absolute; right: 12px; top: 28px; font-size: 12px; } .status .check-icon { position: absolute; right: 48px; top: 28px; font-size: 12px; } .status .read { position: absolute; right: 53px; top: 6px; } /*collapsible*/ .collapsible-profile-details { /*background-color: #777; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; */position:relative; } .active, .collapsible-profile-details:hover { /*background-color: #555;*/ } .profile-content { padding: 0 18px; display: none; overflow: hidden; position:absolute; top:90px; left:0px; background-color: #fff; width:85%; z-index: 555; } .profile-content h2 { color:#333;} .profile-content .image { color:#333; height: 100px; position: relative;background:url("../img/baseball.jpg") no-repeat; background-size: cover;} .profile-content .image img { position: absolute; left:0px; bottom:10px; width: 55px; height: 55px; border-radius: 100%; margin: 13px 13px; } .profile-content .name { /*float: left;*/ font-weight: 600; margin-left: 80px; margin-top: 8px; margin-bottom: 5px; } .profile-content .info { /*float: left;*/ clear: left; margin-left: 80px; margin-top: 0px; } /*message-box1*/ /************************************************ ************************************************ Search Box ************************************************ ************************************************/ .chat-search-box { -webkit-border-radius: 3px 0 0 0; -moz-border-radius: 3px 0 0 0; border-radius: 3px 0 0 0; padding: .75rem 1rem; } .chat-search-box .input-group .form-control { -webkit-border-radius: 2px 0 0 2px; -moz-border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px; border-right: 0; } .chat-search-box .input-group .form-control:focus { border-right: 0; } .chat-search-box .input-group .input-group-btn .btn { -webkit-border-radius: 0 2px 2px 0; -moz-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; margin: 0; } .chat-search-box .input-group .input-group-btn .btn i { font-size: 1.2rem; line-height: 100%; vertical-align: middle; } @media (max-width: 767px) { .chat-search-box { display: none; } } /************************************************ ************************************************ Users Container ************************************************ ************************************************/ .users-container { position: relative; padding: 1rem 0; border-right: 1px solid #e6ecf3; height: 100%; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; } /************************************************ ************************************************ Users ************************************************ ************************************************/ .users { padding: 0; } .users .person { position: relative; width: 100%; padding: 10px 1rem; cursor: pointer; border-bottom: 1px solid #f0f4f8; } .users .person:hover { background-color: #ffffff; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#e9eff5), to(#ffffff)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #e9eff5, #ffffff); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #e9eff5, #ffffff); /* FF3.6 */ background-image: -ms-linear-gradient(right, #e9eff5, #ffffff); /* IE10 */ background-image: -o-linear-gradient(right, #e9eff5, #ffffff); /* Opera 11.10+ */ background-image: linear-gradient(right, #e9eff5, #ffffff); } .users .person.active-user { background-color: #ffffff; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f9fb), to(#ffffff)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #f7f9fb, #ffffff); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #f7f9fb, #ffffff); /* FF3.6 */ background-image: -ms-linear-gradient(right, #f7f9fb, #ffffff); /* IE10 */ background-image: -o-linear-gradient(right, #f7f9fb, #ffffff); /* Opera 11.10+ */ background-image: linear-gradient(right, #f7f9fb, #ffffff); } .users .person:last-child { border-bottom: 0; } .users .person .user { display: inline-block; position: relative; margin-right: 10px; } .users .person .user img { width: 48px; height: 48px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .users .person .user .status { width: 10px; height: 10px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; background: #e6ecf3; position: absolute; top: 0; right: 0; } .users .person .user .status.online { background: #9ec94a; } .users .person .user .status.offline { background: #c4d2e2; } .users .person .user .status.away { background: #f9be52; } .users .person .user .status.busy { background: #fd7274; } .users .person p.name-time { font-weight: 600; font-size: .85rem; display: inline-block; } .users .person p.name-time .time { font-weight: 400; font-size: .7rem; text-align: right; color: #8796af; } @media (max-width: 767px) { .users .person .user img { width: 30px; height: 30px; } .users .person p.name-time { display: block; font-size:.7rem; font-weight: 400; text-align: left; } .users .person p.name-time .time { display: none; } } /************************************************ ************************************************ Chat right side ************************************************ ************************************************/ .selected-user { width: 100%; padding: 0 15px; min-height: 64px; line-height: 64px; border-bottom: 1px solid #e6ecf3; -webkit-border-radius: 0 3px 0 0; -moz-border-radius: 0 3px 0 0; border-radius: 0 3px 0 0; } .selected-user span { line-height: 100%; } .selected-user span.name { font-weight: 700; } .chat-container { position: relative; padding: 1rem; } .chat-container li.chat-left, .chat-container li.chat-right { display: flex; /* flex: 1; */ flex-direction: row; margin-bottom: 30px; position:relative; } .chat-container li img { width: 38px; height: 38px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 30px; } .chat-container li .chat-avatar { margin-right: 20px; } .chat-container li.chat-right { justify-content: flex-end; } .chat-container li.chat-right > .chat-avatar { margin-left: 5px; margin-right: 0; } .chat-container li .chat-name { font-size: .75rem; color: #999999; text-align: center; } .chat-container li .chat-text { max-width: 80%; padding: .4rem 1rem; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #ffffff; font-weight: 300; line-height: 150%; position: relative; } .chat-container li .chat-text:before { content: ''; position: absolute; width: 0; height: 0; top: 10px; left: -20px; border: 10px solid; border-color: transparent #ffffff transparent transparent; } .chat-container li.chat-right > .chat-text { text-align: left; } .chat-container li.chat-right > .chat-text:before { right: -20px; border-color: transparent transparent transparent #ffffff; left: inherit; } .chat-container li .chat-hour { padding: 0; margin-bottom: 10px; font-size: .75rem; display: flex; flex-direction: row; align-items: center; justify-content: center; margin: 0 0 0 15px; } .chat-right .chat-hour{ position:absolute; bottom: -22px; right: 28px; } .chat-left .chat-hour{ position:absolute; bottom: -22px; left: 42px; } .chat-container li .chat-hour > span { font-size: 16px; color: #9ec94a; } .chat-container li.chat-right > .chat-hour { margin: 0 15px 0 0; } @media (max-width: 767px) { .chat-container li.chat-left, .chat-container li.chat-right { flex-direction: column; margin-bottom: 30px; } .chat-container li img { width: 32px; height: 32px; } .chat-container li.chat-left .chat-avatar { margin: 0 0 5px 0; display: flex; align-items: center; } .chat-container li.chat-left .chat-hour { justify-content: flex-end; } .chat-container li.chat-left .chat-name { margin-left: 5px; } .chat-container li.chat-right .chat-avatar { order: -1; margin: 0 0 5px 0; align-items: center; display: flex; justify-content: right; flex-direction: row-reverse; } .chat-container li.chat-right .chat-hour { justify-content: flex-start; order: 2; } .chat-container li.chat-right .chat-name { margin-right: 5px; } .chat-container li .chat-text { font-size: .8rem; } } .chat-form { padding: 15px; width: 100%; left: 0; right: 0; bottom: 0; background-color: #ffffff; border-top: 1px solid white; } ul { list-style-type: none; margin: 0; padding: 0; } .card { border: 0; background: #f4f5fb; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; margin-bottom: 2rem; box-shadow: none; } .chat-container .btn {background-color: #4CAF50; color: white; padding: 8px 15px; border: none; cursor: pointer; width: 100%; margin-bottom: 10px; opacity: 0.8;} .chat-container .btn:hover {background-color:#1B9F0C; color: white;} .profile-content1 { padding:0px; display: none; overflow: hidden; position:fixed; top:185px; right:0; background-color: #fff; width:80%; z-index: 555;box-shadow: 4px 10px #000; } .profile-content1 .image { color:#333; height:200px; position: relative;background:url("../img/baseball.jpg") no-repeat; background-position: center center; background-size: cover; text-align: center;} .profile-content1 .image h2 { text-align: center; color:#fff; text-shadow: 2px 2px 5px #000;} .profile-content1 .image p { text-align: center; color:#fff; text-shadow: 2px 2px 5px #000;} .profile-content1 .image img { width: 55px; height: 55px; border-radius: 100%; margin: 25px 13px 15px; } #close { float:right; right:30px; z-index:500; display:inline-block; padding:2px 5px; background:#fff; width:30px; height: 30px; } .profile-content1 .name { /*float: left;*/ font-weight: 600; margin-left: 80px; margin-top: 8px; margin-bottom: 5px; } .profile-content1 .info { /*float: left;*/ clear: left; margin-left: 80px; margin-top: 0px; } /*Profile-page dropdown*/ .dropbtn { background-color: #3498DB; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #2980B9; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover {background-color: #ddd;} .show {display: block;} .link_circle1{ border: 1px solid #fff; border-radius: 3rem; margin: 0 3px; } .scroll_special{ height:290px; overflow-y: scroll; } .scroll_special::scrollbar{ background: gray; color: gray; } .scroll_special::scrollbar-button{ background: purple; color: purple; } /* width */ .scroll_special::-webkit-scrollbar { width: 5px; } /* Track */ .scroll_special::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px; } /* Handle */ .scroll_special::-webkit-scrollbar-thumb { background: #138496;; border-radius: 10px; } /* Handle on hover */ .scroll_special::-webkit-scrollbar-thumb:hover { background: #b30000; } .white-popup { position: relative; background: #FFF; padding: 20px; max-width: 60%; margin: 20px auto; } @media (max-width:800px) { .white-popup { max-width: 100%; } } .myuserxy{ position: relative; } .myuserxy .status { width: 10px; height: 10px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; background: #e6ecf3; position: absolute; top: 0; right: 0; } .myuserxy .status.online { background: #9ec94a; } .myuserxy .status.offline { background: #c4d2e2; } .myuserxy .status.away { background: #f9be52; } .myuserxy .status.busy { background: #fd7274; } .inner_colss{ background: #fff; padding:12px; box-shadow: 0px 0px 8px #aaa; } .inner_colss h6{ font-weight: 100!important; } .promo_modal{ background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(../img/news/bg-3.jfif)!important; /* background-size:contain; */ background-position:center; box-shadow: 0 0 60px rgba(0,0,0,0.6); } .promo_modal .modal-header{ border-bottom:none!important; } .promo_modal .modal-footer{ border-top:none!important; } .highlight_color{ color: #ff0031!important; } .link_circle_users{ font-weight: 100!important; border: 2px solid #fff; padding: 10px; border-radius: 2rem; font-size: 15px; }