@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/zN7GBFwfMP4uA6AR0HCoLQ.ttf) format('truetype'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOKCWcynf_cDxXwCLxiixG1c.ttf) format('truetype'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 300; src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(https://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGMw1o1eFRj7wYC6JbISqOjY.ttf) format('truetype'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGLsbIrGiHa6JIepkyt5c0A0.ttf) format('truetype'); } .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; } .clearfix:after { clear: both; } .hide-text { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } .input-block-level { display: block; width: 100%; min-height: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { padding-top: 60px; transition: padding-top 0.4s; color: rgba(0, 0, 0, .7); background: #fafafa; font-family: 'Source Sans Pro', sans-serif; font-weight: 300; font-size: 18px; } .repeating-background-white { width: 100%; position: relative; padding-top: 85px; background: transparent url("/assets/images/cc-pattern-light.png") repeat scroll 0 0; z-index: 20; } .repeating-background-transparent { width: 100%; position: relative; padding-top: 85px; background: transparent url("/assets/images/cc-pattern-transparent.png") repeat scroll 0 0; z-index: 20; } h1, h2, h3, h4, h5, h6 { font-family: Roboto, Arial, sans-serif; font-weight: 400; } h1, h2, h3 { margin-top: 10px; } h1 { font-size: 40px; font-weight: 700; color: rgba(0, 0, 0, .8); } h2 { color: rgba(0, 0, 0, .7); font-size: 32px; font-weight: 400; } h3 { color: rgba(0, 0, 0, .44); font-size: 27px; font-weight: 300; } a { color: #34495e; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; transition: 300ms; } hr { border-top: 1px solid #bdc3c7; border-bottom: 1px solid #bdc3c7; } .form-control { font-size: 20px; } /****************************************************** CUSTOM BTN VALUES ******************************************************/ .btn { padding: 14px 24px; border: 0 none; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .btn:focus, .btn:active:focus, .btn.active:focus { outline: 0 none; } /****************************************************** STANDARD BUTTONS ******************************************************/ .btn-default { border: 2px solid #C4C4C4; color: #737373; padding: 12px 22px; } .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { background: #FFFFFF; border-color: #949494; color: #737373; } .btn-default:active, .btn-default.active { border-color: #737373; box-shadow: none; } .btn-primary { background: #2272FF; color: #ffffff; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background: #418eff; } .btn-primary:active, .btn-primary.active { background: #3b7ae3; box-shadow: none; } .btn-green { background: #08DD73; color: #ffffff; } .btn-green:hover, .btn-green:focus, .btn-green:active, .btn-green.active, .open > .dropdown-toggle.btn-green { background: #08eb7f; } .btn-green:active, .btn-green.active { background: #008c52; box-shadow: none; } .btn-orange { background: #FF9226; color: #ffffff; } .btn-orange:hover, .btn-orange:focus, .btn-orange:active, .btn-orange.active, .open > .dropdown-toggle.btn-orange { background: #ff9f40; } .btn-orange:active, .btn-orange.active { background: #d77e1f; box-shadow: none; } .btn-red { background: #F72754; color: #ffffff; } .btn-red:hover, .btn-red:focus, .btn-red:active, .btn-red.active, .open > .dropdown-toggle.btn-red { background: #ff4668; } .btn-red:active, .btn-red.active { background: #d61a46; box-shadow: none; } /****************************************************** OUTLINE BUTTONS ******************************************************/ .btn.outline { background: none; padding: 12px 22px; } .btn-primary.outline { border: 2px solid #2272FF; color: #2272FF; } .btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary { color: #fff; background-color: #418eff; border-color: #418eff; } .btn-primary.outline:active, .btn-primary.outline.active { border-color: #3b7ae3; color: #3b7ae3; box-shadow: none; } .btn-green.outline { border: 2px solid #08DD73; color: #08DD73; } .btn-green.outline:hover, .btn-green.outline:focus, .btn-green.outline:active, .btn-green.outline.active, .open > .dropdown-toggle.btn-green { border-color: #39bf87; background-color: #39bf87; color: #fff } .btn-green.outline:active, .btn-green.outline.active { border-color: #008c52; color: #008c52; box-shadow: none; } .btn-orange.outline { border: 2px solid #FF9226; color: #FF9226; } .btn-orange.outline:hover, .btn-orange.outline:focus, .btn-orange.outline:active, .btn-orange.outline.active, .open > .dropdown-toggle.btn-orange { border-color: #ff9f40; background-color: #ff9f40; color: #fff; } .btn-orange.outline:active, .btn-orange.outline.active { border-color: #d77e1f; color: #d77e1f; box-shadow: none; } .btn-red.outline { border: 2px solid #F72754; color: #F72754; } .btn-red.outline:hover, .btn-red.outline:focus, .btn-red.outline:active, .btn-red.outline.active, .open > .dropdown-toggle.btn-red { color: #fff; border-color: #ff4668; background-color: #ff4668; } .btn-red.outline:active, .btn-red.outline.active { border-color: #d61a46; color: #d61a46; box-shadow: none; } /****************************************************** GRADIENT BUTTONS ******************************************************/ .btn-primary.gradient { background: -moz-linear-gradient(top, #418eff 50%, #2272FF 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #418eff), color-stop(50%, #2272FF)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #418eff 50%, #2272FF 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #418eff 50%, #2272FF 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #418eff 50%, #2272FF 50%); /* IE10+ */ background: linear-gradient(to bottom, #418eff 50%, #2272FF 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#418eff', endColorstr='#2272FF', GradientType=0); /* IE6-9 */ } .btn-primary.gradient:hover, .btn-primary.gradient:focus, .btn-primary.gradient:active, .btn-primary.gradient.active, .open > .dropdown-toggle.btn-primary { background: -moz-linear-gradient(top, #5ea8ff 50%, #418eff 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #5ea8ff), color-stop(50%, #418eff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #5ea8ff 50%, #418eff 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #5ea8ff 50%, #418eff 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #5ea8ff 50%, #418eff 50%); /* IE10+ */ background: linear-gradient(to bottom, #5ea8ff 50%, #418eff 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5ea8ff', endColorstr='#418eff', GradientType=0); /* IE6-9 */ } .btn-primary.gradient:active, .btn-primary.gradient.active { background: -moz-linear-gradient(top, #3562c1 50%, #3b7ae3 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #3562c1), color-stop(50%, #3b7ae3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #3562c1 50%, #3b7ae3 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #3562c1 50%, #3b7ae3 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #3562c1 50%, #3b7ae3 50%); /* IE10+ */ background: linear-gradient(to bottom, #3562c1 50%, #3b7ae3 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3562c1', endColorstr='#3b7ae3', GradientType=0); /* IE6-9 */ } .btn-green.gradient { background: -moz-linear-gradient(top, #39bf87 50%, #08DD73 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #39bf87), color-stop(50%, #08DD73)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #39bf87 50%, #08DD73 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #39bf87 50%, #08DD73 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #39bf87 50%, #08DD73 50%); /* IE10+ */ background: linear-gradient(to bottom, #39bf87 50%, #08DD73 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#39bf87', endColorstr='#08DD73', GradientType=0); /* IE6-9 */ } .btn-green.gradient:hover, .btn-green.gradient:focus, .btn-green.gradient:active, .btn-green.gradient.active, .open > .dropdown-toggle.btn-green { background: -moz-linear-gradient(top, #73bf9f 50%, #39bf87 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #73bf9f), color-stop(50%, #39bf87)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #73bf9f 50%, #39bf87 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #73bf9f 50%, #39bf87 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #73bf9f 50%, #39bf87 50%); /* IE10+ */ background: linear-gradient(to bottom, #73bf9f 50%, #39bf87 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#73bf9f', endColorstr='#39bf87', GradientType=0); /* IE6-9 */ } .btn-green.gradient:active, .btn-green.gradient.active { background: -moz-linear-gradient(top, #2a8c63 50%, #008c52 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #2a8c63), color-stop(50%, #008c52)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #2a8c63 50%, #008c52 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #2a8c63 50%, #008c52 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #2a8c63 50%, #008c52 50%); /* IE10+ */ background: linear-gradient(to bottom, #2a8c63 50%, #008c52 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a8c63', endColorstr='#008c52', GradientType=0); /* IE6-9 */ } .btn-orange.gradient { background: -moz-linear-gradient(top, #ff9f40 50%, #FF9226 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #ff9f40), color-stop(50%, #FF9226)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ff9f40 50%, #FF9226 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ff9f40 50%, #FF9226 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ff9f40 50%, #FF9226 50%); /* IE10+ */ background: linear-gradient(to bottom, #ff9f40 50%, #FF9226 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9f40', endColorstr='#FF9226', GradientType=0); /* IE6-9 */ } .btn-orange.gradient:hover, .btn-orange.gradient:focus, .btn-orange.gradient:active, .btn-orange.gradient.active, .open > .dropdown-toggle.btn-orange { background: -moz-linear-gradient(top, #ffbe77 50%, #ff9f40 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #ffbe77), color-stop(50%, #ff9f40)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffbe77 50%, #ff9f40 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffbe77 50%, #ff9f40 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffbe77 50%, #ff9f40 50%); /* IE10+ */ background: linear-gradient(to bottom, #ffbe77 50%, #ff9f40 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbe77', endColorstr='#ff9f40', GradientType=0); /* IE6-9 */ } .btn-orange.gradient:active, .btn-orange.gradient.active { background: -moz-linear-gradient(top, #ba671d 50%, #d77e1f 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #ba671d), color-stop(50%, #d77e1f)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ba671d 50%, #d77e1f 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ba671d 50%, #d77e1f 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ba671d 50%, #d77e1f 50%); /* IE10+ */ background: linear-gradient(to bottom, #ba671d 50%, #d77e1f 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ba671d', endColorstr='#d77e1f', GradientType=0); /* IE6-9 */ } .btn-red.gradient { background: -moz-linear-gradient(top, #ff4668 50%, #F72754 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #ff4668), color-stop(50%, #F72754)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ff4668 50%, #F72754 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ff4668 50%, #F72754 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ff4668 50%, #F72754 50%); /* IE10+ */ background: linear-gradient(to bottom, #ff4668 50%, #F72754 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4668', endColorstr='#F72754', GradientType=0); /* IE6-9 */ } .btn-red.gradient:hover, .btn-red.gradient:focus, .btn-red.gradient:active, .btn-red.gradient.active, .open > .dropdown-toggle.btn-red { background: -moz-linear-gradient(top, #ff8096 50%, #ff4668 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #ff8096), color-stop(50%, #ff4668)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ff8096 50%, #ff4668 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ff8096 50%, #ff4668 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ff8096 50%, #ff4668 50%); /* IE10+ */ background: linear-gradient(to bottom, #ff8096 50%, #ff4668 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8096', endColorstr='#ff4668', GradientType=0); /* IE6-9 */ } .btn-red.gradient:active, .btn-red.gradient.active { background: -moz-linear-gradient(top, #af1841 50%, #d61a46 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #af1841), color-stop(50%, #d61a46)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #af1841 50%, #d61a46 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #af1841 50%, #d61a46 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #af1841 50%, #d61a46 50%); /* IE10+ */ background: linear-gradient(to bottom, #af1841 50%, #d61a46 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#af1841', endColorstr='#d61a46', GradientType=0); /* IE6-9 */ } /****************************************************** ROUNDED BUTTONS ******************************************************/ .btn.round { border-radius: 24px; } .btn-lg.round { border-radius: 32px; } .btn-sm.round { border-radius: 14px; } .btn-xs.round { border-radius: 10px; } /****************************************************** RAISED BUTTONS ******************************************************/ .btn-primary.raised { box-shadow: 0 3px 0 0 #3b7ae3; } .btn-primary.raised:active, .btn-primary.raised.active { background: #418eff; box-shadow: none; margin-bottom: -3px; margin-top: 3px; } .btn-green.raised { box-shadow: 0 3px 0 0 #008c52; } .btn-green.raised:active, .btn-green.raised.active { background: #39bf87; box-shadow: none; margin-bottom: -3px; margin-top: 3px; } .btn-orange.raised { box-shadow: 0 3px 0 0 #d77e1f; } .btn-orange.raised:active, .btn-orange.raised.active { background: #ff9f40; box-shadow: none; margin-bottom: -3px; margin-top: 3px; } .btn-red.raised { box-shadow: 0 3px 0 0 #d61a46; } .btn-red.raised:active, .btn-red.raised.active { background: #ff4668; box-shadow: none; margin-bottom: -3px; margin-top: 3px; } /****************************************************** BUTTON SIZING ******************************************************/ .btn-xs, .btn-group-xs > .btn { padding: 2px 6px; } .btn-sm, .btn-group-sm > .btn { padding: 8px 12px; } .btn-lg { padding: 20px 40px; border-radius: 4px; } .btn-xs.btn-default, .btn-xs.outline { padding: 0 4px; } .btn-sm.btn-default, .btn-sm.outline { padding: 6px 10px; } .btn-lg.btn-default, .btn-lg.outline { padding: 18px 38px; } .btn-transparent { border: 3px solid #fff; background: transparent; color: #fff; } .btn-transparent:hover { border-color: rgba(255, 255, 255, 0.5); } a:hover, a:focus { color: #3498db; text-decoration: none; outline: none; } .dropdown-menu { margin-top: -1px; min-width: 180px; } body > section { padding: 50px 0; } .turquoise, .green-sea, .sun-flower, .section-orange, .section-green, .nephrits, .carrot, .pumkin, .peter-river, .belize-hole, .section-red, .pomegranate, .amethyst, .wisteria, .clouds .silver, .wet-asphalt, .midnight-blue, .concrete, .asbestos { color: #fff; } .turquoise h1, .green-sea h1, .sun-flower h1, .section-orange h1, .section-green h1, .nephrits h1, .carrot h1, .pumkin h1, .peter-river h1, .belize-hole h1, .section-red h1, .pomegranate h1, .amethyst h1, .wisteria h1, .clouds .silver h1, .wet-asphalt h1, .midnight-blue h1, .concrete h1, .asbestos h1, .turquoise h2, .green-sea h2, .sun-flower h2, .section-orange h2, .section-green h2, .nephrits h2, .carrot h2, .pumkin h2, .peter-river h2, .belize-hole h2, .section-red h2, .pomegranate h2, .amethyst h2, .wisteria h2, .clouds .silver h2, .wet-asphalt h2, .midnight-blue h2, .concrete h2, .asbestos h2, .turquoise h3, .green-sea h3, .sun-flower h3, .section-orange h3, .section-green h3, .nephrits h3, .carrot h3, .pumkin h3, .peter-river h3, .belize-hole h3, .section-red h3, .pomegranate h3, .amethyst h3, .wisteria h3, .clouds .silver h3, .wet-asphalt h3, .midnight-blue h3, .concrete h3, .asbestos h3, .turquoise h4, .green-sea h4, .sun-flower h4, .section-orange h4, .section-green h4, .nephrits h4, .carrot h4, .pumkin h4, .peter-river h4, .belize-hole h4, .section-red h4, .pomegranate h4, .amethyst h4, .wisteria h4, .clouds .silver h4, .wet-asphalt h4, .midnight-blue h4, .concrete h4, .asbestos h4, .turquoise h5, .green-sea h5, .sun-flower h5, .section-orange h5, .section-green h5, .nephrits h5, .carrot h5, .pumkin h5, .peter-river h5, .belize-hole h5, .section-red h5, .pomegranate h5, .amethyst h5, .wisteria h5, .clouds .silver h5, .wet-asphalt h5, .midnight-blue h5, .concrete h5, .asbestos h5, .turquoise h6, .green-sea h6, .sun-flower h6, .section-orange h6, .section-green h6, .nephrits h6, .carrot h6, .pumkin h6, .peter-river h6, .belize-hole h6, .section-red h6, .pomegranate h6, .amethyst h6, .wisteria h6, .clouds .silver h6, .wet-asphalt h6, .midnight-blue h6, .concrete h6, .asbestos h6 { color: #fff; } .turquoise small, .green-sea small, .sun-flower small, .section-orange small, .section-green small, .nephrits small, .carrot small, .pumkin small, .peter-river small, .belize-hole small, .section-red small, .pomegranate small, .amethyst small, .wisteria small, .clouds .silver small, .wet-asphalt small, .midnight-blue small, .concrete small, .asbestos small { color: rgba(255, 255, 255, 0.8); } .turquoise { background-color: #1abc9c; } .green-sea { background-color: #16a085; } .sun-flower { background-color: #f1c40f; } .section-orange { background-color: #f39c12; } .section-green { background-color: #08DD73; } .nephritis { background-color: #27ae60; } .carrot { background-color: #e67e22; } .pumkin { background-color: #d35400; } .peter-river { background-color: #3498db; } .belize-hole { background-color: #2980b9; } .section-red { background-color: #F72754; } .pomegranate { background-color: #c0392b; } .amethyst { background-color: #9b59b6; } .wisteria { background-color: #8e44ad; } .clouds { background-color: #ecf0f1; } .silver { background-color: #bdc3c7; } .wet-asphalt { background-color: #34495e; } .wet-asphalt a:not(.btn) { color: #bdc3c7; } .wet-asphalt a:not(.btn):hover { color: #d9534f; } .midnight-blue { background-color: #2c3e50; } .concrete { background-color: #95a5a6; } .asbestos { background-color: #7f8c8d; } .embed-container { position: relative; padding-bottom: 56.25%; /* 16/9 ratio */ padding-top: 30px; /* IE6 workaround*/ height: 0; overflow: hidden; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #main-slider .item { height: 600px; background-position: center; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #main-slider .item .carousel-caption { top: 0; height: 600px; position: absolute; display: block !important; opacity: 0; -webkit-transition: opacity ease-in-out 500ms; -moz-transition: opacity ease-in-out 500ms; -o-transition: opacity ease-in-out 500ms; transition: opacity ease-in-out 500ms; } #main-slider .item.active .carousel-caption { opacity: 1; -webkit-transition: opacity ease-in-out 500ms; -moz-transition: opacity ease-in-out 500ms; -o-transition: opacity ease-in-out 500ms; transition: opacity ease-in-out 500ms; } #main-slider .item .carousel-caption .container { top: auto; position: relative; } #main-slider .item .carousel-content { margin-top: 139px; } #main-slider .item .boxed { padding: 10px 15px; background-color: rgba(0, 0, 0, 0.8); } #main-slider .item h2 { color: #fff; } #main-slider .item p { display: inline-block; width: 100%; } #main-slider .item .btn { border: 3px solid rgba(255, 255, 255, 0.5); color: #fff; border-radius: 0; margin-top: 5px; } #main-slider .active .animation.animated-item-1 { -webkit-animation: fadeInUp 300ms linear 300ms both; -moz-animation: fadeInUp 300ms linear 300ms both; -o-animation: fadeInUp 300ms linear 300ms both; -ms-animation: fadeInUp 300ms linear 300ms both; animation: fadeInUp 300ms linear 300ms both; } #main-slider .active .animation.animated-item-2 { -webkit-animation: fadeInUp 300ms linear 600ms both; -moz-animation: fadeInUp 300ms linear 600ms both; -o-animation: fadeInUp 300ms linear 600ms both; -ms-animation: fadeInUp 300ms linear 600ms both; animation: fadeInUp 300ms linear 600ms both; } #main-slider .active .animation.animated-item-3 { -webkit-animation: fadeInUp 300ms linear 900ms both; -moz-animation: fadeInUp 300ms linear 900ms both; -o-animation: fadeInUp 300ms linear 900ms both; -ms-animation: fadeInUp 300ms linear 900ms both; animation: fadeInUp 300ms linear 900ms both; } #main-slider .active .animation.animated-item-4 { -webkit-animation: fadeInUp 300ms linear 1200ms both; -moz-animation: fadeInUp 300ms linear 1200ms both; -o-animation: fadeInUp 300ms linear 1200ms both; -ms-animation: fadeInUp 300ms linear 1200ms both; animation: fadeInUp 300ms linear 1200ms both; } #services .media:hover .icon-md { border-radius: 10px; /*background-color: rgba(0, 0, 0, 0.8);*/ } #recent-works { padding: 90px 0; } #recent-works .item-inner { position: relative; margin: 0; } section.dark { background: #222222; color: #FAFAFA; } section.dark .btn.btn-default { background: #222222; color: #FAFAFA; border: 2px solid #FAFAFA; } section.dark .btn.btn-default:hover, section.dark .btn.btn-default:focus, section.dark .btn.btn-default:active, section.dark .btn.btn-default.active { background: #FAFAFA; color: #222222; } section.dark .portfolio-item .item-inner { background: #222222; color: #FAFAFA; padding: 0; margin: 0; border: 2px solid #FAFAFA; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; transition: 300ms; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } section.dark .portfolio-item .item-inner:hover, section.dark .portfolio-item .item-inner:focus, section.dark .portfolio-item .item-inner:active { background: #FAFAFA; } section.dark .portfolio-item .title { display: -webkit-flex; display: flex; padding: 16px; height: 215px; background: url('/assets/images/placeholder.jpg') no-repeat center center; -webkit-background-size: cover; background-size: cover; } section.dark .portfolio-item .item-inner:hover .title, section.dark .portfolio-item .item-inner:active .title, section.dark .portfolio-item .item-inner:focus .title { background-opacity: 0.4; } section.dark .portfolio-item .title h2 { -webkit-align-self: flex-end; align-self: flex-end; color: inherit; display: -webkit-flex; display: -ms-flexbox; display: flex; font-size: 24px; font-weight: 300; margin: 0; background-color: rgba(0, 0, 0, 0.5); padding: 5px 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; width: 100%; -webkit-transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms; transition: all 300ms; } section.dark .portfolio-item .item-inner:hover .title h2 { background-color: rgba(0, 0, 0, 1); } section.dark .portfolio-item .description { font-weight: 400; line-height: 18px; overflow: hidden; padding: 16px; width: 90%; } section.dark .portfolio-item .item-inner:hover .description, section.dark .portfolio-item .item-inner:active .description, section.dark .portfolio-item .item-inner:focus .description { color: #222222; } section.dark .portfolio-item h3, section.dark .portfolio-item p { padding: 0; margin-left: 10px; color: #fafafa; } section.dark .portfolio-item img { border-top-left-radius: 25px; border-top-right-radius: 25px; opacity: 1; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; transition: 300ms; width: 100%; max-width: 100%; max-height: 100%; height: auto; } .portfolio-items, .portfolio-filter { list-style: none; padding: 0; margin: 0 -20px 20px 0; } .portfolio-filter > li { display: inline-block; margin-bottom: 10px; } .portfolio-items > li { float: center; padding: 0; display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .portfolio-items.col-2 > li { width: 50%; } @media (min-width: 1200px) { .portfolio-items.col-3 > li { width: 30%; padding-right: 1%; margin-bottom: -20px; } } .portfolio-items.col-4 > li { width: 25%; } .portfolio-items.col-5 > li { width: 20%; } .portfolio-items.col-6 > li { width: 16%; } .portfolio-item { padding: 0; margin: 0; } .portfolio-item .item-inner { background: #fff; padding: 0; margin: 20px 20px 20px 0; position: relative; text-align: left; border-radius: 2px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); } .portfolio-item .item-content { display: inline-block; border-left: 50px solid black; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; width: 100%; color: rgba(0, 0, 0, .7); } .portfolio-item .item-inner h2 { margin-left: 15px; margin-right: 15px; hyphens: auto; } .portfolio-item .item-inner h3 { margin: 0 0 0 15px; font-size: 15px; padding-bottom: 10px; display: inline-block; } .portfolio-item .item-inner a { /*color: #fafafa;*/ } .portfolio-item .item-inner a:hover, .portfolio-item .item-inner a:focus, .portfolio-item .item-inner a.active { /*color: #b4b4b4;*/ } .portfolio-item .item-inner hr { border: 0; border-top: 1px solid rgba(0, 0, 0, .1); margin: 10px 0 0; } .portfolio-item img { border-top-right-radius: 2px; width: 100%; } .portfolio-item .social-icon { font-size: 40px; position: absolute; width: 50px; color: #fff; padding: 6.5px; } .portfolio-item.youtube .item-content { border-color: #e52d27; } .portfolio-item.twitter .item-content { border-color: #4099FF; } #kingofdog-portfolio .portfolio-item .item-inner { background: #fff; border-radius: 10px; padding: 0; margin: 20px 20px 20px 0; position: relative; text-align: center; } a.nohover-link { color: inherit; } a.nohover-link:active, a.nohover-link:hover, a.nohover-link:focus { color: inherit; } #kingofdog-portfolio img { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .portfolio-item h5 { background: #fff; margin: 0; padding: 10px 0; font-weight: 700; font-size: 14px; color: #2c3e50; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .portfolio-item .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 215px; opacity: 0; background: rgba(255, 255, 255, 1); text-align: center; vertical-align: middle; -webkit-transition: opacity 300ms; -moz-transition: opacity 300ms; -o-transition: opacity 300ms; transition: opacity 300ms; } .portfolio-item .overlay .preview { position: relative; top: 50%; display: inline-block; margin-top: -20px; } .portfolio-item:hover .overlay { opacity: 0.4; } .recommended-articles:nth-child(2) { border-left: 1px solid gray; } /* Start: Recommended Isotope styles */ /**** Isotope Filtering ****/ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } /**** Isotope CSS3 transitions ****/ .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; } /**** disabling Isotope CSS3 transitions ****/ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } /* End: Recommended Isotope styles */ /* disable CSS transitions for containers with infinite scrolling*/ .isotope.infinite-scrolling { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } #pricing-table .plan { border-radius: 4px; list-style: none; margin: 0 0 20px; background: #3498db; text-align: center; padding: 30px 0; } #pricing-table .plan li { padding: 5px 0; color: #fff; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; transition: 300ms; } #pricing-table .plan li.plan-name { font-size: 24px; line-height: 24px; color: #fff; } #pricing-table .plan li.plan-name h3 { margin: 0; } #pricing-table .plan li.plan-price { margin-bottom: 10px; } #pricing-table .plan li.plan-price > div { display: inline-block; background-color: rgba(0, 0, 0, 0.2); padding: 10px; font-size: 24px; border-radius: 100%; width: 70px; height: 70px; } #pricing-table .plan li.plan-price > div sup { font-size: 10px; line-height: 10px; } #pricing-table .plan li.plan-price > div > small { display: block; font-size: 11px; } #pricing-table .plan li.plan-action { margin-top: 10px; border-top: 0; } #pricing-table .plan.featured { background-color: #2c3e50; } #title h1 { margin: 0; font-size: 36px; font-weight: 300; } .center { text-align: center; } #meet-the-team .designation { margin-top: 5px; display: block; font-size: 13px; } .img-thumbnail { border: 0; } .progress, .progress .bar { background: #fff; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; height: 30px; line-height: 30px; } .panel-default { border-color: transparent; } .panel-default > .panel-heading { color: #333333; background-color: #f5f5f5; border-color: transparent; } .panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: transparent; } .panel-default > .panel-heading .badge { color: #f5f5f5; background-color: #333333; } .panel-default > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: transparent; } .panel-primary { border-color: transparent; } .panel-primary > .panel-heading { color: #ffffff; background-color: #158cba; border-color: transparent; } .panel-primary > .panel-heading + .panel-collapse > .panel-body { border-top-color: transparent; } .panel-primary > .panel-heading .badge { color: #158cba; background-color: #ffffff; } .panel-primary > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: transparent; } .panel-success { border-color: transparent; } .panel-success > .panel-heading { color: #ffffff; background-color: #28b62c; border-color: transparent; } .panel-success > .panel-heading + .panel-collapse > .panel-body { border-top-color: transparent; } .panel-success > .panel-heading .badge { color: #28b62c; background-color: #ffffff; } .panel-success > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: transparent; } .panel-info { border-color: transparent; } .panel-info > .panel-heading { color: #ffffff; background-color: #75caeb; border-color: transparent; } .panel-info > .panel-heading + .panel-collapse > .panel-body { border-top-color: transparent; } .panel-info > .panel-heading .badge { color: #75caeb; background-color: #ffffff; } .panel-info > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: transparent; } .panel-warning { border-color: transparent; } .panel-warning > .panel-heading { color: #ffffff; background-color: #ff851b; border-color: transparent; } .panel-warning > .panel-heading + .panel-collapse > .panel-body { border-top-color: transparent; } .panel-warning > .panel-heading .badge { color: #ff851b; background-color: #ffffff; } .panel-warning > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: transparent; } .panel-danger { border-color: transparent; } .panel-danger > .panel-heading { color: #ffffff; background-color: #ff4136; border-color: transparent; } .panel-danger > .panel-heading + .panel-collapse > .panel-body { border-top-color: transparent; } .panel-danger > .panel-heading .badge { color: #ff4136; background-color: #ffffff; } .panel-danger > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: transparent; } .panel { border: 1px solid #e7e7e7; border-width: 0 1px 4px 1px; } .panel-default .close { color: #555555; } .jumbotron { border: 1px solid #e7e7e7; -webkit-box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.05); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.05); } .alert-success { background-color: #28b62c; border-color: #24a528; color: #ffffff; } .alert-success hr { border-top-color: #209023; } .alert-success .alert-link { color: #e6e6e6; } .alert-info { background-color: #75caeb; border-color: #40b5e3; color: #ffffff; } .alert-info hr { border-top-color: #29ade0; } .alert-info .alert-link { color: #e6e6e6; } .alert-warning { background-color: #ff851b; border-color: #ff7701; color: #ffffff; } .alert-warning hr { border-top-color: #e76b00; } .alert-warning .alert-link { color: #e6e6e6; } .alert-danger { background-color: #ff4136; border-color: #ff1103; color: #ffffff; } .alert-danger hr { border-top-color: #e90d00; } .alert-danger .alert-link { color: #e6e6e6; } .alert { border-width: 0 1px 4px 1px; } .alert .alert-link { font-weight: normal; color: #fff; text-decoration: underline; } .well { border: 1px solid #e7e7e7; -webkit-box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.05); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.05); } ul.breadcrumb { margin: 20px 0 0; background: transparent; } ul.breadcrumb > li { text-shadow: none; } ul.breadcrumb > li > a, ul.breadcrumb > li .divider { color: #fff; } ul.breadcrumb > li.active { color: rgba(255, 255, 255, 0.7); } ul.tag-cloud { list-style: none; padding: 0; margin: 0; } ul.tag-cloud li { display: inline-block; margin: 0 0 2px 0; } .btn-social { border: 0; color: #fff; border-radius: 100%; display: inline-block; width: 36px; height: 36px; line-height: 36px; text-align: center; padding: 0; } .btn-social.btn-facebook { background: #4f7dd4; } .btn-social.btn-facebook:hover { background: #789bde; } .btn-social.btn-twitter { background: #5bceff; } .btn-social.btn-twitter:hover { background: #8eddff; } .btn-social.btn-linkedin { background: #21a6d8; } .btn-social.btn-linkedin:hover { background: #49b9e3; } .btn-social.btn-google-plus { background: #dc422b; } .btn-social.btn-google-plus:hover { background: #e36957; } .btn-social:hover { color: #fff; } .navbar-inverse { border: none; background-color: rgba(236, 240, 241, 1.0); -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5); transition: height 0.4s; height: 60px; } .navbar-inverse .color-strike { margin-top: 0; height: 3px; width: 100%; background: #2272FF; transition: margin-top 0.2s; } .nanobar { height: 3px; } .bar { box-shadow: rgb(85, 153, 221) 0 0 10px; background: rgb(51, 136, 255); border-bottom-right-radius: 4px; border-top-right-radius: 4px; } .navbar-inverse .navbar-brand { font-family: 'Bubbler One', sans-serif; font-size: 0; color: #fff; } .navbar-brand { padding: 7px; transition: padding 0.3s; } .navbar-inverse .navbar-nav { transition: margin-top 0.2s; } .navbar-inverse .navbar-toggle { background-color: #2272FF; border: 0 solid gray; } .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:active, .navbar-inverse .navbar-toggle:focus { background-color: #2272FF; } .navbar-inverse .navbar-nav > li > a { transition: all 0.2s; border-radius: 0; color: #757575; line-height: 1.428571429; font-size: 20px; padding: 14.25px 15px; border-top: 2px solid rgba(0,0,0,.1); } .navbar-inverse .navbar-nav > li:hover > a, .navbar-inverse .navbar-nav > li:focus > a { color: #FAFAFA; background-color: #0058F2; } .navbar-inverse .navbar-nav > li.user:hover > a, .navbar-inverse .navbar-nav > li.user:focus > a { margin: 0; padding: 6px 15px; } .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus { background-color: #0058F2; } @media(min-width:992px) { .navbar-inverse .navbar-nav > li > a { margin: 14.25px 0; transition: all 0.2s; border-radius: 0; color: #757575; line-height: 1.428571429; font-size: 20px; padding: 0 15px; border: 0; } .navbar-inverse .navbar-nav > li.user > a { margin: 6px 0; } .navbar-inverse .navbar-nav > li:hover > a, .navbar-inverse .navbar-nav > li:focus > a { color: #FAFAFA; background-color: #2272FF; margin: 0; padding: 14.25px 15px; } .navbar-inverse .navbar-nav > li.user:hover > a, .navbar-inverse .navbar-nav > li.user:focus > a { padding: 6px 15px; } .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus { background-color: #2272FF; margin: 0; padding: 14.25px 15px; } .navbar-inverse .navbar-nav > .active.user > a, .navbar-inverse .navbar-nav > .active.user > a:hover, .navbar-inverse .navbar-nav > .active.user > a:focus, .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus { padding: 6px; margin: 0; } } .navbar-inverse .navbar-nav .dropdown-menu { background-color: #ffffff; -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);; -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);; border: 0; padding: 0; margin-top: -3px; border-radius: 2px; } @media(min-width:992px) { .navbar-inverse .navbar-nav .dropdown-menu { left: -50%; } } .navbar-inverse .navbar-nav .dropdown-menu > li > a { padding: 8px 15px; color: #757575; } .navbar-inverse .navbar-nav .dropdown-menu li:first-child a { border-top-left-radius: 2px; border-top-right-radius: 2px; } .navbar-inverse .navbar-nav .dropdown-menu li:last-child a { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } .navbar-inverse .navbar-nav .dropdown-menu > li:hover > a, .navbar-inverse .navbar-nav .dropdown-menu > li:focus > a, .navbar-inverse .navbar-nav .dropdown-menu > li.active > a { background-color: #2272FF; color: #fff; } .navbar-inverse .navbar-nav .dropdown-menu > li:hover > a, .navbar-inverse .navbar-nav .dropdown-menu > li:focus > a, .navbar-inverse .navbar-nav .dropdown-menu > li.hovered > a { background-color: #2272FF; color: #fff; } .navbar-inverse .navbar-nav .dropdown-menu > li.divider { background-color: rgba(0, 0, 0, 0.1); } .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-top: 0; } @media (max-width: 991px) { .navbar-inverse .navbar-nav > li > a, .navbar-inverse .navbar-nav .dropdown-menu > li > a, .navbar-inverse .navbar-nav .dropdown-menu { padding-top: 7px; padding-bottom: 7px; transition: padding-top 0.2s; transition: padding-bottom 0.2s; border-radius: 0; color: #ecf0f1; background-color: #2272FF; } .navbar-inverse .navbar-nav li:hover > a, .navbar-inverse .navbar-nav li:focus > a, .navbar-inverse .navbar-nav li.active > a { background-color: #0058F2; } } .navbar-inverse .navbar-collapse.in .dropdown.open .dropdown-menu { border-top: 2px solid #0058F2; border-bottom: 2px solid #0058F2; } .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: #e4e4e4; } .navbar-toggle { margin-top: 13px; margin-bottom: 0; } .icon-lg { font-size: 48px; height: 108px; width: 108px; line-height: 108px; color: #fff; margin: 10px; background-color: rgba(0, 0, 0, 0.4); text-align: center; display: inline-block !important; border-radius: 100%; } .icon-md, .icon-md-alizarin { font-size: 36px; height: 64px; width: 64px; line-height: 64px; color: #fff; /*background-color: rgba(0, 0, 0, 0.4);*/ text-align: center; display: block; border-radius: 50%; -webkit-transition: 500ms; -moz-transition: 500ms; -o-transition: 500ms; transition: 500ms; cursor: pointer; } .icon-center { margin-left: auto; margin-right: auto; } .icon-md-alizarin { color: #F72754; background-color: #fff; } .social-media-table > tbody > tr > td { -webkit-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; transition: 500ms ease-in-out; cursor: pointer; } .social-media-table > tbody > tr > td:hover, .social-media-table > tbody > tr > td:active, .social-media-table > tbody > tr > td:focus { background-color: rgba(0, 0, 0, 0.5); color: #fff; } .social-media-table .table tbody > tr > td { border-top: 0; } .fa-twitter.icon-md { background-color: #4099FF; } .fa-youtube-play.icon-md { background-color: #e52d27; } .fa-google-plus.icon-md { background-color: #d34836; } .fa-500px.icon-md { background-color: #0099e5; } .gsicon-patreon.icon-md { background-color: #E6461A; } .fa-steam.icon-md { background-color: #0A2341; } .fa-github.icon-md { background-color: #000; } .fa-twitch.icon-md { background-color: #6441A4; } .fa-spotify.icon-md { background-color: #1ED760; } .social-media-table td.twitter:hover { background-color: #4099FF; } .social-media-table td.twitter:hover i.icon-md { color: #4099FF; background-color: white; } .social-media-table td.youtube:hover { background-color: #e52d27; } .social-media-table td.youtube:hover i.icon-md { color: #e52d27; background-color: white; } .social-media-table td.google-plus:hover { background-color: #d34836; } .social-media-table td.google-plus:hover i.icon-md { color: #d34836; background-color: white; } .social-media-table td.px500:hover { background-color: #0099e5; } .social-media-table td.px500:hover i.icon-md { color: #0099e5; background-color: white; } .social-media-table td.patreon:hover { background-color: #E6461A; } .social-media-table td.patreon:hover i.icon-md { color: #E6461A; background-color: white; } .social-media-table td.steam:hover { background-color: #0A2341; } .social-media-table td.steam:hover i.icon-md { color: #0A2341; background-color: white; } .social-media-table td.github:hover { background-color: #000; } .social-media-table td.github:hover i.icon-md { color: #000; background-color: white; } .social-media-table td.twitch:hover { background-color: #6441A4; } .social-media-table td.twitch:hover i.icon-md { color: #6441A4; background-color: white; } .social-media-table td.spotify:hover { background-color: #1ED760; } .social-media-table td.spotify:hover i.icon-md { color: #1ED760; background-color: white; } .modal { border: 0; } .modal#loginForm { width: 600px; margin-left: -300px; } .modal .modal-header { border: 0; padding: 20px 20px 0; } .modal .modal-header > h4 { font-weight: 300; font-size: 14px; color: #848484; text-transform: uppercase; margin: 0; } .modal .modal-body { padding: 20px; } .modal input[type="text"], .modal input[type="password"] { padding: 5px 10px; min-height: 30px; margin-right: 10px; } .modal .icon-remove { color: #848484; position: absolute; right: -5px; top: -5px; width: 16px; height: 16px; line-height: 16px; text-align: center; display: block; background: #ebebeb; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; cursor: pointer; } .modal button { margin-left: 10px; border: 0; } .gap { margin-bottom: 50px; } .big-gap { margin-bottom: 100px; } .no-margin { margin: 0; padding: 0; } .registration-form { border: 0; background-color: #fff; padding: 20px; display: inline-block; } #bottom { color: #bdc3c7; } #bottom h4 { margin-top: 0; margin-bottom: 15px; } #bottom .media-heading { display: block; font-weight: 400; } .row > div { margin-bottom: 10px; } ul.unstyled { list-style: none; padding: 0; margin: 0; } /*Unordered Lists*/ ul.arrow, ul.arrow-double, ul.tick, ul.cross, ul.star, ul.rss { list-style: none; padding: 0; margin: 0; } ul.arrow li::before, ul.arrow-double li::before, ul.tick li::before, ul.cross li::before, ul.star li::before, ul.rss li::before, ul.arrow li::after, ul.arrow-double li::after, ul.tick li::after, ul.cross li::after, ul.star li::after, ul.rss li::after { font-family: FontAwesome; font-size: 11px; } ul.arrow li::before, ul.arrow-double li::before, ul.tick li::before, ul.cross li::before, ul.star li::before, ul.rss li::before { margin-right: 5px; } ul.arrow li::before { content: "\f105"; } ul.arrow-double li::before { content: "\f101"; } ul.tick li::before { content: "\f00c"; } ul.cross li::before { content: "\f00d"; } ul.star li::before { content: "\f006"; } ul.rss li::before { content: "\f09e"; } #footer { padding-top: 30px; padding-bottom: 30px; color: #bdc3c7; } #footer a { color: #bdc3c7; } #footer a:hover { color: #d9534f; } #footer ul { list-style: none; padding: 0; margin: 0; } #footer ul > li { display: inline-block; margin-left: 15px; } ul.social { list-style: none; margin: 10px 0 0; padding: 0; display: inline-block; } ul.social > li { display: inline-block; margin: 0 5px; } ul.social > li > a { font-size: 24px; color: #666; } ul.social > li > a:hover { color: #999; } .box-border { padding: 15px; } .accordion-group { background-color: #fff; border-top: 1px solid #f0f0f0; } .accordion-heading .accordion-toggle { color: #666; font-weight: 700; } .accordion-inner { border-top: 0; } .notice-container { width: 50%; margin-left: auto; margin-right: auto; z-index: 21; } .notice-container div { -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.75); -moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.75); box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.75); } .blog .blog-item { background-color: #fff; border-radius: 5px; margin-bottom: 10px; } .blog .blog-item .img-blog-entry { width: 100%; border-radius: 5px 5px 0 0; height: 250px; background-position: center; background-size: cover; } .blog .blog-item .blog-content .row div { margin-bottom: 0; } .img-rounded-top { width: 100%; border-radius: 5px 5px 0 0; } .blog .blog-item .img-blog-article { width: 100%; border-radius: 5px; } .blog .blog-item .blog-content { padding: 20px; } .blog .blog-content .post-title { margin-top: 0; margin-bottom: 0; } .blog .blog-content .post-subtitle { line-height: 1.22; letter-spacing: -.022em; margin-top: 5px; margin-bottom: 22px; } .blog .blog-content .blog-post { text-align: justify; hyphens: auto; } .blog-content .blog-post .img { margin: 20px auto; width: 100%; text-align: center; } .blog-content .blog-post .img img { width: 100%; } .blog-content .blog-post .img p { font-style: italic; } .blog .blog-item h3 { margin-top: 0; } .blog .blog-item .entry-meta { margin-bottom: 5px; } .blog .blog-item .entry-meta > span { display: inline-block; color: #999; margin-right: 10px; font-size: 14px; } .blog .blog-item .entry-meta > span a { color: #999; } .blog .blog-item img.img-blog { border-top-left-radius: 5px; border-top-right-radius: 5px; } .like-heart { width: 100px; height: 100px; background: url("https://cssanimation.rocks/images/posts/steps/heart.png") no-repeat; background-position: 0 0; cursor: pointer; transition: background-position 1s steps(28); transition-duration: 0s; display: inline-block; vertical-align: middle; } .like-count { display: inline-block; vertical-align: middle; } .like-heart.small { width: 40px; height: 40px; background-size: 1160px 40px; } .like-heart.liked { transition-duration: 1s; background-position: -2800px 0; } .like-heart.small.liked { transition-duration: 1s; background-position: -1120px 0; } .entry-meta { margin-bottom: 20px; } .entry-meta > span { display: inline-block; color: #999; margin-right: 10px; font-size: 14px; } .entry-meta > span a { color: #999; } ul.pagination > li > a { border: 0; } ul.pagination > li.active > a, ul.pagination > li:hover > a { background-color: #34495e; color: #fff; } textarea#message { padding: 10px 15px; height: 219px; } .widget { margin-bottom: 30px; } .widget.filled-background { background-color: #FAFAFA; padding: 5px 20px; border-radius: 10px; } .widget.filled-background .media { margin-top: 0; } ul.gallery { list-style: none; padding: 0; margin: 0; } ul.gallery li { display: block; width: 60px; padding: 0; margin: 0 4px 4px 0; float: left; } ul.faq { list-style: none; margin: 0; } ul.faq li { margin-top: 30px; } ul.faq li:first-child { margin-top: 0; } ul.faq li span.number { display: block; float: left; width: 50px; height: 50px; line-height: 50px; text-align: center; background: #34495e; color: #fff; font-size: 24px; } ul.faq li > div { margin-left: 70px; } ul.faq li > div h3 { margin-top: 0; } ul.faq .accordion-toggle::before { content: "\f106"; font-family: FontAwesome, sans-serif; } ul.faq .accordion-toggle.collapsed::before { content: '\f107'; } #error { text-align: center; margin-top: 150px; margin-bottom: 150px; } .responsive-video { position: relative; padding-bottom: 45.2%; padding-top: 62.6px; overflow: hidden; } .responsive-video iframe, .responsive-video object, .responsive-video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th { background-color: #ececec; } .table-hover > tbody tr:hover > td, .table-hover > tbody tr:hover > th { background-color: #dadada; } .section-green .table-hover > tbody > tr:hover > td, .section-green .table-hover > tbody > tr:hover > th { background-color: #08DD73; } #password::selection { background-color: #ffb7b7; } #password::-moz-selection { background-color: #ffb7b7; } .rw-wrapper { width: 80%; position: relative; margin: 110px auto 0 auto; font-family: 'Bree Serif'; padding: 10px; } .rw-sentence { margin: 0; text-align: left; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8); } .rw-sentence span { color: #444; font-size: 200%; font-weight: normal; } .rw-words { display: inline; text-indent: 10px; } .rw-words-1 span { position: absolute; opacity: 0; overflow: hidden; color: #3498db; -webkit-animation: rotateWord 18s linear infinite 0s; -ms-animation: rotateWord 18s linear infinite 0s; animation: rotateWord 18s linear infinite 0s; } .rw-words-1 span:nth-child(2) { -webkit-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; color: #c0392b; } .rw-words-1 span:nth-child(3) { -webkit-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; color: #2980b9; } .rw-words-1 span:nth-child(4) { -webkit-animation-delay: 9s; -ms-animation-delay: 9s; animation-delay: 9s; color: #16a085; } .rw-words-1 span:nth-child(5) { -webkit-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; color: #d35400; } .rw-words-1 span:nth-child(6) { -webkit-animation-delay: 15s; -ms-animation-delay: 15s; animation-delay: 15s; color: #8e44ad; } .rw-words-2 span { position: absolute; opacity: 0; overflow: hidden; color: #ecf0f1; -webkit-animation: rotateWord 18s linear infinite 0s; -ms-animation: rotateWord 18s linear infinite 0s; animation: rotateWord 18s linear infinite 0s; } .rw-words-2 span:nth-child(2) { -webkit-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; color: #ecf0f1; } .rw-words-2 span:nth-child(3) { -webkit-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; color: #ecf0f1; } .rw-words-2 span:nth-child(4) { -webkit-animation-delay: 9s; -ms-animation-delay: 9s; animation-delay: 9s; color: #ecf0f1; } .rw-words-2 span:nth-child(5) { -webkit-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; color: #ecf0f1; } .rw-words-2 span:nth-child(6) { -webkit-animation-delay: 15s; -ms-animation-delay: 15s; animation-delay: 15s; color: #ecf0f1; } @-webkit-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -webkit-transform: translateY(-30px); } 5% { opacity: 1; -webkit-transform: translateY(0px); } 17% { opacity: 1; -webkit-transform: translateY(0px); } 20% { opacity: 0; -webkit-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -ms-transform: translateY(-30px); } 5% { opacity: 1; -ms-transform: translateY(0px); } 17% { opacity: 1; -ms-transform: translateY(0px); } 20% { opacity: 0; -ms-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 5% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 17% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 20% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @media screen and (max-width: 768px) { .rw-sentence { font-size: 18px; } } @media screen and (max-width: 320px) { .rw-sentence { font-size: 9px; } } .servers a img { margin: 5px; } .typed-cursor { opacity: 1; -webkit-animation: blink 0.7s infinite; -moz-animation: blink 0.7s infinite; animation: blink 0.7s infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } .history-inline li { margin: auto 15px; font-size: 18px; word-break: normal; } .vote { width: 100%; height: 3px; } .up-vote { float: left; height: 3px; background: #27ae60; } .down-vote { float: right; height: 3px; background: #e74c3c; } .gray-vote { float: left; height: 3px; background: #95a5a6; } .up-vote-text { float: left; font-size: 20px; padding-top: 3px; cursor: default; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; transition: 300ms; } .up-vote-text i { color: #27ae60; } .down-vote-text { float: right; cursor: default; font-size: 20px; padding-top: 3px; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; transition: 300ms; } .down-vote-text i { color: #e74c3c; } .up-vote-text:hover, .up-vote-text:active { color: #2ecc71; } .down-vote-text:hover, .down-vote-text:active { color: #c0392b; } .counter { color: #27ae60; cursor: default; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; transition: 300ms; } .counter:active, .counter:hover { color: #2ecc71; } .output-encrypter, .input-encrypter { font-size: 20px; } input[type=radio] { height: 40px; } .input-full-width { width: 100%; } blockquote { padding: 10px; } #tools .left { border-right: 2px solid #e74c3c; } #tools .middle { border-right: 1px solid #e74c3c; border-left: 1px solid #e74c3c; } #tools .right { border-left: 2px solid #e74c3c; } #csgo { background: rgba(52, 73, 94, 0.5) url('/f/d90f6dbbce56e48d8c9e4b1d653d09f3') no-repeat center top; color: #fff; } #csgo .search { background: #fafafa; margin-top: -50px; } #csgo .search .content { background: transparent; padding: 25px; } #csgo .stats { background: rgba(52, 73, 94, 0.75); } #csgo .player-header { background: rgba(52, 73, 94, 0.5) url('/f/7a06618704b1868479bd1fab1a28660b') no-repeat center center; background-size: cover; width: 100%; } #csgo h1, #csgo h3 { color: #fafafa; } #csgo .player-header .content { background: rgba(52, 73, 94, 0.5); color: #fff; padding: 25px; } #csgo h1 { font-weight: 100; font-size: 64px; } #csgo .player-header h3, small { display: inline; } #csgo small { font-size: 16px; padding-left: 10px; line-height: 16px; } #csgo a { color: #fff; } #csgo h2 { font-size: 50px; font-weight: 200; padding-left: 10px; } #csgo .online, #csgo .in-game { color: rgba(46, 204, 113, 1.0); } #csgo .busy, #csgo .away { color: #e67e22; } #csgo .offline { color: rgba(231, 76, 60, 1.0); } #csgo .stats { padding: 20px; } #csgo .stats ul { list-style: none; } #csgo .stats li { line-height: 50px; display: block; margin-bottom: 25px; } #csgo .stats li svg { float: left; width: 50px; height: 50px; fill: #0bb3d6; left: 0; right: auto; margin-right: 10px; } #csgo .stats h4 { margin-bottom: 10px; line-height: 10px; color: #0bb3d6; text-transform: uppercase; white-space: nowrap; font-weight: 400; padding-left: 5px; } #csgo .stats .value { font-size: 36px; display: flex; margin-top: -15px; font-weight: 200; } #csgo .section-2 { padding-top: 20px; } #csgo .section-2 svg.heading { height: 24px; display: block; position: absolute; margin: auto; left: 5px; top: 25px; fill: #fff; width: 60px; } #csgo .section-2 h3.heading { font-weight: 200; color: rgb(11, 179, 214); } #csgo .section-2 .weapons { margin-right: 2.5px; background: rgba(52, 73, 94, 0.8); background: -webkit-linear-gradient(bottom, rgba(20, 32, 41, 0), rgba(20, 32, 41, .75) 100px); background: linear-gradient(to top, rgba(20, 32, 41, 0), rgba(20, 32, 41, .75) 100px); padding-bottom: 50px; } #csgo .section-2 .maps { margin-left: 2.5px; margin-right: 2.5px; background: rgba(52, 73, 94, 0.8); background: -webkit-linear-gradient(bottom, rgba(20, 32, 41, 0), rgba(20, 32, 41, .75) 100px); background: linear-gradient(to top, rgba(20, 32, 41, 0), rgba(20, 32, 41, .75) 100px); padding-bottom: 50px; } #csgo .section-2 .lastmatch { margin-left: 2.5px; background: rgba(52, 73, 94, 0.8); background: -webkit-linear-gradient(bottom, rgba(20, 32, 41, 0), rgba(20, 32, 41, .75) 100px); background: linear-gradient(to top, rgba(20, 32, 41, 0), rgba(20, 32, 41, .75) 100px); padding-bottom: 50px; } #csgo .weapons .item { display: block; position: relative; letter-spacing: .02em; } #csgo .weapons .content { margin: auto 10px auto -25px; } #csgo .weapons .card { height: 160px; background: url("/f/b7cc30d080b2d6aa9d78644201414939") center top no-repeat #666; background-size: 100%; } #csgo .weapons .card .title { left: 30px; color: #142029; background: rgba(255, 255, 255, .75); font-size: 18px; text-transform: uppercase; position: absolute; bottom: 5px; z-index: 2; padding: 0 8px; line-height: 28px; font-weight: 700; } #csgo .weapons .card .title .number { display: block; position: absolute; right: 100%; width: 25px; color: #fff; background: rgba(0, 0, 0, .75); text-align: center; } #csgo .weapons .card .photo { top: 0; left: 0; bottom: 0; right: 0; z-index: 1; margin: auto; max-width: 90%; max-width: calc(100% - 20px); max-height: 90%; max-height: calc(100% - 20px); width: auto; height: auto; pointer-events: none; display: block; position: absolute; } #csgo .weapons .card .stat { right: 5px; color: #fff; background: rgba(115, 46, 42, .85); font-size: 16px; position: absolute; bottom: 5px; z-index: 2; padding: 0 8px; line-height: 28px; font-weight: 700; display: block; } #csgo .weapons .stat svg { height: 28px; display: inline-block; width: 16px; fill: #fff; opacity: .9; vertical-align: top; } #csgo .weapons .line { padding: 15px 0 14px 75px; border-bottom: 1px solid rgba(125, 199, 255, .08); height: 50px; } #csgo .weapons .line .title { margin-top: -2px; font-weight: 700; font-size: 18px; text-transform: uppercase; } #csgo .weapons .line .icon { top: 0; left: 5px; bottom: 0; margin: auto; width: 60px; height: 22px; fill: #fff; display: block; position: absolute; } #csgo .weapons .line .stat { font-weight: 700; top: 15px; right: 5px; display: block; position: absolute; } #csgo .weapons .line .stat svg { margin-top: -4px; } #csgo .lastmatch .result { position: relative; padding: 20px 13px 20px 15px; color: rgba(187, 187, 187, .9); background: rgba(187, 187, 187, .05); background-image: -webkit-radial-gradient(100% 50%, circle farthest-side, rgba(187, 187, 187, .1), rgba(187, 187, 187, 0)); background-image: radial-gradient(circle farthest-side at 100% 50%, rgba(187, 187, 187, .1), rgba(187, 187, 187, 0)); font-size: 16px; font-style: italic; border-right: 2px solid; } #csgo .lastmatch .result h3 { font-size: 16px; margin-top: 1px; margin-bottom: 0; color: inherit; } #csgo .lastmatch .result.win { color: rgba(255, 198, 40, .9); background: rgba(255, 198, 40, .05); background-image: -webkit-radial-gradient(100% 50%, circle farthest-side, rgba(131, 198, 72, .1), rgba(131, 198, 72, 0)); background-image: radial-gradient(circle farthest-side at 100% 50%, rgba(131, 198, 72, .1), rgba(131, 198, 72, 0)); } #csgo .lastmatch .result .outcome { display: block; position: absolute; top: 20px; right: 12px; font-weight: 700; font-size: 16px; letter-spacing: .01em; font-style: normal; text-transform: uppercase; } #csgo .lastmatch .result .outcome svg { display: inline-block; vertical-align: bottom; margin-left: 2px; width: 22px; height: 22px; fill: currentColor; } #csgo .lastmatch .content { font-size: 13px; } #csgo .lastmatch .weapon { position: relative; margin: 0 15px; padding: 10px 0 9px; border-bottom: 1px solid rgba(125, 199, 255, .08); } #csgo .lastmatch .weapon h4 { color: rgba(11, 179, 214, .8); letter-spacing: .01em; font-size: 13px; } #csgo .lastmatch .weapon .icon { display: block; margin: 5px 0; width: 50%; height: 45px; fill: currentColor; } #csgo .lastmatch .weapon .name { font-size: 16px; font-weight: 700; text-transform: uppercase; } #csgo .lastmatch .weapon .stats { position: absolute; bottom: -9px; right: 0; line-height: 0; font-size: 0; background: transparent; } #csgo .lastmatch .weapon .stat { display: inline-block; margin-left: 20px; line-height: 20px; font-size: 16px; font-weight: 700; } #csgo .lastmatch .weapon .stat svg { display: inline-block; width: 16px; height: 20px; vertical-align: top; fill: currentColor; } #csgo .lastmatch ul.list { padding: 15px 15px 0; letter-spacing: .01em; } #csgo .lastmatch li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; padding-bottom: 10px; } #csgo .lastmatch li b { display: block; color: rgba(11, 179, 214, .9); font-weight: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; } #csgo .lastmatch li strong { display: block; font-weight: 700; text-align: right; overflow: hidden; } #csgo .otherstats { background: url('/f/c3f5a93e9aaaeb877a1d171a3be22444') no-repeat center top; margin-bottom: -50px; } #csgo .otherstats .container { margin-top: 20px; padding: 15px; background: rgba(248, 80, 50, 0); background: -moz-linear-gradient(left, rgba(248, 80, 50, 0) 0%, rgba(20, 32, 41, 0.75) 25%, rgba(20, 32, 41, 0.75) 75%, rgba(231, 56, 39, 0) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(248, 80, 50, 0)), color-stop(25%, rgba(20, 32, 41, 0.75)), color-stop(75%, rgba(20, 32, 41, 0.75)), color-stop(100%, rgba(231, 56, 39, 0))); background: -webkit-linear-gradient(left, rgba(248, 80, 50, 0) 0%, rgba(20, 32, 41, 0.75) 25%, rgba(20, 32, 41, 0.75) 75%, rgba(231, 56, 39, 0) 100%); background: -o-linear-gradient(left, rgba(248, 80, 50, 0) 0%, rgba(20, 32, 41, 0.75) 25%, rgba(20, 32, 41, 0.75) 75%, rgba(231, 56, 39, 0) 100%); background: -ms-linear-gradient(left, rgba(248, 80, 50, 0) 0%, rgba(20, 32, 41, 0.75) 25%, rgba(20, 32, 41, 0.75) 75%, rgba(231, 56, 39, 0) 100%); background: linear-gradient(to right, rgba(248, 80, 50, 0) 0%, rgba(20, 32, 41, 0.75) 25%, rgba(20, 32, 41, 0.75) 75%, rgba(231, 56, 39, 0) 100%); font-size: 13px; padding-bottom: 25px; } #csgo .otherstats .list { -webkit-column-fill: balance; -moz-column-fill: balance; column-fill: balance; -webkit-columns: 4; -moz-columns: 4; columns: 4; -webkit-column-gap: 60px; -moz-column-gap: 60px; column-gap: 60px; } #csgo .otherstats li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; padding-bottom: 10px; } #csgo .otherstats li b { color: #0bb3d6; font-weight: 400; } #csgo .otherstats li span { float: right; padding-right: 25px; font-weight: 700; } #downloadSlider img { max-height: 240px; } .glyphicon-refresh-animate { -animation: spin .7s infinite linear; -webkit-animation: spin2 .7s infinite linear; } @-webkit-keyframes spin2 { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes spin { from { transform: scale(1) rotate(0deg); } to { transform: scale(1) rotate(360deg); } } ul#downloadSlider a.active .overlay { background-color: black; } .comment-list { list-style: none; padding: 0; } .comment-list .comment-well { border: 0; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); background-color: rgb(255, 255, 255); padding: 0; border-radius: 2px; position: relative; height: 100px; } .comment-list .comment-well img { height: 100px; display: inline-block; margin-right: 10px; border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .comment-list .comment-well .entry-image { height: 100px; display: inline-block; margin-right: 10px; border-top-left-radius: 2px; border-bottom-left-radius: 2px; width: 177px; background-repeat: no-repeat; background-position: center center; background-size: cover; } .comment-list .comment-well .content { display: inline-block; vertical-align: top; position: absolute; top: 0; overflow: auto; height: 100%; } .comment-list .comment-well .content.small { margin-right: 100px; } .comment-list .comment-well h3 { color: rgb(97, 97, 97); font-size: 20px; margin-bottom: 3px; } .comment-list .comment-well p.comment { font-size: 15px; } .comment-list .comment-well .loading-container { float: right; width: 100px; height: 100px; display: inline-block; margin-left: 10px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; z-index: 1; } .comment-list .comment-well .loading-container i { font-size: 50px; text-align: center; vertical-align: center; width: 100%; margin-top: 25px; margin-bottom: 25px; } .comment-list .comment-well .image-placeholder { width: 100px; height: 100px; margin-right: 10px; display: inline-block; } .comment-list .comment-well .loading-container img { margin-top: -130px; } .image-container { position: relative; width: 100%; height: 100%; } .image-container .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; color: #FFF; text-align: center; font-size: 25px; background: rgba(0, 0, 0, 0); transition: background 1s; line-height: 100%; padding: 20% 20px; } .image-container .overlay span { display: inline-block; vertical-align: middle; line-height: normal; } .image-container:hover .overlay { display: block; background: rgba(0, 0, 0, .6); } .image-container.active .overlay { display: block; background: rgba(0, 0, 0, .4); }