* {
    margin:0;
    padding:0;
    outline:0;
}

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

body,html {
    margin:0 auto;
    font-family: 'Lato', sans-serif;
    font-weight:200;
    overflow-x:hidden;
}

.page-wrap {
    position:relative;
    width:90%;
    margin:0 auto;
}

header {
    position:fixed;
    width:90px;
    top:0;
    box-sizing:border-box;
    left:0;
    height:100vh;
    background:#FFF;
    box-shadow:0 0 15px 0px rgb(0 0 0 / 10%);
    padding:45px 10px;
    text-align:center;
    z-index:99;
}

nav {
    position:fixed;
    right:0;
    top:45px;
    background:#c09b33;
    z-index:99;
    width:120px;
}
nav a {
    display:block;
    box-sizing: border-box;
    width:100%;
    padding:15px 0 15px 15px;
    text-align:left;
}
nav a span {
    position:relative;
    display:block;
    width:30px;
}
nav a span div {
    width:100%;
    height:3px;
    background:#000;
}
nav a span div:nth-child(2){
    margin:5px auto;
}

.logo {
    position:relative;
    width:30px;
    margin:0 auto;
}
.logo img {
    width:100%;
}

.name {
    transform:rotate(270deg);
    margin:100px 0 0 -25px;
    width:120px;
    text-transform:uppercase;
}

.menu {
    position:fixed;
    width:300px;
    height:100vh;
    background:#000;
    color:#FFF;
    right:0;
    margin-right:-300px;
    top:0;
    z-index:97;
}

.close a,
.close-promo a {
    display:block;
    font-size:32px;
    color:#FFF;
    text-align:right;
    padding:15px;
    text-decoration:none;
}
.close-promo {
    position:absolute;
    top:15px;
    right:15px;
    z-index:5;
}


.splash {
    position:relative;
    margin-left:90px;
    width:calc(100% - 90px);
    height:97vh;
    background:url('/assets/img/splash-background.jpg') no-repeat center top;
    background-size:cover!important;
    border-bottom:2px #FFF solid;
}

.promo {
    position:fixed;
    display:none;
    height:100%;
    width:100%;
    z-index:100;
    top:0;
    left:0;
}
.align-center {
    text-align:center;
}
video {
    position:relative;
    display:block;
    margin:0 auto;
    width:70%;
    height:auto;
}

.content-block {
    padding:50px 0;
    text-align:center;
}

.content-block .center-wrap {
    text-align:center;
    width:100%;
}

.content-block .content-text {
    margin:0 auto;
}
.content-block .divide {
    margin:15px auto;
}


.promo-btn {
    position:relative;
    display:block;
    width:120px;
    margin:25px 0 0;
    text-align:center;
    color:#000;
    border:2px #000 solid;
}
.promo-btn:hover {
    transition:400ms;
    background:#000;
    color:#FFF;
}
.promo-btn a {
    display:block;
    padding:7px 0;
    font-size:18px;
    font-weight:700;
    text-decoration:none;
    color:#000;
}
.promo-btn:hover a {
    color:#FFF;
}
.splash.agency {
    background:url('/assets/img/agency-background.jpg') no-repeat center bottom;
    height:60vh;
    color:#FFF;
}
.splash.shows,
.splash.contact {
    height:60vh;
    background:url('/assets/img/about-background.jpg') no-repeat center top;
}

.splash.contact {
    background:url('/assets/img/ta-background.jpg') no-repeat center top;
    color:#FFF;
}

.about,
.bookings,
.contact-info,
.rome-notebook {
    position:relative;
    width:calc(100% - 90px);
    margin-left:90px;
    height:90vh;
    background:url('/assets/img/about-background.jpg') no-repeat center top;
    background-size:cover!important;
    border-bottom:2px #FFF solid;
    color:#FFF;
    border-top:2px #FFF solid;
    overflow-x:hidden;
}

.rome-notebook {
    background:url('/assets/img/r4e-notebook.jpg') no-repeat center center;
}

.contact-info {
    background:url('/assets/img/orvieto-background.jpg') no-repeat center center;
}
.bookings {
    background:url('/assets/img/services-background.jpg') no-repeat center 15%;
}

.about .page-wrap,
.bookings .page-wrap,
.splash .page-wrap,
.contact-info .page-wrap {
    height:100%;
}
.center {
    display:table;
    width:100%;
    height:100%;
}
.center-wrap {
    display:table-cell;
    vertical-align:middle;
    text-align:left;
}
.center-align {
    text-align:center;
}
.large-title {
    font-size:100px;
    width:50%;
    letter-spacing:-7px;
    line-height:125px;
}

.small-title {
    font-size:22px;
    text-transform:uppercase;
}
.divide {
    position:relative;
    margin:15px 0;
    width:50px;
    height:5px;
    background:#c09b33;
}
.content-text {
    position:relative;
    width:50%;
}
.content-text.long {
    width:90%
}

.center-wrap.full {
    width:90%;
}

.full .content-text {
    width:80%;
}

.content-text.video {
    position: relative;
    padding-bottom: 56.25%;
  }
  
  .content-text.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

@media only screen and (max-width:667px){
    .content-text.long {
        width:80%;
        padding-left:30px;
    }
}


.content-text p {
    font-size:27px;
    line-height:47px;
    font-weight:700;
    margin:15px auto;
}
.content-text.subtle p {
    font-weight:400;
}
.content-text a {
    color:#FFF;
    text-decoration:none;
}
.content-text a span {
    font-size:16px;
    margin-top:-11px;
}

.content-text.image {
    width:100%;
}
.content-text.image img {
    width:100%;
}
.content-text.image.logo img {
    width:220px;
}

.dark-block {
    background:#222;
}

.content-text.image.sm img {
    display:inline-block;
    vertical-align: middle;
    width:calc(50% - 14px);
    box-shadow:0 0 10px 0 rgba(0,0,0,0.15);
    margin:10px 5px;
}

.content-text.image.sm img:hover,
.content-text.image.sm2 img:hover {
    transform:scale(1.35);
    transition:400ms;
}

.content-text.image.sm2 img {
    width:30%;
}

@media only screen and (max-width:667px){
    .content-text.image {
        width:90%;
        margin:0 auto 0 30px;
    }
    .content-text.image.sm img,
    .content-text.image.sm2 img{
        display:block;
        width:100%;
    }
    .content-text.image.sm2 img {
        width:72%;
        margin:0 auto;
    }
    .content-text.image.sm img:hover,
    .content-text.image.sm2 img:hover {
        transform:scale(1);
    }
}

.videot {
    width:100%;
    height:100%;
    object-fit: cover;
}

.promo-video {
    height:750px;
}

.black-wrap {
    position:relative;
    display:block;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.85);
}
.rome-notebook .black-wrap {
    background:rgba(0,0,0,0.55);
}
.black-wrap.visible {
    background:transparent;
}

.events {
    position:relative;
    width:calc(100% - 90px);
    margin-left:90px;
}
.events .event {
    display:inline-block;
    width:calc(100% / 2);
    box-sizing: border-box;
    height:70vh;
    border-top:2px #FFF solid;
}
.events .event.full {
    width:100%;
}

.artists {
    position:absolute;
    left:100%;
    top:0;
    z-index:10;
    width:60%;
    height:100%;
}

.artists .black-wrap {
    background:rgba(0,0,0,0.35);
}

.artists .content-text p {
    font-size:14px;
    line-height:22px;
}

.events .event.okc {
    background:url('/assets/img/shows-background.jpg') no-repeat center center;
    background-size:cover;
    border-left:2px #FFF solid;
}

.events .event.orvieto,
.shows.orvieto {
    background:url('/assets/img/orvieto-background.jpg') no-repeat center center;
    background-size:cover;
    border-right:2px #FFF solid;
}
.shows.orvieto,
.shows.rome {
    color:#FFF;
}
.shows.f4e {
    background:url('/assets/img/f4e-background.jpg') no-repeat center center;
    color:#FFF;
}
.shows.t4e {
    color:#FFF;
    background:url('/assets/img/ta-background.jpg') no-repeat center center;
}

.events .event.rome,
.shows.rome {
    background:url('/assets/img/r4e-background.jpg') no-repeat center center;
    background-size:cover;
    border-right:2px #FFF solid;
}
.events .event.ta {
    background:url('/assets/img/ta-background.jpg') no-repeat center center;
    background-size:cover;
    border-left:2px #FFF solid;
}
.events .event.f4e {
    background:url('/assets/img/f4e-background.jpg') no-repeat center center;
    background-size:cover;
    border-left:2px #FFF solid;
}

.events .event .black-wrap {
    box-sizing: border-box;
    transition:400ms;
    padding:15px;
}

.events .event .black-wrap:hover {
    background:rgba(0,0,0,0.7);
    transition:400ms;   
}
.events .event .black-wrap .content {
    display:block;
    width:100%;
    height:100%;
    border:1px #FFF solid;
}

.ta img {
    width:100px;
}
.orvieto img,
.rome img {
    width:170px;
}
.okc img {
    width:130px;
}
.f4e img {
    width:80px;
}

.event-arrow {
    position:absolute;
    bottom:45px;
    right:45px;
    width:100px;
}
.event-arrow a,
.event-arrow a span {
    display:block;
    text-decoration:none;
}
.event-arrow-text {
    text-align:left;
    color:#FFF;
    font-size:20px;
    text-transform:uppercase;
    letter-spacing:-1px;
}
.event-arrow-icon {
    margin-top:-20px;
    margin-left:-7px;
}
.event-arrow-text,
.event-arrow-icon {
    width:100%;
}
.event-arrow-icon img {
    width:100%;
}


footer {
    position:relative;
    width:calc(100% - 90px);
    margin-left:90px;
}
.footer-top,
.footer-disclaimer {
    width:100%;
    text-align:center;
}
.footer-top {
    padding:75px 0;
    border-bottom:1px #CCC solid;
}
.footer-disclaimer {
    padding:25px 0;
    font-size:11px;
}
.footer-left,
.footer-right {
    display:inline-block;
    vertical-align:middle;
    width:50%;
    box-sizing:border-box;
}
.footer-left {
    text-align:left;
}
.footer-right {
    text-align:right;
}

.footer-right img {
    position:relative;
    width:50px;
}

.footer-4ever {
    font-size:18px;
    letter-spacing:-1px;
    word-spacing:1px;
    text-transform:uppercase;
    padding-bottom:15px;
}

.menu ul li a,
.footer-nav ul li a {
    display:block;
    font-size:42px;
    font-weight:700;
    margin-left:-15px;
    padding:7px 0 10px 15px;
    text-decoration:none;
    color:#000;
    background:#FFF;
    transition:400ms;
}

.menu ul li a {
    color:#FFF;
    background:#000;
    margin-left:0;
}
.menu ul li a:hover,
.footer-nav ul li a:hover {
    text-decoration:underline;
    background:#EEE;
    transition:400ms;
    background:#c09b33;
}

.footer-disclaimer a {
    color:#000;
}




@media only screen and (max-width:1967px){
    .large-title {
        font-size:70px;
        letter-spacing:-3px;
        line-height:80px;
    }
}

@media only screen and (max-width:1697px){
    .content-text {
        width:70%;
    }
}

@media only screen and (max-width:1467px){
    .large-title {
        font-size:50px;
        letter-spacing:-3px;
        line-height:60px;
    }
    .small-title {
        font-size:16px;
    }
    .content-text {
        width:80%;
    }
}

@media only screen and (max-width:1267px){

    .content-text {
        width:80%;
    }
    .content-text p {
        font-size:18px;
        line-height:27px;
        font-weight:700;
        margin:15px auto;
    }
    
}

@media only screen and (max-width:1067px){
    .splash {
        height:70vh;
    }
    .large-title {
        font-size:40px;
        letter-spacing:-3px;
        line-height:50px;
    }
    .content-text {
        width:100%;
    }
}

@media only screen and (max-width:967px){
    .page-wrap {
        width:96%;
    }
    .splash .center-wrap {
        background:rgba(255,255,255,0.7);
        padding:0 10px;
    }
    .large-title {
        width:100%;
    }
    .content-text p {
        font-size:14px;
        line-height:20px;
    }

    .artists .content-text p {
        font-size:10px;
        line-height:16px;
    }

    .events .event {
        display:block;
        width:100%;
        height:50vh;
        border-bottom:2px #FFF solid;
        border-left:none!important;
        border-right:none!important;
    }
    .footer-left,
    .footer-right {
        text-align:center;
        display:block;
        width:100%;
        padding:15px 0;
    }

    .footer-nav ul li a {
        display:block;
        font-size:42px;
        font-weight:700;
        margin-left:0;
        padding:7px 0 10px;
        text-decoration:none;
        color:#000;
        background:#FFF;
        transition:400ms;
    }

    header {
        width:40px;
    }

    .splash,
    .events,
    .about,
    .bookings,
    .contact-info,
    footer {
        width:calc(100% - 40px);
        margin-left:40px;
    }
    
    .logo {
        width:20px;
    }
    .name {
        font-size:11px;
        transform:rotate(270deg);
        margin:50px 0 0 -47px;
        width:120px;
        text-transform:uppercase;
    }

    nav {
        top:25px;
        width:70px;
    }
    nav a {
        display:block;
        box-sizing: border-box;
        width:100%;
        padding:15px 0 15px 15px;
        text-align:left;
    }
    nav a span {
        width:20px;
    }
    nav a span div {
        width:100%;
        height:2px;
        background:#000;
    }
    nav a span div:nth-child(2){
        margin:5px auto;
    }

    .events .event .black-wrap {
        padding:7px;
    }

    .about, .bookings, .contact-info, .rome-notebook,
    .promo-video {
        margin-left:30px;
        height:350px;
        width:100%;
    }
    .splash.shows, .splash.contact {
        height:350px;
    }

    .center-wrap {
        padding:0 50px 0 25px;
    }

}