@font-face {
    font-family: "DataMind";
    src: url(../fonts/datamind.woff);
}

@font-face {
    font-family: "RobotoBold";
    src: url(../fonts/Roboto-Black.woff);
}

@font-face {
    font-family: "RobotoThin";
    src: url(../fonts/Roboto-Thin.woff);
}

@font-face {
    font-family: "Roboto";
    src: url(../fonts/Roboto-Regular.woff);
}
a:link {
    text-decoration: none;
}

html {
	scroll-behavior: smooth;
}

body{
    margin: 0 0 0 0;
}

text {
    font-family: Arial, Helvetica, sans-serif;
}

#mainsection{
    min-width: 1452px;
}

#mainheader{
    height: 984px;
    background: #FF704C url('../images/panzerpaladin_header_img.jpg') no-repeat scroll top;
    background-size: 100%;
}

.sectionheader {
    padding: 64px;
    text-transform: uppercase;
    text-align: center;
    font-family: RobotoBold, sans-serif;
    font-size: 56px;
}

#headerlogo{
    text-align: center;
}

#logo{
    width: 35%;
}

#headertagline{
    text-transform: uppercase;
    padding: 8px;
    text-align: center;
    font-family: DataMind, sans-serif;
    font-size: 92px;
}

#headerarrow{
    height: 100px;
    background:url('../images/shapes/arrow.svg') no-repeat scroll top;
    filter: invert(45%) sepia(51%) saturate(4249%) hue-rotate(228deg) brightness(106%) contrast(99%);
}

#menubar{
    padding-top: 12px;
    display: flex;
    justify-content: right;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#menubutton{
    background: #866ffe url('../images/icons/hamburger.svg') no-repeat scroll top;
    background-size: contain;
    width: 44px;
    height: 44px;
    cursor: pointer;
}

#languages{
    padding-top: 4px;
    margin-left: 8px;
    padding-right: 64px;
    text-align: right;
    text-transform: uppercase;
    font-size: 24px;
    font-family: Roboto,sans-serif;
}

.languagelink{
    color: #000000;
    border-bottom: 4px solid transparent;
}

a:link .languagelink{color: #000000;}
a:visited .languagelink{color: #000000;}
a:hover .languagelink{color: #000000;border-bottom: 4px solid #000000;}
a:active .languagelink{color: #000000;}

#mainmenu{
    position: absolute;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    top: 0;
    z-index: 5;
    background-color: #866ffe;
    width: 100%;
    height: 798px;
}

.mainmenulink{
    color: #000000;
    border-bottom: 4px solid transparent;
    font-size: 30px;
    font-family: Roboto, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    text-decoration-color: transparent;
}

a:link .mainmenulink{color: #000000;}
a:visited .mainmenulink{color: #000000;}
a:hover .mainmenulink{color: #000000;border-bottom: 4px solid #000000;}
a:active .mainmenulink{color: #000000;}


#video{
    position: relative;
    text-align: center;
    height: 0px;
    top: -240px;
    width: 100%;
}

#buysection{
    padding-top: 320px;
    background: #000000;
    color: #866ffe;
    padding-bottom: 64px;
}

#buyheader{
    padding:48;
    color: #9ef6ce;
}

#platformlist{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0px;
    padding-bottom: 0px;
    width: 100%;
    height: 234px;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
}

.platform{
    display: inline-block;
    margin-left: 48px;
    margin-right: 48px;
    height:234px;
}

.platformimgdiv{
    width: 150px;
    height: 172px;
}

.platformimglink{
    filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(73deg) brightness(104%) contrast(101%); background-size: 140px;;
}

.platformimage{
    width: 100%;
    height: 100%;
}

.platformimgdivext{
    margin-top: 0px;
    margin-bottom: 0px;
    width: 192px;
    height: 100%;
}



.platformname{
    margin-top: 0px;
    padding-top: 0px;
    display: inline-block;
    width: auto;
    text-transform: uppercase;
    font-family: RobotoBold, sans-serif;
    font-size: 24px;
    color: #FFFFFF;
}

a .platformname{
    border-bottom: 6px solid #FFFFFF;
}

#steamframe{
    padding-top: 74px;
    text-align: center;
}

a:link .platformname{color: #FFFFFF;}
a:visited .platformname{color: #FFFFFF;}
a:hover .platformname{color: #866ffe;border-bottom: 6px solid #866ffe;}
a:active .platformname{color: #FFFFFF;}

a:link .platformimglink{filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(73deg) brightness(104%) contrast(101%); background-size: 140px;}
a:visited .platformimglink{filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(73deg) brightness(104%) contrast(101%); background-size: 140px;}
a:hover .platformimglink{filter: invert(43%) sepia(60%) saturate(666%) hue-rotate(209deg) brightness(102%) contrast(99%);}
a:active .platformimglink{filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(73deg) brightness(104%) contrast(101%); background-size: 140px;}

.SmallLink{
    display: inline-block;
    width: auto;
    text-transform: uppercase;
    font-family: RobotoBold, sans-serif;
    font-size: 22px;
    border-bottom: 6px solid #866ffe;
}

a:link .SmallLink{color: #866ffe;}
a:visited .SmallLink{color: #866ffe;}
a:hover .SmallLink{color: #000000;border-bottom: 6px solid #000000;}
a:active .SmallLink{color: #866ffe;}

#synopsissection{
    position: relative;
    background: #866FFE;
    height: 1000px;
}

#synopinner{
    overflow: hidden;
}

#synopbg{
    float: left;
    position: absolute;
    top: -100px;
}

#synopcopy{
    padding: 64px;
    float: left;
    position: absolute;
    margin-right:auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 742px;
    height: 576px;
    background: url('../images/shapes/background_synopsis.svg');
    background-repeat: no-repeat;
    z-index: 1;
    font-family: RobotoBold, sans-serif;
}

#synopheader{
    padding: 64px;
    text-transform: uppercase;
}

#synopoverlay{
    float:right;
    position: absolute;
    left: 60%;
    top: 500px;
    z-index: 100;
}

#featuressection{
    background: #000000;
    min-height: 1565px;
}

#featuresheader{
    padding-top: 120px;
    color: #9ef6ce;
}

#featurelist{
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    width: 974px;
}

#featureoffset{
    width: auto;
    height: 240px;
}

.featurecontainer{
    width: 480px;
    height: 464px;
    background-color: #FFFFFF;
    margin-left: 16px;
    margin-right: 16px;
    margin-bottom:32px;
}

.featurecorner{
    float: left;
    position: absolute;
}
.featurescreen{
    width:100%;
    height: 270px;
    background-size: cover;
}

.featureinfo{
    margin: 24px;
    font-family: RobotoBold, sans-serif;
}

.featureheader{
    text-transform: uppercase;
    font-size: 24px;
}

#soundtracksection{
    min-height: 990px;
    text-align: center;
    background: #FF704C url('../images/background/grit_flame.png') no-repeat scroll top;
    background-position-y: -100px;
}

#soundtrackheader{
    padding: 96px;
}

#commentssection{
    background: #866FFE;
    min-height: 632px;
}

#commentcontainer{
    display: flex;
    justify-content: center;
}

.quotemessage{
    font-family: RobotoBold, sans-serif;
    font-size: 22px;
}

.quotename{
    font-family: Roboto, sans-serif;
}

#quoteimg{
    position: absolute;
    margin-left: -72px;
    margin-top: -32px;

    width: 650px;
    height: 250px;
    background: url('../images/shapes/quotes.svg') no-repeat scroll top;
    background-size: 112px 88px;
    background-position: left top;
}

#sharesection{
    padding: 100px;
    background: #EEEEEE;
    min-height: 690px;
    text-align: center;
}

#sharepaladin{
    margin: 36px;
    height: 264px;
    background: url('../images/wiki.png') no-repeat scroll top;
    background-size: contain;
}

#sharecopy{
    display: inline-block;
    width: 320px;
    font-size: 24px;
    font-family: RobotoBold,sans-serif;
}

#similarsection{
    background: #000000;
    height: 790px;
}

#similarheader{
    color: #9ef6ce;
}

#similargameslist{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height:auto;
    margin:auto;
}

.similargame{
    margin: 0px 16px 0px 16px;
    float:left;
    width: 498px;
}

.similarbg{
    width: 498px;
    height: 304px;
    background-repeat: no-repeat;
    background-size: contain;
}

.discovercopy{
    text-align: center;
    font-family: RobotoBold, sans-serif;
    text-transform: uppercase;
}

#footersection{
    padding-top: 164px;
    background: #EEEEEE;
    text-align: center;
}

#logofooter{
    height: 100px;
    background: url('../images/logo/tributelogo.png') no-repeat scroll top;
    background-size: contain;
}

#newslettercopy{
    text-align: center;
}

#newslettercopyinternal{
    display: inline-block;
    width: 360px;
    font-family: RobotoBold, sans-serif;
    font-size: 24px;
}

#footerlinebreak{
    display:inline-block;
    text-align: left;
    width: 95%;
    border-top: 2px solid #FFFFFF;
}

#social{
    margin-top: 16px;
    margin-bottom: 48px;
    display: table;
    float: right;
}

.socialbutton{
    margin-left: 30px;
    float:left;
    width: 40px;
    height: 40px;
    background-size: contain;
    filter: invert(43%) sepia(60%) saturate(666%) hue-rotate(209deg) brightness(102%) contrast(99%);
}

a:link .socialbutton{filter: invert(43%) sepia(60%) saturate(666%) hue-rotate(209deg) brightness(102%) contrast(99%);}
a:visited .socialbutton{filter: invert(43%) sepia(60%) saturate(666%) hue-rotate(209deg) brightness(102%) contrast(99%);}
a:hover .socialbutton{filter: invert(0%) sepia(95%) saturate(21%) hue-rotate(2deg) brightness(92%) contrast(108%);}
a:active .socialbutton{filter: invert(43%) sepia(60%) saturate(666%) hue-rotate(209deg) brightness(102%) contrast(99%);}


#twitter{
    background: url('../images/icons/social_twitter.svg') no-repeat scroll top;
}

#copyright{
    display: inline-block;
    width: auto;
    font-family: RobotoThin, sans-serif;
    font-size: 16px;
    transform: translateY(26px);
}

#slider {
    position: absolute;
    overflow: hidden;
    width: 650px;
    height: 250px;

    
}
  
#slider ul {
    position: relative;
    margin: 0;
    padding: 0;
    height: 200px;
    list-style: none;
    left: 0px;
}
  
#slider ul li {
    position: relative;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    width: 650px;
    height: 250px;
}
  
a.prev, a.next {
    top: 40%;
    z-index: 999;
    display: block;
    padding: 4% 3%;
    width: 30px;
    height: 58px;
    background: url('../images/shapes/arrow.svg') no-repeat scroll top;
    background-size: contain;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    opacity: 0.8;
    cursor: pointer;
}

a.prev{
    transform: rotate(90deg);
}

a.next{
    transform: rotate(270deg);
}

a.prev:hover, a.next:hover {
    opacity: 1;
    -webkit-transition: all 0.2s ease;
}
  
a.prev {
    border-radius: 0 2px 2px 0;
}
  
a.next {
    right: -48;
    border-radius: 2px 0 0 2px;
}

.nav{
    position: relative;
    margin: 0 auto;
    width: 300px;
}

.nav ul
{
    display: flex;
    align-items: center;
    padding: 0px;
    margin: 0px auto;
    width: auto;
    height: 20px;
    margin-top: 230px;
}
.nav ul li{
    float: left;
    display: inline;
    background: #000000;
    color: transparent;
    margin: 0px 5px;
    border-radius: 20px;
    height: 10px;
    width: 10px;
    cursor: pointer;
}

.nav ul li:first-child{
    height: 14px;
    width:14px;
}


#sg-widget{
    margin: 16px;
    margin-bottom: 64px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#sg_email{
    font-family: RobotoBold, sans-serif;
    width: 355px;
    height: 44px;
    padding-left: 16px;
    padding-right: 16px;
    border: 2px solid #dddddd;
}

#sg-response{
    width: 100%;
    font-family: RobotoBold, sans-serif;
}

#sg-submit-btn{
    margin: 8px 8px 8px 32px;
    background: none!important;
    border: none;
    padding: 0!important;
    /*optional*/
    font-family: RobotoBold, sans-serif;
    /*input has OS specific font-family*/
    color: #866ffe;
    /*text-decoration: underline;*/
    text-transform: uppercase;
    border-bottom: 4px solid #866ffe;
    cursor: pointer;
}
#sg-submit-btn:hover{
    color: #000000;
    border-bottom: 4px solid #000000;
}