/* TABLE OF CONTENT
1 - RESET CSS
*/

/* 1 - RESET */
* {
    margin: 0;
    padding: 0;
}

html, body {
    color: #555;
    font-family: 'Lato',sans-serif;
    font-size: 14px;
  font-weight: 300;
    height: 100%;
    width: 100%;
}

img, ul, li {
    border: none;
    outline: none;
}

ol li, ul li {
    list-style: none;
}

a:link, a:visited, a:active {
    color: inherit;
}

:focus {
  outline: none !important;
}

a {
    text-decoration: none;
}

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

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "splash splash splash splash" "section-1 section-1 section-1 section-1" "section-2 section-2 section-2 section-2" "section-3 section-3 section-3 section-3" "section-4 section-4 section-4 section-4" "section-5 section-5 section-5 section-5" "section-6 section-6 section-6 section-6";
}

.splash { 
  grid-area: splash;
  margin: auto;
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
}

/* SECTION 1 */
.section-1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "section-1-1" "section-1-2" "section-1-3";
  grid-area: section-1;
}

.section-1-1 { 
  grid-area: section-1-1;
  padding: 25px 50px;
}

.section-1-2 { 
  grid-area: section-1-2;
  padding: 10px 50px;
  color: #fff;
  background-image: url(../img/ar-1.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;  
}

.section-1-3 { 
  grid-area: section-1-3;}

/* SECTION 2 */
.section-2 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "section-2-1" "section-2-2" "section-2-3";
  grid-area: section-2;
}

.section-2-1 { grid-area: section-2-1; }

.section-2-2 { grid-area: section-2-2; }

.section-2-3 { grid-area: section-2-3; }

/* SECTION 3 */
.section-3 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "section-3-1" "section-3-2";
  grid-area: section-3;
  margin: auto;
  padding: 20px 5px;
}

.section-3-1 { grid-area: section-3-1;}

.section-3-2 { grid-area: section-3-2;}

/* SECTION 4 */
.section-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "section-4-1 section-4-2 section-4-3 section-4-4";
  grid-area: section-4;
}

.section-4-1 { grid-area: section-4-1;}

.section-4-2 { grid-area: section-4-2;}

.section-4-3 { grid-area: section-4-3;}

.section-4-4 { grid-area: section-4-4;}

/* SECTION 5 */
.section-5 { 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "section-5-1 section-5-1 section-5-1" "section-5-2 section-5-3 section-5-4";
  grid-area: section-5; 
}

.section-5-1 { grid-area: section-5-1;}

.section-5-2 { grid-area: section-5-2;}

.section-5-3 { grid-area: section-5-3;}

.section-5-4 { grid-area: section-5-4;}

/* SECTION 6 */
.section-6 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "section-6-1 section-6-1 section-6-1";
  grid-area: section-6;
}

.section-6-1 { grid-area: section-3-2; }

/* STYLES */
.info {
  margin: auto;
  padding: 25px 50px;
  text-align: left;
  color: #000;
}

.sponsors {
  margin: auto;
  padding: 25px 50px;
  text-align: center;
  color: #000;
}

.title {
  margin: auto;
  padding: 25px 50px;
  text-align: center;
  color: #000;
}