@charset "utf-8";

/* CSS Document */

body,
html {
    height: 100%;
    /*width: 50%;*/
    width: 100%;
    margin: 0px;
    padding: 0px;
}

nav {
	margin-bottom:0.1em;
	font-family: 'Lato', sans-serif;

}
nav ul {
	list-style-type:none;
	margin:0;
	padding:0;
	display:flex;
}

nav li { flex-grow: 1; }

nav a {
	display: block;
	padding: 1em;
	text-align: center;
	text-decoration: none;
	color: #000000;
	border: solid 1px #424242;
	transition: all 0.2s;
	text-transform: uppercase;
}


section article {
    display: grid;
    margin-bottom: 0.1em;
    margin-top: 0.1em;
}

#main {
    display: grid;
    grid-gap: 1rem;
    padding: 1rem;
    border: solid black;
    margin: 1px;
}

.bloque {
    font-family: 'Times New Roman';
    box-shadow: 3px 5px 28px 0px rgba(0, 0, 0, 0.75);
    border: solid black;
    margin: 1px;
}

.tit {
    font-size: 10vh;
    text-align: center;
    color: red;
}

.text {
    color: red;
}



@media (orientation: landscape) {
    section {
        grid-template-columns: 3fr 1fr 1fr;
        grid-template-rows: auto;
    }

    #main {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
    }

    .bloque{
      width: auto;

    }

    .textos{
      text-align: center;
    }
    .bloque video {
        width: -webkit-fill-available;
        height: 315px;
    }

    .bloque iframe {
        width: -webkit-fill-available;
        height: 315px;
    }



}

@media (orientation: portrait) {
    section {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    #main {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    nav ul {
      list-style-type:none;
    	margin:0;
    	padding:0;
    	display: block;
    }

    .textos{
      text-align: center;
    }

    .bloque video {
      padding-bottom: 1vh;
        width: 940px;
        height: 315px;
    }

    .bloque iframe {
        width: 940px;
        height: 315px;
    }
}
