/* -------- CSS - GP Times ---------- */

@import url(https://fonts.googleapis.com/css?family=Oxygen:400,700);
@import url(https://fonts.googleapis.com/css?family=Patua+One);

* {
padding: 0; 
margin: auto;
}

/* -------- Links ---------- */

a{text-decoration:none;}
a:link, a:visited{color: #14830C;}
a:hover{color: #14830C; text-decoration:underline;}
a:focus{outline:none;}

a.white{text-decoration:none;}
a.white:link, a.white:visited{color: #FFF;}
a.white:hover{color: #FFF; text-decoration:underline;}
a.white:focus{outline:none;}

body {
background: #000 url(img/background-carbon.jpg); 
background-attachment: fixed;
background-width: 100%;
}

#wrapper {
width: 100%;
max-width: 1500px;
background: #dedede;
}

.block1 {
width:100%;
background: url(../img/background-f1-1-3.jpg) no-repeat; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top:40px;
padding-bottom:50px;
}

.block1mgp {
width:100%;
background: url(../img/background-motogp-1.jpg) no-repeat; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top:40px;
padding-bottom:50px;
}

.block1indy {
width:100%;
background: url(../img/background-indycar-1.jpg) no-repeat; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top:40px;
padding-bottom:50px;
}

.block1wrc {
width:100%;
background: url(../img/background-wrc-1.jpg) no-repeat; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top:40px;
padding-bottom:50px;
}

@media all and (max-width: 500px) {
.block1, .block1mgp, .block1indy, .block1wrc {
        background: url(../img/background-f1-1-mobile.jpg) no-repeat; 
        padding-top:10px;
        padding-bottom:10px;
  }
}

.arrow_down {
	position: relative;
	background: #c31a00;
}
.arrow_down:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #c31a00;
	border-width: 20px;
	margin-left: -20px;
}

.banner {
width: 99%;
background: #000;
padding: 0.5%;
}

.banner img {
height: 20px;
padding-right: 5px;
}

.banner h1 {
font-family: 'Oxygen', sans-serif;
font-weight: 700;
font-size: 12px;
color: #FFF;
letter-spacing: 1px;
word-spacing: 2px;
text-align: center;
}

@media all and (max-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
.banner h1 {
        font-size: 10px;
  }
}

@media all and (max-width: 500px) {
.banner {
        visibility: hidden;
        clear: both;
        display:none;
  }
}

.content {
width: 80%;
}

@media all and (max-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
.content {
        width: 90%;
  }
}

@media all and (max-width: 500px) {
.content {
        width: 96%;
  }
}

.content h1 {
font-family: 'Oxygen', sans-serif;
font-weight: 700;
font-size: 22px;
color: #000;
padding: 10px 0 0 0;
}

.header {
width: 98%;
background: #000;
padding: 1%;
}

@media all and (max-width: 500px) {
.header {
        width: 96%;
        padding: 2%;
  }
}

.logo {
width: 50%;
float: left;
}

@media all and (max-width: 500px) {
.logo {
        width: 100%;
        float: none;
  }
}

.menu {
width: 45%;
float: right;
}

@media all and (max-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
.menu {
        width: 50%;
  }
}

@media all and (max-width: 500px) {
.menu {
        width: 100%;
        float: none;
  }
}

.menu1, .menu2 {
font-family: 'Oxygen', sans-serif;
font-weight: 400;
font-size: 16px;
color: #FFF;
padding: 15px 20px 15px 20px; 
margin-top: 10px;
margin-bottom: 10px;
list-style: none;
display: block;
position: relative;
float: right;
border-left: 1px solid #FFF;
text-align: right;
}

.menu3 {
font-family: 'Oxygen', sans-serif;
font-weight: 400;
font-size: 16px;
color: #FFF;
padding: 15px 20px 15px 20px; 
margin-top: 10px;
margin-bottom: 10px;
list-style: none;
display: block;
position: relative;
float: right;
text-align: right;
}

.menu4 {
padding: 10px 20px 7px 20px; 
margin-top: 10px;
margin-bottom: 10px;
list-style: none;
display: block;
position: relative;
float: left;
border-left: 1px solid #FFF;
}

@media all and (max-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
.menu1, .menu2, .menu3 {
        padding: 10px 10px 10px 10px; 
        font-size: 14px;
  }
}

@media all and (max-width: 500px) {
.menu1, .menu2, .menu3 {
        padding: 8px 15px 8px 15px;
        font-size: 14px; 
  }
}

@media all and (max-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
.menu4 {
        padding: 0px 10px 0px 10px; 
  }
}

@media all and (max-width: 500px) {
.menu4 {
        padding: 0px 5px 0px 5px;
  }
}

.intro {
width: 90%;
background: transparent;
margin-top: 8%;
}

.intro h1 {
font-family: 'Patua One', cursive;
font-size: 28px;
color: #fff;
line-height: 34px;
letter-spacing: 1px;
text-shadow: 2px 2px #000;
}

@media all and (max-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
.intro h1 {
        font-size: 24px; 
        line-height: 28px;
  }
}

@media all and (max-width: 500px) {
.intro h1 {
        font-size: 20px; 
        line-height: 24px;
  }
}

.signup {
width: 99%;
background: #e04005; /* Old browsers */
background: -moz-linear-gradient(45deg,  #c31a00 0%, #c31a00 40%, #000 40%, #000 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  #c31a00 0%,#c31a00 40%,#000 40%,#000 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  #c31a00 0%,#c31a00 40%,#000 40%, #000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c31a00', endColorstr='#000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
padding: 0.5%;
margin-top: 8%;
}

.block2 {
width: 100%;
background: #dedede;
border-top: 0px solid #c31a00;
}

.latest {
width: 50%;
margin-top: 40px;
float: left;
position:relative;
z-index:1;
}

.latest img {
width: 65%;
padding-left:12%;
position:relative;
-ms-transform: rotate(-7deg); /* IE 9 */
-webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
transform: rotate(-7deg);
}

.latest:hover img {
    -webkit-transform:scale(1.05); /* Safari and Chrome */
    -moz-transform:scale(1.05); /* Firefox */
    -ms-transform:scale(1.05); /* IE 9 */
    -o-transform:scale(1.05); /* Opera */
     transform:scale(1.05);
}

@media all and (max-width: 500px) {
.latest {
        float: none;
        width: 100%;
  }
}

@media all and (max-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
.latest img {
        padding-left:8%;
  }
}

@media all and (max-width: 500px) {
.latest img {
        width: 75%;
  }
}

.read_me {
position: absolute;
top: 18%;
left: 60%;
width:200px;
background: transparent;
z-index:5;
}

@media all and (max-width: 1024px) 
and (-webkit-min-device-pixel-ratio: 1) {
.read_me {
        width: 160px;
  }
}

@media all and (max-width: 500px) {
.read_me {
        width: 140px;
  }
}

.description {
width: 50%;
margin-top: 40px;
float: right;
}

.description h1 {
width: 90%;
background: #dedede;
font-family: 'Oxygen', sans-serif;
font-weight: 700;
font-size: 20px;
color: #000;
padding: 5px;
}

.description p {
width: 90%;
background: #dedede;
font-family: 'Oxygen', sans-serif;
font-weight: 400;
font-size: 18px;
color: #000;
padding: 5px;
}

@media all and (max-width: 1024px) 
and (-webkit-min-device-pixel-ratio: 1) {
.description h1 {
        font-size: 16px;
  }
}

@media all and (max-width: 1024px) 
and (-webkit-min-device-pixel-ratio: 1) {
.description p {
        font-size: 14px;
  }
}

@media all and (max-width: 500px) {
.description {
        float: none;
        width: 100%;
  }
}

.define_width {
width: 90%;
margin-top: 20px;
}

@media all and (max-width: 500px) {
.define_width {
        width: 98%;
  }
}

.arrow_box {
position: relative;
background: #c31a00;
}

.arrow_box h2 {
font-family: 'Oxygen', sans-serif;
font-weight: 700;
font-size: 15px;
color: #FFF;
padding: 10px;
}

.arrow_box:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(195, 26, 0, 0);
	border-right-color: #c31a00;
	border-width: 20px;
	margin-top: -20px;
}

@media all and (max-width: 500px) {
.arrow_box:after {
        visibility: hidden;
        clear: both;
        display:none;
  }
}

@media all and (max-width: 500px) {
.arrow_box h2 {
        font-size: 18px;
  }
}

.archive {
width: 20%;
float: left;
}

.archive img {
width: 96%;
padding-right:4%;
}

.archive:hover img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

.archive h1 {
font-family: 'Oxygen', sans-serif;
font-weight: 700;
font-size: 14px;
color: #000;
padding-bottom: 5px;
padding-right:2%;
margin-top: 20px;
height: 55px;
overflow: hidden;
}

span.inputtitle {
font-family: 'Oxygen', sans-serif;
font-weight: 400;
font-size: 16px;
color: #FFF;
padding-right: 5px;
}

@media all and (max-width: 1024px) {
span.inputtitle {
        display: block;
        margin-top: 5px;
  }
}

@media all and (max-width: 500px) {
span.inputtitle {
        font-size: 14px;
  }
}

input {
font-family: 'Oxygen', sans-serif;
font-weight: 400;
font-size: 12px;
color: #000;
padding: 3px;
width: 160px;
border: 1px solid #c31a00;
}

@media all and (max-width: 1024px) {
input {
        margin-top: 5px;
  }
}

@media all and (max-width: 500px) {
input {
        width: 225px;
        margin-bottom: 5px;
  }
}

.register-div {
width: inherit; 
height: auto; 
font-family: 'Oxygen', sans-serif;
font-weight: 700;
font-size: 16px;
color: #FFF;
padding: 5px 5px 5px 5px;
}

@media all and (max-width: 1024px) {
.register-div {
        font-size: 18px;
  }
}

@media all and (max-width: 500px) {
.register-div {
        font-size: 13px;
  }
}

.register-div .item {
width: 100%; 
margin-left: 0; 
}

button.btn {
font-family: 'Oxygen', sans-serif;
font-weight: 700;
font-size: 14px;
color: #FFF;
padding: 4px;
background: #c31a00;
border: 0px;
margin-left:10px;
}

button.btn:hover {
background: #FFF;
color: #000;
}

@media all and (max-width: 500px) {
button.btn {
         float: right; display: block;
  }
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: black;
}
::-moz-placeholder { /* Firefox 19+ */
  color: black;
}
:-ms-input-placeholder { /* IE 10+ */
  color: black;
}
:-moz-placeholder { /* Firefox 18- */
  color: black;
}

select {
width:60px;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    z-index: 10;
}

.modal-content p {
    font-family: 'Oxygen', sans-serif;
    font-size: 18px;
    color: #000000;
    font-weight: 400;
    padding: 5px;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    font-family: 'Oxygen', sans-serif;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.footer {
width: 100%;
margin-top: 40px;
background: #000;
}

.footer p {
font-family: 'Oxygen', sans-serif;
font-weight: 400;
font-size: 12px;
color: #FFF;
padding: 5px;
}