body{
    /*font-family: 'Source Sans Pro', sans-serif;*/
    font-family: 'Helvetica',Trebuchet MS, sans-serif;
    text-align:center;
    margin:0;
}

/*Header*/
header{
    width:100vw;
    position:fixed;
    left:0;
    height: 9.5vh;
    background-color: #507BC0;

    color:#FFF;
}

#headertext
{
    /*position:absolute;*/
    float:left;

    margin-top:0.35vh;
    font-size:6.5vh;
    margin-left:1.5vw;
    font-weight: 300;
}


table /*overide defaults*/
{
    border-collapse: collapse;
	border-spacing: 0;
}

#buttons-menu {
    margin-left:225px;
    margin-top:2.8vh;
}


#buttons-menu a {
    color:#FFF;
    text-decoration: none;
}


#buttons-menu td {
    font-weight: 300;
    font-size:3.5vh;/*Buttons font size*/

    text-align: center;
    padding-left:2.8vw;
}



#downloadarea{


    position:absolute;
    top:2vh;
    right:2vw;
    font-weight: 200;
    font-size:4.9vh;
    line-height: 6vh;

}

@media (max-aspect-ratio: 16/9) {/*cool*/
    #downloadarea {
    display: none;
    }

    #main-img{
    display:none;
    }

    #fotter a {
        background: none !important;
    }
}

#download{
    color:#FFF;

    font-weight: 600;
    text-decoration: none;
}

/* Welcome */

#welcome
{
    position:fixed;
    top:9.5vh;
    height:54.5vh;
    width:100vw;
    /*background-color:#60CAEF;*/
    background-image: url("fondo.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    font-size:8vh;
    color:#FFF;
}

#welcome #main-img
{
    position:absolute;
    top:-6.5vh;
    right:16vw;
    width:20vh;
    height:23vh;
}

#welcome .content
{
    position:relative;
    top:8vh;
}

#welcome .content #maintitle
{
    margin-top:2%;
    margin-left:2%;
    color: #fff;
    /*text-shadow: 4px 2px 4px #161616;*/
    text-shadow: 0 0 10px #4F4F4F, 0 0 15px #4F4F4F;
    /*text-shadow: 2px 2px 4px #000000;*/
    font-size:40px;
    /*float:left;*/
}


/* the fullscreen example link */
#welcome #example-link a {
    color: white;
    position: relative;
    top: 2vh;
    font-weight: 200;
    text-decoration: none;
    font-size: 5vh;

    background-image: linear-gradient(to bottom, white, white); /*mimic underline (enables thinner underline)*/
    background-size: 2px 0.2vmin;
    background-position: 0 5.57vh; /*considering font size is 2.5*/
    background-repeat: repeat-x;
}

#welcome .menu a
{
    position: relative;
    top:5.5vh;

    border-radius: 2vh;
    -webkit-border-radius: 2vh;
    -o-border-radius: 2vh;
    -moz-border-radius: 2vh;

    padding: 1.3vh 2.5vh 1.3vh 2.5vh;

    border-style: solid;
    border-width: 1.5px;
    border-color: #FFF;

    /*border-style: solid;
    border-width: 4px;
    border-color: grey;*/

    text-decoration: none;
    /*padding:2vh;*/
    font-weight: 300;
    color:#FFF;
    font-size:3.1vh;
    transition: background-color 0.25s;
}

#welcome .menu a:hover
{
    background-color: #FF7676;
}

/* Until Here Welcome */

#fotter
{

    position:fixed;
    font-size:2.5vh;
    bottom:0%;
    padding: 0.5vh;
    background-color: #000000;
    font-weight: 200;
    color:white;
    right:0;left:0;

}

#fotter .hrefs {
    color: #FFF;
    font-weight: 400;
    text-decoration: none;


    background-image: linear-gradient(to bottom, white, white); /*mimic underline (enables thinner underline)*/
    background-size: 2px 0.2vmin;
    background-position: 0 2.86vh; /*considering font size is 2.5*/
    background-repeat: repeat-x;
}

.bloques {
	margin: 5px;
	margin-left:0 auto;
	margin-right:0 auto;
	background-color:#507BC0;
	text-align: center;
	float: left;
	padding:2px;
	width: 31%;
	position:relative;
	border: 2px solid blue;
	margin-top:2%;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
	border-radius: 13px;
	-webkit-box-shadow: #aaa 1px 1px 6px;
	-moz-box-shadow: #aaa 1px 1px 6px;
	box-shadow: #aaa 1px 1px 6px;
}
.block p{
	font-size:20px;
	font-weight:700;
	color:#fff;
}


/* fotter buttons */
#links {
    position: absolute;
    left:1vw;
    top:1vmin;

}
#twitterwrap {
    position:absolute;
    left:100px;
    bottom:0%;
}

/* stars button and twitter share */
@media (max-aspect-ratio: 16/9), (max-width: 1200px), (max-height: 800px) {
    #links {
        display:none;
    }
}


#main-container {
  margin: 20px auto;
  max-width: 900px;
  height: 100%;
  overflow: hidden;
  margin-top:4%;
}

.block {
  background-color: #7598AB;
  width: 31.33%;
  height: 100px;
  float: left;
  margin: 1%;
/*  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;*/
 	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
	border-radius: 20px;
	-webkit-box-shadow: #aaa 1px 1px 6px;
	-moz-box-shadow: #aaa 1px 1px 6px;
	box-shadow: #aaa 1px 1px 6px; 
}

@media screen and (max-width: 640px) {
  .block {
    background-color: blue;
    width: 47.9%;
  }
  .block:first-child {
    width: 98%;
    background-color: red;
    clear: both;
  }
  .block:last-child {
    width: 98%;
    background-color: darkgreen;
    clear: both;
  }
}
@media screen and (max-width: 640px) and (max-width: 320px) {
  .block {
    width: 98%;
  }
}