a {color:#000033;;text-decoration: none;}             /* unvisited link */
a:visited {color:#000033;text-decoration: none;}      /* visited link */
a:hover {color:#000033; text-decoration: underline;}  /* mouse over link */
a:active {color:#000033;text-decoration: none;}       /* selected link */

::-webkit-scrollbar {
width: 26px;
height: 10px;
}

::-webkit-scrollbar-track-piece  {
background-color: white;
}

::-webkit-scrollbar-thumb:vertical {
height: 30px;
background-color: #000033;
}

body { margin:0;
background-color: #0033CC;
}

#myContent1 {
display: none;
}

#myContent2 {
display: none;
}

#myContent3 {
display: none;
}

#myContent4 {
display: none;
}

#myContent5 {
display: none;
}

#myContent6 {
display: none;
}

#myContent7 {
display: none;
}

#myContent8 {
display: none;
}

#myContent9 {
display: none;
}

#myContent10 {
display: none;
}

#myContent11 {
display: none;
}

#myContent12 {
display: none;
}

#myContent13 {
display: none;
}

#myContent14 {
display: none;
}

#myContent15 {
display: none;
}

#myContent16 {
display: none;
}

#myContent17 {
display: none;
}

#myContent18 {
display: none;
}

#myContent19 {
display: none;
}

#myContent20 {
display: none;
}

#myContent21 {
display: none;
}

#myContent22 {
display: none;
}

#myContent23 {
display: none;
}

#myContent24 {
display: none;
}

#myContent25 {
display: none;
}

#myContent26 {
display: none;
}

#myContent27 {
display: none;
}

#myContent28 {
display: none;
}

#myContent29 {
display: none;
}

#myContent30 {
display: none;
}

#myContent31 {
display: none;
}

#myContent32 {
display: none;
}

#myContent33 {
display: none;
}

#myContent34 {
display: none;
}

#myContent35 {
display: none;
}

#myContent36 {
display: none;
}

#myContent37 {
display: none;
}

#myContent38 {
display: none;
}

#myContent39 {
display: none;
}

#myContent40 {
display: none;
}

#myContent41 {
display: none;
}

#myContent42 {
display: none;
}

.logo {
float: right;
position: fixed;
width: 20%;
height: 100%
}
/*270033*/

#mixformat {
padding-top: 5em;
float: left;
padding-left: 25em;
}

img {
max-width: 100%;
height: auto;
}


/*news*/

div.subtitle {
font-family: arial, sans-serif;
color:black;
letter-spacing: 1px;
margin: auto;
padding: 50px;
line-height: 1.8em;
font-size: 2em;
}

input {
padding: 6px;
width: 220px;
font-family: arial, sans-serif;
font-size: 1em;
margin: 0px 0px 0px 0px;
border: 1px solid black;
background: #0033CC;
color: black;
font-size: 0.8em;
}

.submit-button {
float: center;
font-size: 0.8em;
color:black;
padding: 6px;
}

label {
font-family: arial;
text-align: center;
width: 220px;
padding: 6px;
background:;
border: 1px solid black;
font-size: 0.8em;
}

/*news*/

table { 
width: 100%; 
border-collapse: collapse;
text-decoration: none;
letter-spacing: 0.8px;
border-bottom: 0px solid;
border-top: 0px solid;
vertical-align: text-top;
color: blue;
}

tr:nth-of-type(odd) { 
background: ; 
font-family: arial; 
}

th { 
background: ; 
color: black; 
font-family: arial; 
}

td, th { 
padding: 50px; 
padding-left: 0px; 
text-align: left; 
font-family: arial; 
}


.title {
font-family:'Yatra One', cursive ;
font-size: 2em;
border: 0px solid black;
background-color;
display: block;
padding: 5px; 
width: 250px;
white-space: nowrap;
color:#000033;
max-width: 550px;
}


.artist {
font-family: 'Yatra One';
font-size: 1.5em;
border: 0px solid black;
background-color;
display: block;
padding: 5px;
width: 400px;
color:#000033;
}

  
.tags {
font-family: arial;
font-size: 0.8em;
border: 0px solid black;
background-color;
display: block;
padding: 5px;
max-width: 550px;
color:#000033;
}


footer {
width: 100%;
padding-left: 2.3em;
text-align: left;
font-family: arial;
font-size: 0.8em;
padding: 0.3em;
font-family: 'Yatra One';
background-color: #BBBDC0;
position: fixed;
color: #0033CC;
}

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)
{

.title {
font-size: 1.2em;
}

.tags {
white-space: wrap;
}

.artist {
font-size: 1em;
}

#mixformat {
float: left;
padding-left: 0em;
}

#contact-area {
padding-left: 2.2em;
}

 
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr { 
display: block; 
}
  
/* Hide table headers (but not display: none;, for accessibility) */
thead tr { 
position: absolute;
top: -9999px;
left: -9999px;
}
  
tr {
border: 0px solid black;
padding-bottom: 22px;
}
  
td { 
/* Behave  like a "row" */
border: 0px;
border-bottom: 0px solid black; 
position: relative;
padding-left: 25%; 
font-size: 0.9em;
padding-bottom: -0%;

max-width: 500px;
}

td:before { 
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 0px;
left: 6px;
width: 5%; 
padding-right: 0px; 
white-space: nowrap;
border-bottom: 2px;
}
  
/* Label the data*/

td:nth-of-type(2):before {
content: "";
}


@media screen and (max-width: 480px) {
input, .submit-button, label {
display: block;
width: 215px;
margin: 4px;
box-sizing: border-box;
margin-left:  17%;
}