@charset "UTF-8"; /* CSS Document 00AEEF */ body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #000000; font-family: "Montserrat", sans-serif; } #row { margin: 0px; padding: 0px; float: left; width: 100%; } #center { width: 70%; margin-right: 15%; margin-left: 15%; z-index: 1; } @media screen and (max-width: 768px) {#center {width: 86%;margin-right: 7%;margin-left: 7%;}} .montserrat- { font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: ; font-style: normal; } #desktop {display: block;} #mobile {display: none;} @media screen and (max-width: 768px) { #desktop {display: none;} #mobile {display: block;} } #desktopvideo {display: block;} #mobilevideo {display: none;} @media screen and (max-width: 768px) { #desktopvideo {display: none; } #mobilevideo {display: block;} } /* +++++++++++++++++++++ HEADER +++++++++++++++++++++ */ #row.hdr {text-align: center;background-image: url("images/torndown2.png"); background-position: left bottom; background-repeat: repeat-x; padding-top: 15px; padding-bottom: 85px; position: fixed; z-index: 2; } /* +++++++++++++++++++++ NAVIGATION +++++++++++++++++++++ */ #row.nav {position: fixed; z-index: 3;} #row.nav #middle img.logo {width: 90%; height: auto; margin-top: 20px;transition: all .5s;} #row.nav #middle img.logo:hover {width: 95%; } #row.nav #left {width: 30%; display: block; float: left; text-align: right; padding-top: 40px;} #row.nav #middle {width: 40%; display: block; float: left; text-align: center;} #row.nav #right {width: 30%; display: block; float: left; text-align: left; padding-top: 40px;} #row.nav a {color: #000000; font-weight: 800; text-decoration: none;} #row.nav a:hover {color: #fff; } #row.nav a.here {color: #fff; background-image: url("images/here.png"); background-position: center bottom; background-repeat: no-repeat; } @media screen and (max-width: 3000px) { #row.nav #right a img.socials {width: 20px; height: auto; margin-right: 5px; display: inline-block;} #row.nav a {font-size: 20px; line-height: 20px; padding: 15px;} } @media screen and (max-width: 1300px) { #row.nav #right a img.socials {display: none;} } @media screen and (max-width: 1000px) { #row.nav a {font-size: 18px; line-height: 18px; padding: 10px;} } @media screen and (max-width: 900px) { #row.nav a {font-size: 17px; line-height: 17px; padding: 10px;} } @media screen and (max-width: 800px) { #row.nav a {font-size: 16px; line-height: 16px; padding: 10px;} } @media screen and (max-width: 768px) { } @media screen and (max-width: 480px) { } /* +++++++++++++++++++++ MOBILE NAVIGATION +++++++++++++++++++++ */ #row.mobilenav {text-align: center;background-image: url("images/torndown2.png"); background-position: left bottom; background-repeat: repeat-x; padding-top: 15px; padding-bottom: 0px; position: fixed;} #row.mobilenav #left {margin-left: 5%; margin-right: 5%; width: 60%; float: left; text-align: left;} #row.mobilenav #right {margin-left: 5%; margin-right: 5%; width: 20%; float: left; text-align: right;} #row.mobilenav #right img.navi {width: auto;transition: all .5s;} #row.mobilenav img.logo {width: 100%; height: auto;transition: all .5s;} #row.mobilenav img.logo:hover {width: 110%; } #row.mobilenav a.link {color:#000000; text-decoration: none; font-weight: 800; font-size: 30px; line-height: 40px; width: 100%; float: left; margin-top: 5px; margin-bottom: 5px;} #row.mobilenav a.link:hover {color:#fff; } #row.mobilenav a img.socials {width: 30px; height: auto; margin: 5px;} @media screen and (max-width: 768px) {#row.mobilenav #right img.navi {height: 65px;}} @media screen and (max-width: 668px) {#row.mobilenav #right img.navi {height: 60px;}} @media screen and (max-width: 568px) {#row.mobilenav #right img.navi {height: 55px;}} @media screen and (max-width: 468px) {#row.mobilenav #right img.navi {height: 40px;}} @media screen and (max-width: 368px) {#row.mobilenav #right img.navi {height: 30px;}} /* +++++++++++++++++++++ THE VIDEO +++++++++++++++++++++ */ #thevideo {float: left; width: 100%;padding: 0px; margin-top: 50px; } /* +++++++++++++++++++++ COUNTDOWN +++++++++++++++++++++ */ #row.countdown {text-align: center;float: left; background-color: #000000; padding-top: 50px; padding-bottom: 50px;} #row p.intro {color: #00AEEF;text-align: center; margin: 10px;font-size: 20px; line-height: 22px; } #row p.time {color:#fff;text-align: center; margin: 10px; font-size: 50px; line-height: 55px; font-weight: 700;} #row p.time span {color:#00AEEF;font-size: 30px; font-weight: 300; } /* +++++++++++++++++++++ CITY +++++++++++++++++++++ */ #city {text-align: center; border: solid; border-width: 1px; border-color:#00AEEF; border-radius: 15px; float: left; padding-top: 20px; padding-bottom: 20px; transition: all .3s; } #city p.date {text-decoration: none; color: #00AEEF; font-weight: 800; margin: 0px; padding-bottom: 5px;} #city p.location {text-decoration: none; color: #fff; font-weight: 800; margin: 0px; padding-bottom: 5px;} #city img {width: 15%; height: auto; } p.venue {text-decoration: none; color: #00AEEF; font-weight: 400; margin: 0px; padding-bottom: 5px; text-align: center;} p.address a {color: #fff; font-weight: 600; padding-bottom: 5px; text-align: center; margin-top: 0px; margin-bottom: 15px; text-align: center;} @media screen and (max-width: 4000px) {#city p.date {font-size: 20px; line-height: 21px;} #city p.location {font-size: 23px; line-height: 28px;} #city {width: 22%; margin: 1%; } p.venue {font-size: 18px; line-height: 20px;} p.address {font-size: 20px; line-height: 23px;}} @media screen and (max-width: 2000px) {#city p.date {font-size: 20px; line-height: 21px;} #city p.location {font-size: 23px; line-height: 28px;} #city {width: 22%; margin: 1%; }} @media screen and (max-width: 1500px) {#city p.date {font-size: 15px; line-height: 18px;} #city p.location {font-size: 16px; line-height: 20px;} #city {width: 30%; margin: 1%; }} @media screen and (max-width: 768px) {#city p.date {font-size: 16px; line-height: 18px;} #city p.location {font-size: 19px; line-height: 20px;} #city {width: 47%; margin: 1%; }} @media screen and (max-width: 568px) {#city p.date {font-size: 19px; line-height: 18px;} #city p.location {font-size: 23px; line-height: 20px;} #city {width: 97%; margin: 1%; }} a:hover #city {background-color: #333333;border-color:#fff; } a:hover #city p.date {text-decoration: none; color: #fff; } a:hover #city p.location {text-decoration: none; color: #fff; } /* +++++++++++++++++++++ DONATION +++++++++++++++++++++ */ #row.donation {background-color: #000000; padding-top: 100px; padding-bottom: 100px; text-align: center; background-image: url('images/donation-back.jpg'); background-size: 100% auto; /* Zooms in to cover the area */ background-position: center center; /* Centers the image */ background-repeat: no-repeat; /* Prevents tiling */ transition: all 2s;} #row.donation:hover {background-size: 150% auto;} #row.donation img {width: 70%; height: auto;transition: all 1s;} #row.donation img:hover {width: 80%; height: auto;} img.donation {height: auto;} @media screen and (max-width: 4000px) {img.donation {width: 30%;}} @media screen and (max-width: 2000px) {img.donation {width: 40%;}} @media screen and (max-width: 1500px) {img.donation {width: 50%;}} @media screen and (max-width: 768px) {img.donation {width: 80%;}} @media screen and (max-width: 568px) {img.donation {width: 90%;}} /* +++++++++++++++++++++ TEXT +++++++++++++++++++++ */ #row.txt {background-color: #000000; padding-top: 50px; padding-bottom: 50px;} #row.txt h1 {color: #fff; font-size: 45px; line-height: 45px; padding: 0px; margin-top: 0px; margin-bottom: 30px; text-align: center; background-image: url("images/underline.png"); background-repeat: no-repeat; background-position: center bottom; padding-bottom: 20px; background-size: auto auto;} #row.txt h1 span {color: #00AEEF; font-size: 28px; line-height: 50px; text-transform: uppercase; font-weight: 700;} #row.txt h3 {color: #fff; font-size: 20px; line-height: 25px; padding-top: 15px; padding-bottom: 15px; margin-top: 0px; margin-bottom: 15px; text-align: center; margin-top: 20px; border-top: dotted; border-top-color: #00AEEF; border-top-width: 1px; border-bottom: dotted; border-bottom-color: #00AEEF; border-bottom-width: 1px; } #row.txt h4 {color: #fff; font-size: 20px; line-height: 25px; padding-top: 0px; padding-bottom: 15px; margin-top: 0px; margin-bottom: 10px; text-align: left; margin-top: 20px; font-weight: 500; } #row.txt p.privacy {color: #fff; font-size: 13px; line-height: 15px; padding: 0px; margin-top: 0px; margin-bottom: 10px; font-weight: 400;} #row.txt p.legal {color: #fff; font-size: 12px; line-height: 15px; padding: 0px; margin-top: 40px; margin-bottom: 40px; font-weight: 400; text-align: center;} #row.txt p.nation {color: #00AEEF; font-size: 18px; line-height: 21px; padding: 0px; margin-top: 0px; margin-bottom: 10px; font-weight: 800; text-align: center;} #row.txt p a {color: #00AEEF; font-weight: 800;} @media screen and (max-width: 568px) {#row.txt h1 {font-size: 30px; line-height: 30px;background-size: 75% auto;}} .slideshow-background {background-size: 100% auto;transition: all 2s; background-repeat: no-repeat; background-attachment: fixed;} #row.txt #artists {width: 46%; margin: 2%; float: left;} #row.txt #artists img {width: 100%; border-bottom: solid; border-bottom-width: 4px; border-bottom-color: #00AEEF; } #row.txt #artists p.name {color: #fff; padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 15px; text-align: center; margin-top: 10px; font-weight: 500;} @media screen and (max-width: 4000px) {p.name {font-size: 60px; line-height: 60px;}} @media screen and (max-width: 1500px) {p.name {font-size: 45px; line-height: 45px;}} @media screen and (max-width: 768px) {p.name {font-size: 35px; line-height: 40px;}} @media screen and (max-width: 568px) {p.name {font-size: 25px; line-height: 30px;}} #row.txt #artists-two {width: 29%; margin: 2%; float: left;} #row.txt #artists-two img {width: 100%; border-bottom: solid; border-bottom-width: 4px; border-bottom-color: #00AEEF; } #row.txt #artists-two p.name-two {color: #fff; padding-top: 0px; padding-bottom: 15px; margin-top: 0px; margin-bottom: 15px; text-align: center; margin-top: 10px; font-weight: 500;} @media screen and (max-width: 4000px) {p.name-two {font-size: 45px; line-height: 45px;}} @media screen and (max-width: 1500px) {p.name-two {font-size: 33px; line-height: 35px;}} @media screen and (max-width: 768px) {p.name-two {font-size: 28px; line-height: 30px;}} @media screen and (max-width: 568px) {p.name-two {font-size: 20px; line-height: 22px;}} #nation {text-align: center; border: solid; border-width: 1px; border-color:#00AEEF; border-radius: 15px; width: 22%; margin: 1%; padding-top: 20px; padding-bottom: 15px; float: left; } #nation p.define {text-decoration: none; color: #00AEEF; font-weight: 800; font-size: 16px; line-height: 19px; margin: 0px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px;} #nation p.cost {text-decoration: none; color: #fff; font-weight: 800; font-size: 18px; line-height: 21px; margin: 0px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px;} #nation p.cost span {text-decoration: none; color: #fff; font-weight: 400; font-size: 14px; line-height: 20px; margin: 0px; padding-bottom: 5px; opacity: 0.5;} a #button {background-color: #fff; color: #000000; font-weight: 800; font-size: 20px; line-height: 18px; text-align: center; padding: 15px; width: 50%; display: block; border-radius: 10px; margin-left: 25%; margin-right: 25%; margin-top: 40px; margin-bottom: 20px; } a:hover #button {background-color: #00AEEF; color: #fff; } @media screen and (max-width: 568px) {#nation {width: 47%; margin: 1%; }} /* +++++++++++++++++++++ JAM NATION +++++++++++++++++++++ */ #row.txt p.jamnation span {color: #fff; font-weight: 900;} #row.txt img.jamnation {height: auto; float: right; padding-left: 20px; padding-bottom: 20px;} @media screen and (max-width: 4000px) {#row.txt p.jamnation {color: #00AEEF; font-size: 22px; line-height: 24px; padding: 0px; margin-top: 0px; margin-bottom: 15px; font-weight: 600; text-align: left; background-image: url("images/arrow-right.png"); background-position: left top; background-repeat: no-repeat; background-size: auto 25px; padding-left: 75px;} #row.txt img.jamnation {width: 25%;}} @media screen and (max-width: 1500px) {#row.txt p.jamnation {color: #00AEEF; font-size: 18px; line-height: 22px; padding: 0px; margin-top: 0px; margin-bottom: 15px; font-weight: 600; text-align: left; background-image: url("images/arrow-right.png"); background-position: left top; background-repeat: no-repeat; background-size: auto 15px; padding-left: 50px;} #row.txt img.jamnation {width: 40%;}} @media screen and (max-width: 768px) {#row.txt p.jamnation {color: #00AEEF; font-size: 17px; line-height: 20px; padding: 0px; margin-top: 0px; margin-bottom: 15px; font-weight: 600; text-align: left; background-image: url("images/arrow-right.png"); background-position: left top; background-repeat: no-repeat; background-size: auto 15px; padding-left: 50px;} #row.txt img.jamnation {width: 50%;}} @media screen and (max-width: 568px) {#row.txt p.jamnation {color: #00AEEF; font-size: 15px; line-height: 18px; padding: 0px; margin-top: 0px; margin-bottom: 15px; font-weight: 600; text-align: left; background-image: url("images/arrow-right.png"); background-position: left top; background-repeat: no-repeat; background-size: auto 10px; padding-left: 35px;} #row.txt img.jamnation {width: 100%;}} /* +++++++++++++++++++++ CITIES +++++++++++++++++++++ */ #boxes {text-align: center; border: solid; border-width: 1px; border-color:#00AEEF; border-radius: 15px; width: 22%; margin: 1%; padding-top: 20px; padding-bottom: 15px; float: left; } #boxes p.define {text-decoration: none; color: #00AEEF; font-weight: 500; font-size: 19px; line-height: 22px; margin: 0px; padding-bottom: 10px; padding-left: 5px; padding-right: 5px;} #boxes p.time {text-decoration: none; color: #fff; font-weight: 800; font-size: 25px; line-height: 25px; margin: 0px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px;} a #button {background-color: #fff; color: #000000; font-weight: 800; font-size: 20px; line-height: 18px; text-align: center; padding: 15px; width: 50%; display: block; border-radius: 10px; margin-left: 25%; margin-right: 25%; margin-top: 40px; margin-bottom: 20px; } a:hover #button {background-color: #00AEEF; color: #fff; } #row.txt #city-artists {display: inline-block;} #row.txt #city-artists img {width: 100%; border-bottom: solid; border-bottom-width: 4px; border-bottom-color: #00AEEF; } #row.txt #city-artists p.name {color: #fff; padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 15px; text-align: center; margin-top: 10px; font-weight: 500;} @media screen and (max-width: 4000px) {p.name {font-size: 55px; line-height: 60px;} #row.txt #city-artists {width: 22%; margin: 1%;}} @media screen and (max-width: 1500px) {p.name {font-size: 40px; line-height: 45px;} #row.txt #city-artists {width: 30%; margin: 1%;}} @media screen and (max-width: 768px) {p.name {font-size: 25px; line-height: 30px;} #row.txt #city-artists {width: 30%; margin: 1%;}} @media screen and (max-width: 568px) {p.name {font-size: 20px; line-height: 25px;} #row.txt #city-artists {width: 47%; margin: 1%;}} #row.txt #city-artists-two {display: inline-block;} #row.txt #city-artists-two img {width: 100%; border-bottom: solid; border-bottom-width: 4px; border-bottom-color: #00AEEF; } #row.txt #city-artists-two p.name-two {color: #fff; padding-top: 0px; padding-bottom: 15px; margin-top: 0px; margin-bottom: 15px; text-align: center; margin-top: 10px; font-weight: 500;} @media screen and (max-width: 4000px) {p.name-two {font-size: 45px; line-height: 45px;} #row.txt #city-artists-two {width: 15%; margin: 2%;}} @media screen and (max-width: 1500px) {p.name-two {font-size: 33px; line-height: 35px;} #row.txt #city-artists-two {width: 15%; margin: 2%;}} @media screen and (max-width: 768px) {p.name-two {font-size: 24px; line-height: 28px;} #row.txt #city-artists-two {width: 30%; margin: 1%;}} @media screen and (max-width: 568px) {p.name-two {font-size: 20px; line-height: 22px;} #row.txt #city-artists-two {width: 30%; margin: 1%;}} @media screen and (max-width: 568px) {#boxes {width: 47%; margin: 1%; }} /* +++++++++++++++++++++ FOOTER +++++++++++++++++++++ */ #row.ftr {background-color: #000000; text-align: center; background-image: url("images/torndownup2.png"); background-position: center top; background-repeat: repeat-x; padding-top: 35px; padding-bottom: 50px;} #row.ftr p, #row.ftr p a {color: #000000; text-decoration: none; font-weight: 500; font-size: 13px; line-height: 25px;} #row.ftr p span {font-weight: 800;} #row.ftr p a:hover {color: #fff;} #row.ftr img.socials {width: 40px; height: auto; margin: 5px;}