@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400|Montserrat:300,400,500,600'); /********************** GENERAL *********************/ html { height: 100%; width:100%; margin:0; padding:0; color: #FCFCFC; } body { width: 100%; height: 100%; margin: 0; padding: 0; color: #FFF; background-color: #5998ba; } a { -webkit-transition: background .5s, color .5s ease-out; -moz-transition: background, color .5s .5s ease-out; transition: background .5s, color .5s ease-out; } #wrapper { padding: 0; margin: 0; width: 100%; } .image-title { max-width: 400px; } /********************** Text Styles - Headers, etc *********************/ h1 { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 7rem; line-height: 7rem; margin: 0; padding: 0; color: #FFF; text-transform: uppercase; text-align: center; } h2 { font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 4.5rem; line-height: 4.5rem; margin: 0 0 1rem 0; padding: 0; color: #FFF; text-transform: uppercase; text-align: left; } h5 { font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 2rem; font-weight: 2rem; color: #FFF; text-transform: uppercase; text-align: center; } .large-text { font-size: larger; } .small-text { font-size: smaller; } /********************** STRUCTURE *********************/ #theater-listings-container { width: 100%; display: table; } #theater-row { display: table-row; } .name-header, .city-header, .state-header { display: table-cell; text-align: left; padding: .2rem; border-bottom: 2px solid #FFF; font-family: 'Lato', sans-serif; color: #FCFCFC; font-size: 1.5rem; line-height: 1.5rem; font-weight: 300; text-transform: uppercase; } .theater-name, .theater-city, .theater-state { display: table-cell; padding: .5rem .2rem .2rem .2rem; font-family: 'Lato', sans-serif; font-size: 1rem; border-bottom: 1px dotted #FFF; text-transform:capitalize; text-align:left; font-weight: 300; } .listings:hover { color: #FFF; background: rgba(255,255,255,0.09); -moz-transition: all .1s ease-in; -webkit-transition: all .1s ease-in; -o-transition: all .1s ease-in; transition: all .1s ease-in; } #theater-header:hover { background-color: none; } .name-header, .theater-name { width: 40%; text-align: left; } .city-header, .theater-city { width: 40%; text-align: left; } .state-header, .theater-state { width: 20%; text-align: left; } .dates-listings-header { width: 100%; margin: 5rem 0 2.5rem 0; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 3rem; line-height: 3rem; padding: 0; color: #FFF; text-transform: uppercase; text-align: center; } /********************** SECTIONS - Header *********************/ #header { width: 100%; margin: 0 auto; padding: 1rem 0 0 0; text-align: center; } .title-home { width: 100%; max-width: 500px; margin: 1.5rem 0 .5rem 0; text-align: center; } .opening-dates { width: 100%; margin: 1.5rem 0 4rem 0; padding: 0; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 1.5rem; line-height: 1.5rem; text-transform: uppercase; color: #FFFF; text-align:center; } .header-links { width: 100%; margin: 0 auto; text-align: center; } ul.header-links-list { list-style-type: none; margin: 2.25rem 0 0 0; } .header-links-list li { display: inline; margin: 1rem .5rem; padding: 0; } .header-links a { margin: 0; font-size: 1.25rem; line-height: 1.25rem; font-family: 'Lato', sans-serif; font-weight: 300; color: #FCFCFC; text-transform: uppercase; padding: .5rem; background-color: #FFFF; background: rgba(255,255,255,0.03); text-decoration: none; -moz-transition: all .1s ease-in; -webkit-transition: all .1s ease-in; -o-transition: all .1s ease-in; transition: all .1s ease-in; } .header-links a:hover { border-bottom: 2px solid #FFF; background: rgba(255,255,255,0.09); } .header-quotes { width: 100%; margin: 0 0 1rem 0; padding: 0; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 1.5rem; line-height: 1.75rem; } .quotes-featured { display: block; clear: both; font-weight: 400; font-size: 2rem; line-height: 2.1rem; } .quotes-credit { display: block; clear: both; font-size: .9rem; line-height: 1.25rem; } /********************** SECTIONS - Footer *********************/ #footer { position: relative; bottom: 0; width: 100%; padding: 3rem 0 0 0; margin: 0 auto; text-align: center; } .dates-listings-footer { width: 100%; text-align: center; margin: 2.5rem 0 1rem 0; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 3rem; line-height: 3rem; text-transform: uppercase; } ul.footer-list { display: block; list-style-type: none; padding: 0; margin: 0; } ul.footer-list li { list-style-type: none; margin: 1rem 0; text-transform: uppercase; } #footer a { padding: .25rem; margin: 0; color: #FFF; font-size: 1rem; line-height: 1rem; font-family: 'Lato', sans-serif; font-weight: 300; background-color: #FFFF; background: rgba(255,255,255,0.03); text-decoration: none; } #footer a:hover { color: #FFF; background: rgba(255,255,255,0.09); border-bottom: 2px solid #FFF; -moz-transition: all .1s ease-in; -webkit-transition: all .1s ease-in; -o-transition: all .1s ease-in; transition: all .1s ease-in; } /********************** MEDIA QUERIES *********************/ @media (max-width: 995px) { } @media (max-width: 670px) { h1 { font-size: 4rem; line-height: 3rem; } h5 { font-size: 1.1rem; line-height: 1.1rem; } .dates-listings-header { font-size: 1.1rem; line-height: 1.1rem; } .name-header, .city-header, .state-header { font-size: 1rem; line-height: 1rem; } .theater-name, .theater-city, .theater-state { font-size: 1rem; } } /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { } /* iPhone 5 Portrait ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { .name-header, .city-header, .state-header { font-weight: 300; border-bottom: 1px solid #FFF; } .theater-name, .theater-city, .theater-state { font-weight: 300; border-bottom: 1px solid #8da5b9; } .opening-dates { margin: 0 auto; width: 90%; font-weight: 300; } .header-links a { font-weight: 300; } .header-quotes { font-weight: 300; } .quotes-featured { font-weight: 400; } ul.footer-list li { margin: 2rem 0; } #footer a { font-weight: 300; } } /* iPhone 5 Landscape ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { .name-header, .city-header, .state-header { font-weight: 300; border-bottom: 1px solid #FFF; } .theater-name, .theater-city, .theater-state { font-weight: 300; border-bottom: 1px solid #8da5b9; } .opening-dates { margin: 0 auto; width: 90%; font-weight: 300; } .header-links a { font-weight: 300; } .header-quotes { font-weight: 300; } .quotes-featured { font-weight: 400; } ul.footer-list li { margin: 2rem 0; } #footer a { font-weight: 300; } }