@media only screen and (min-width: 70em) { /* 960px */ .container { width: 75%; max-width: 90rem; } } body { background-color:#0c1117; background-image: none; margin:0; padding:0; font-family:'Noto Sans',Calibri,Arial, Helvetica, sans-serif; font-size:14px; line-height:22px; font-weight: normal; color:#c5c5c5; text-align:left; } a:link { color:#9da8f3; } a:visited { color:#9da8f3; } a:hover { color:#ffffff; } .page-contain { overflow-x: hidden; } .spacer-sm { margin-top: 20px; } .spacer-md { margin-top: 50px; } .spacer-lg { margin-top: 100px; } .spacer-xl { margin-top: 150px; } .spacer-xxl { margin-top: 250px; } .padding-sm { padding: 20px 0px; } .padding-md { padding: 50px 0px; } .padding-lg { padding: 100px 0px; } .padding-xl { padding: 150px 0px; } .padding-xxl { padding: 250px 0px; } .spacer-bottom-sm { padding-bottom: 30px; } .spacer-bottom-md { padding-bottom: 50px; } .spacer-bottom { padding-bottom: 100px; } .fullwidth { width: 100%; } /* .logo { max-width: 600px; } */ .hero-bg { overflow: hidden; // height: 60vh; position: relative; background-color: #0c1117; min-height:80%; } .top-content { z-index: 3; } .button-container { text-align: center; // position: absolute; // bottom: 0px; // margin-left: 50%; z-index: 3; // transform: translateX(-50%) translateY(0%); margin-top: 40px; } @media only screen and (max-width: 720px) { /* 960px */ .hero-bg { height: 80vh; } } .fullwidth-video { top: 0px; left: 50%; width: 100%; /*min-width: 100%;*/ height: 100%; min-height: 100%; max-height: 1200px; overflow-x: hidden; z-index: 0; animation: fade-in 2s ease-in-out; } .intro-bar { background-color: #1b0f2799; width: 100%; } #GradientOverlayBottom { background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, rgba(12, 17, 23, 0)), color-stop(80%, rgba(12, 17, 23, 0.7)), color-stop(100%, rgba(12, 17, 23, 1))); width: 100%; height: 100%; z-index: 0; position: absolute; bottom: -50px0px; z-index: 1; } #conduitleft { position:absolute; left:0px; width:300px; height:auto; } #Rule { z-index: 9; border: 0; border-top: 1px solid #99999922; margin-bottom: 30px; width: 50%; margin: 0px auto; } #topshadow { background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, rgba(11, 11, 11, 0.6)), color-stop(40%, rgba(166, 166, 166, 0.4)), color-stop(100%, rgba(222, 222, 222, 0.1))); width: 100%; height: 40px; z-index: 0; } #topshadowlight { background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, rgba(58, 48, 68, 0.6)), color-stop(40%, rgba(47, 36, 57, 0.2)), color-stop(100%, rgba(21, 18, 31, 0))); width: 100%; height: 40px; z-index: 0; } #bottomshadow { background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, rgba(222, 222, 222, 0.1)), color-stop(40%, rgba(166, 166, 166, 0.4)), color-stop(100%, rgba(11, 11, 11, 0.6))); width: 100%; height: 40px; z-index: 0; } h1{font-size:36px}h2{font-size:30px} h3 {font-family: Quantico,'Noto Sans'; font-size:34px; font-weight:400; letter-spacing: 1.5px; color:#93eefb;} .h3dark {font-family: 'Noto Sans',Quantico; font-size:34px; font-weight:400; letter-spacing: 1.5px; color:#5c3785;} .h3light {font-family: Quantico,'Noto Sans'; font-size:34px; font-weight:400; letter-spacing: 3.5px; margin:0px 0px 00px 0px; color:#93eefb;text-transform:uppercase;} h4 {font-family: Quantico,'Noto Sans'; font-size:20px; font-weight:400; letter-spacing: 0.5px; margin:0px 0px 10px 0px; color:#93eefb;text-transform:uppercase;} .h4dark {font-family: 'Noto Sans',Quantico; font-size:20px; font-weight:700; letter-spacing: 0.5px; margin:0px 0px 10px 0px; color:#5c3785;} .h4light {font-family: Quantico,'Noto Sans'; font-size:20px; font-weight:400; letter-spacing: 0.5px; margin:0px 0px 10px 0px; color:#93eefb;text-transform:uppercase;} h5 {font-family: Quantico,'Noto Sans'; font-size:16px; font-weight:400; letter-spacing: 0.5px; margin:0px 0px 10px 0px; color:#93eefb;text-transform:uppercase;} .h5dark {font-family: 'Noto Sans',Quantico; font-size:16px; font-weight:700; letter-spacing: 0.5px; margin:0px 0px 10px 0px; color:#5c3785;} .h5light {font-family: Quantico,'Noto Sans'; font-size:16px; font-weight:400; letter-spacing: 0.5px; margin:0px 0px 10px 0px; color:#93eefb;text-transform:uppercase;} h6{font-size:16px} .hdark { color:#5c3785; font-weight: bold; } .pdark { color:#333; } .plight { color:#dcdcdc; //width: 800px; text-align: justify; } .plighter { color:#dcdcdc; //width: 800px; text-align: left; font-weight:lighter; } p { font-weight: normal; // -webkit-text-stroke: 0.2px; letter-spacing:0.5px; } a { text-decoration:none; color:#7bc4ee; } a:hover { color:#b4e4ff; } #upgradeLink { display:block; position:absolute; top:0px; left:820px; width:223px; height:315px; background-image:url("https://cdn.akamai.steamstatic.com/apps/csgo/images/operationhydra/upgrade_coin.png?v=102"); background-position:top; } #upgradeLink:hover { background-position:bottom; } #logoLink { display:block; position:absolute; top:10px; left:332px; width:384px; height:150px; } /* faq */ .faq_container { position: relative; text-align: justify; } .faq_question { color: #93eefb; margin-top: 40px; margin-bottom: 10px; font-size: 16px; // font-weight: bold; } #valveLinks { display:block; position:absolute; width:748px; height:100px; top:90px; left:116px; } /* footer */ .footer { color:#5c3785; font-size: 13px; } .button:hover { background-position:bottom; } /**** coins slider ****/ #coins_slider_container { position: relative; top: 0px; left: 0px; //overflow: hidden; } #premier_slider_container { position: relative; top: 0px; left: 0px; //overflow: hidden; } /* brokenfang slider */ #brokenfang_slider{ margin-left: auto; margin-right: auto; } #brokenfang_slider_container{ position: relative; top: 0px; } /**** character slider ****/ #character_slider_container { position: relative; top: 0px; left: 0px; // background-image:url(https://cdn.akamai.steamstatic.com/apps/csgo/images/brokenfang/slidebg.png); // margin-top:20px; } #character_slider, .character-slider { margin-left: auto; margin-right: auto; top: 22px; left: 22px; } #character_slider_next { background-image: url(https://cdn.akamai.steamstatic.com/apps/csgo/images/operationbreakout/map_next.png?v=2); position: absolute; right: 10px; top: 50%; height: 40px; width: 28px; z-index: 1002; opacity: 0.4; } #character_slider_next:hover { opacity: 1.5; } #character_slider_prev { background-image: url(https://cdn.akamai.steamstatic.com/apps/csgo/images/operationbreakout/map_prev.png?v=2); position: absolute; left: 10px; top: 50%; height: 40px; width: 28px; z-index: 1002; opacity: 0.4; } #character_slider_prev:hover { opacity: 1.5; } #character_slider_container video { max-height: 700px; } #ancient_slider_container{ position: relative; top: 0px; left: 0px; margin-top:20px; } #maps_slider_container{ position: relative; top: 0px; left: 0px; margin-top:20px; } /* end sliders */ /* .charmodel { position: absolute; max-width: 40%; top: 40px; left: 25px; text-align: left; } */ .charslidetitle { position: absolute; left: 50%; top: 200px; } .charinfo { padding: 10% 80px 5% 0px; margin-left: -30px; } @media only screen and (max-width: 720px) { .charinfo { margin-top: 10px; } } .charname { font-family: Quantico; font-size: 22px; font-weight: bold; color: #d1d1d1; margin: 5px 0px 0px 0px; } .chartier { font-size: 16px; color: blue; margin: 05px 0px 0px 0px; font-weight: bold; } .chardesc { font-style: italic; font-size: 14px; margin: 5px 0px; color: #999999; text-shadow: 0 2 0 rgba(0,0,0,1) } .charfactions { position: absolute; left: 30%; top: 40px; } /*** rarity tier colors ***/ .common, .gray { color: #aec1d7; } .uncommon, .lblue { color: #5e98d9; } .distinguished, .blue { color: #4b69ff; } .exceptional, .purple { color: #8847ff; } .superior, .pink { color: #d32ce6; } .master, .red { color: #eb4b4b; } .video-content { position: absolute; width: 100%; height:600px; left: 50%; top: 0; transform: translate(-50%, 0%); margin-left: auto; margin-right: auto; display: block; z-index: -1; } .intro { font-size:16px; line-height: 26px; letter-spacing: 0.5px; } .whitebg { top: 0px; left: 0px; background-image:url(https://cdn.akamai.steamstatic.com/apps/csgo/images/brokenfang/slidebg.png); } /*** from template ***/ /* W3.CSS 4.13 June 2019 by Jan Egil and Borge Refsnes */ html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit} /* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */ html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%} article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item} audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline} audio:not([controls]){display:none;height:0}[hidden],template{display:none} a{background-color:transparent}a:active,a:hover{outline-width:0} abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted} b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000} small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none} code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible} button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold} button,input{overflow:visible}button,select{text-transform:none} button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button} button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0} button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText} fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em} legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto} [type=checkbox],[type=radio]{padding:0} [type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto} [type=search]{-webkit-appearance:textfield;outline-offset:-2px} [type=search]::-webkit-search-decoration{-webkit-appearance:none} ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit} /* End extract */ html,body{font-size:15px;line-height:1.5}html{overflow-x:hidden} .w3-wide{letter-spacing:4px} hr{border:0;border-top:1px solid #64269c66; margin-top:80px; box-shadow: 0 0 10px 18px #64269c0D; width:60%;} .w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit} .w3-btn,.w3-button { font-family: Quantico; font-size: 20px; font-weight: bold; text-transform: uppercase; border:none; display:inline-block; padding:8px 16px; vertical-align:middle; overflow:hidden; text-decoration:none; color:#0a2333; background-color:#93eefb; text-align:center; cursor:pointer; padding: 4px 28px;} .w3-button:hover { color:#93eefb; background-color:#0a2333; box-shadow:0 0 12px 0 rgba(153,86,221,0.3),0 0 12px 0 rgba(153,86,221,0.3); } .w3-btn:hover { box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); } .w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .swiper-container { width: 100%; } .swiper-pagination { transform: translateY(-15px); height: 12px; //background-color:red; z-index: 222; } .swiper-pagination-weapons { transform: translateY(-15px); background-color:green; z-index: 522; } .swiper-pagination-bullet-active { background-color: #ffffff; } .operation-case { width: 100%; //height: 800px; } .control-case { width: 100%; //height: 800px; } .norse-collection { width: 100%; margin-top:40px; /* height: 800px; */ } .stmarc-collection { width: 100%; margin-top:40px; /* height: 800px; */ } .canals-collection { width: 100%; margin-top:40px; /* height: 800px; */ } .graffiti-collections { width: 100%; margin-top:40px; /* height: 800px; */ } .ancient-collection { width: 100%; margin-top:40px; /* height: 800px; */ } .apollo-collection { width: 100%; margin-top:40px; /* height: 800px; */ } .swiper-scrollbar { opacity: 0; } .swiper-slide { opacity: 0; transition-duration: .3s; transition-property: opacity; } .swiper-slide-active { opacity: 1; transition-duration: .3s; transition-property: opacity; } .swiper-button-prev, .swiper-button-next { color: #666666; width: 20px; height: 38px; margin: 0px 10px; } .swiper-arrow { width: 20px; } .dropshadow { box-shadow: 0 10px 18px 10px #33333399; } .dropshadowlight { //box-shadow: 0 10px 18px 10px #33333322; background-color: #1b1b1b33; } .map_tab { width: 60px; filter: brightness(80%); } .invert { filter: invert(.8); } /* Style the tab */ .tab { overflow: hidden; text-align: center; //width: 100%; margin: 0 auto; //border: 1px solid #ccc; //background-color: #f1f1f1; } /* Style the buttons that are used to open the tab content */ .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #cccccc22; } /* Create an active/current tablink class */ .tab button.active { background-color: #cccccc22; //filter: drop-shadow(0px 0px 20px #ddd); filter:brightness(150%); } /* Style the tab content */ .tabcontent { display: none; } /* cases */ .itemname { top: -65px; font-family: Quantico; font-size: 18px; color: #999999; margin: 5px 0px 0px 0px; z-index: 1111; } .glowbg100 { background-image:url(https://cdn.akamai.steamstatic.com/apps/csgo/images/operationriptide/glow.png); background-repeat: no-repeat; background-position: center; /* Center the image */ background-size: 160%; padding: 50px; } .glowbgblue { background-image:url(https://cdn.akamai.steamstatic.com/apps/csgo/images/operationriptide/glowblue.png); background-repeat: no-repeat; background-position: center; /* Center the image */ background-size: 160%; padding: 50px; } .glowbg50 { background-image:url(https://cdn.akamai.steamstatic.com/apps/csgo/images/operationriptide/glow50.png); background-repeat: no-repeat; background-position: center; /* Center the image */ background-size: 160%; padding: 50px; } .glowbg25 { background-image:url(https://cdn.akamai.steamstatic.com/apps/csgo/images/operationriptide/glow25.png); background-repeat: no-repeat; background-position: center; /* Center the image */ background-size: 80%; padding: 50px; } .glowbg10 { background-image:url(https://cdn.akamai.steamstatic.com/apps/csgo/images/operationriptide/glow10.png); background-repeat: no-repeat; background-position: center; /* Center the image */ background-size: 80%; padding: 50px; } .glowbg5 { background-image:url(https://cdn.akamai.steamstatic.com/apps/csgo/images/operationriptide/glow5.png); background-repeat: no-repeat; background-position: center; /* Center the image */ background-size: 160%; padding: 50px; } .coin_base { width: 100%; background-repeat: no-repeat; background-position: center; background-size: 100%; z-index: 1; margin-top: -22.7%; } .coin_bronze { transition-property: opacity; width: 100%; background-repeat: no-repeat; background-position: center; /* Center the image */ background-size: 100%; z-index: 3; margin-top: -22.1%; } .coin_silver { transition-property: opacity; width: 100%; background-repeat: no-repeat; background-position: center; /* Center the image */ background-size: 100%; z-index: 3; margin-top: -22.1%; } .coin_gold { transition-property: opacity; width: 100%; background-repeat: no-repeat; background-position: center; /* Center the image */ background-size: 100%; z-index: 3; margin-top: -22.1%; } .coin_platinum { transition-property: opacity; width: 100%; background-repeat: no-repeat; background-position: center; /* Center the image */ background-size: 100%; z-index: 3; margin-top: -22.1%; } .queuesbg { top: 0px; left: 50%; width: auto; height: 100%; min-height: 100%; max-height: 1200px; transform: translateX(-50%) translateY(0%); overflow-x: hidden; z-index: 0; // background-image:url("https://cdn.akamai.steamstatic.com/apps/csgo/images/operationriptide/queuesbg.png"); background-position: center; background-repeat: no-repeat; background-size: cover; } .retakes { //position:absolute; //left:5%; //top: 2%; font-family: noto-sans-extracondensed, sans-serif; font-weight: 800; font-style: italic; font-size: 14vw; text-transform: uppercase; transform: rotate(-6deg); letter-spacing: 6; margin-bottom:-28%; } .thumb { font-size: 12px; text-transform: uppercase; letter-spacing: 2.5px; vertical-align: middle; } .thumb:hover { transform: scale(1.1); }