/*=============================================================== GLOBAL - HEADER - FOOTER ===============================================================*/ /* NAME: global-footer.css */ /* LOCATION: http://luc.edu/media/home/stylesheets/ */ #footer-cta, #footer-cta a { margin-top: 0; } #footer-cta .span4 { float: right; margin-top: 0px; } .social li:first-child{ margin-left: 0 !important; margin-right: 10px; } #footer-cta span4 { margin: 0; } #footer-cta ul.social { width: 80%; max-width: 80%; } /*=============================================================== MEDIA QUERY - DESKTOP SMALL - TABLET LANDSCAPE ===============================================================*/ @media (min-width: 769px) and (max-width: 1024px) { #footer-cta .btn-group { margin-left: 0; width: 110px; } #footer-cta .span2 { min-width: 140px; } #footer-cta .span2 .btn-group { width: 110px; } #footer-cta .span2:first-child { min-width: 110px; } .cta, .cta:first-child { font-size: 12px; } #footer-cta .btn-group .cta:first-child { margin: 0; width: 110px; } #footer-cta .span2 .btn-group.apply, #footer-cta .span2 .btn-group.info { min-width: 110px; } #footer-cta .visit { margin: 0; width: 140px; } #footer-cta .gift { margin-left: 5px; width: 150px; } #footer-cta ul.social { float: right; width: 87.75%; } #footer-cta ul.social { max-width:85%; width:85%; } #footer-cta .span4 { float: right; margin-top: 0; } #footer { margin: 40px 0 0 0; padding: 0; width: 100%; } #footer #footer-links ul { margin-top: 15px; margin-bottom: 15px; } .social li, .social li a { width: 30px; height: 30px; } .social li a { background-size: 100%; } .social li a.icon-fb, .social li a.icon-fb:hover { background-position: 0 0px; } .social li a.icon-tw, .social li a.icon-tw:hover { background-position: 0 -30px; } .social li a.icon-yt, .social li a.icon-yt:hover { background-position: 0 -60px; } .social li a.icon-fl, .social li a.icon-fl:hover { background-position: 0 -90px; } .social li a.icon-li, .social li a.icon-li:hover { background-position: 0 -120px; } .social li a.icon-ig, .social li a.icon-ig:hover { background-position: 0 -150px; } .social li a.icon-pi, .social li a.icon-pi:hover { background-position: 0 -180px; } .social li a.icon-instagram, .social li a.icon-instagram:hover { background-position: 0 -210px; } .social li a.icon-news, .social li a.icon-news:hover { background-position: 0 -240px; } .social li a.icon-event, .social li a.icon-event:hover { background-position: 0 -270px; } .social li a.icon-rss, .social li a.icon-rss:hover { background-position: 0 -300px; } #footer-cta.container .social-cta-global { margin-top: 0; float: right; width: 35%; } #footer-cta.container div.row div.span2 { margin-left: 10px; } #footer-address .vcard { width: 50%; } } /*=============================================================== MEDIA QUERY - ALL MOBILE ===============================================================*/ @media (max-width: 768px) { footer { padding: 50px 0 40px 0 } footer #footer-links ul#main-nav.topmenugroup li, footer #footer-links ul li { padding-left: 0; padding-right: 0; width: 100%; border-bottom: solid 1px #5c5c5c; margin: 0; } footer #footer-links ul li { margin-top: 5px !important; } footer #footer-links ul li:last-child { border-bottom: 0 none !important; } footer #footer-links ul li a { margin: 0; } footer #footer-links ul li a { margin-bottom: 15px; margin-top: 15px; } footer #footer-links ul li a.nav2-toggle, footer #footer-links ul li a.nav-toggle { float: right; position: relative; bottom: 8px; right: 5px; max-height: 20px; font-size: 1.65em; } footer #footer-links ul li ul li a { margin-top: 15px !important; text-indent: 15px; } footer #footer-links ul li ul li:hover { background: rgba(0,0,0,.225); text-decoration: none; } footer #footer-links ul li ul li a:hover { text-decoration: none; } footer #footer-links ul li ul li:hover { -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } footer #footer-links .multilevel-linkul-0 { margin: 0; } footer #footer-links ul#main-nav.topmenugroup li ul li { width: 100%; border-top: solid 1px #888; border-bottom: 0; } footer #footer-links ul#main-nav.topmenugroup li ul li a { margin-bottom: 15px; margin-top: 15px; text-indent: 15px; } footer #footer-links ul#main-nav.topmenugroup li ul li a: first-child {} } /*=============================================================== MEDIA QUERY - DESKTOP SMALL - TABLET PORTRAIT ===============================================================*/ @media (min-width: 481px) and (max-width: 768px) and (orientation: portrait) { #footer { margin: 0; margin-top: 40px; width: 100%; } #footer-cta .btn-group { margin-left: 0; } .cta, .cta:first-child { font-size: 13px; } #footer-cta .span2:first-child { min-width: 90px; width: 90px; margin-left: 20px; } #footer-cta .btn-group .cta:first-child { margin: 0; min-width: 70px; width: 70px; } #footer-cta .apply span.apply, #footer-cta .info span.info, #footer-cta .visit span.visit, #footer-cta .gift span.gift { display: none; } #footer-cta .span2, #footer-cta .span2 .btn-group, #footer-cta .span2 .btn-group.apply, #footer-cta .span2 .btn-group.info, #footer-cta .visit, #footer-cta .span2 .btn-group.visit, #footer-cta .gift { min-width: 90px; width: 90px; } #footer-cta .visit, #footer-cta .span2 .btn-group.visit, #footer-cta .gift, #footer-cta .span2 .btn-group.gift { margin: 0; width: 95px; } #footer-cta ul.social { max-width: 80%; width: 80%; } #footer-cta ul.social { right: 0; margin-top: 0; max-width: 120%; width: 120%; } #footer-cta .span4 { float: right; } #footer-cta.container .social-cta-global { float: right; margin-top: 0; width: 37%; } #footer-cta ul.social { float: right; max-width: 100%; width: 100%; } .social li, .social li a { width: 30px; height: 30px; } .social li a { background-size: 100%; } .social li a.icon-fb, .social li a.icon-fb:hover { background-position: 0 0px; } .social li a.icon-tw, .social li a.icon-tw:hover { background-position: 0 -30px; } .social li a.icon-yt, .social li a.icon-yt:hover { background-position: 0 -60px; } .social li a.icon-fl, .social li a.icon-fl:hover { background-position: 0 -90px; } .social li a.icon-li, .social li a.icon-li:hover { background-position: 0 -120px; } .social li a.icon-ig, .social li a.icon-ig:hover { background-position: 0 -150px; } .social li a.icon-pi, .social li a.icon-pi:hover { background-position: 0 -180px; } .social li a.icon-instagram, .social li a.icon-instagram:hover { background-position: 0 -210px; } .social li a.icon-news, .social li a.icon-news:hover { background-position: 0 -240px; } .social li a.icon-event, .social li a.icon-event:hover { background-position: 0 -270px; } .social li a.icon-rss, .social li a.icon-rss:hover { background-position: 0 -300px; } #footer-address .vcard { width: 75%; } footer #footer-links ul li { width: 97%; } footer #footer-links ul#main-nav.topmenugroup li { padding-left: 0; } } /*=============================================================== MEDIA QUERY - PHONE - LANDSCAPE - 4 - 5 - ? ===============================================================*/ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { #footer .multilevel-linkul-0 { display:none; } } /*=============================================================== MEDIA QUERY - PHONE - DEVICE-WIDTH ===============================================================*/ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { footer { margin: 0 -20px; margin-top: 40px; padding: 50px 20px 40px; } #footer-cta .btn-group { margin-left: 0; } .cta, .cta:first-child { font-size: 13px; } #footer-cta .span2:first-child { min-width: 80px; width: 80px; margin-left: 0; } #footer-cta .btn-group .cta:first-child { margin: 0; min-width: 70px; width: 70px; } #footer-cta .apply span.apply, #footer-cta .info span.info, #footer-cta .visit span.visit, #footer-cta .gift span.gift { display: none; } #footer-cta .span2, #footer-cta .span2 .btn-group, #footer-cta .span2 .btn-group.apply, #footer-cta .span2 .btn-group.info, #footer-cta .visit, #footer-cta .span2 .btn-group.visit, #footer-cta .gift { min-width: 95px; width: 95px; display: inline-block; margin-left: 10px; } #footer-cta .visit, #footer-cta .span2 .btn-group.visit, #footer-cta .gift, #footer-cta .span2 .btn-group.gift, #footer-cta .info, #footer-cta .span2 .btn-group.info { width: 95px; } #footer-cta .span2 .btn-group.apply { margin-left: 0; } #footer-cta ul.social { float: left; left: 0; margin-left: 0; margin-top: 0; width: 100%; } #footer-cta .span4 { margin-top: 0; } .social li, .social li a { width: 30px; height: 30px; } .social li a { float: left; background-size: 100%; } .social li a.icon-fb, .social li a.icon-fb:hover { background-position: 0 0px; } .social li a.icon-tw, .social li a.icon-tw:hover { background-position: 0 -30px; } .social li a.icon-yt, .social li a.icon-yt:hover { background-position: 0 -60px; } .social li a.icon-fl, .social li a.icon-fl:hover { background-position: 0 -90px; } .social li a.icon-li, .social li a.icon-li:hover { background-position: 0 -120px; } .social li a.icon-ig, .social li a.icon-ig:hover { background-position: 0 -150px; } .social li a.icon-pi, .social li a.icon-pi:hover { background-position: 0 -180px; } .social li a.icon-instagram, .social li a.icon-instagram:hover { background-position: 0 -210px; } .social li a.icon-news, .social li a.icon-news:hover { background-position: 0 -240px; } .social li a.icon-event, .social li a.icon-event:hover { background-position: 0 -270px; } .social li a.icon-rss, .social li a.icon-rss:hover { background-position: 0 -300px; } #footer-address { margin-left: -20px; margin-right: -20px; padding: 0 20px; } #footer-address .vcard { width: 75%; } footer #footer-links ul li { margin-top: 20px; } #footer .multilevel-linkul-0 { display:none; } } /*=============================================================== MEDIA QUERY - PHONE - PORTRAIT - 4 - 5 ===============================================================*/ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { #footer-cta .span2:first-child, #footer-cta .span2:nth-child(2) { min-width: 100%; width: 100%; margin-left: 0; } #footer-cta .btn-group .cta:first-child { margin: 0; min-width: 90.5%; width: 90.5%; } #footer-cta .span2, #footer-cta .span2 .btn-group, #footer-cta .span2 .btn-group.apply, #footer-cta .span2 .btn-group.info, #footer-cta .visit, #footer-cta .span2 .btn-group.visit, #footer-cta .gift { min-width: 100%; width: 100%; margin-top: 5px; } #footer-cta .apply, #footer-cta .info, #footer-cta .visit, #footer-cta .gift { margin-left: 0px !important; margin-top: 5px !important; } #footer-cta ul.social { float: left; width: 100%; max-width: 100%; margin-top: 20px; } .social li, .social li a { width: 30px; height: 30px; } } /*=============================================================== MEDIA QUERY - PHONE - LANDSCAPE - 4 - 5 ===============================================================*/ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { #footer-cta .btn-group { margin-left: 0; } .cta, .cta:first-child { font-size: 13px; } #footer-cta .span2:first-child { min-width: 80px; width: 80px; margin-left: 0; } #footer-cta .btn-group .cta:first-child { margin: 0; min-width: 70px; width: 70px; } #footer-cta .apply span.apply, #footer-cta .info span.info, #footer-cta .visit span.visit, #footer-cta .gift span.gift { display: none; } #footer-cta .span2, #footer-cta .span2 .btn-group, #footer-cta .span2 .btn-group.apply, #footer-cta .span2 .btn-group.info, #footer-cta .visit, #footer-cta .span2 .btn-group.visit, #footer-cta .gift { min-width: 90px; width: 90px; display: inline-block; margin-left: 10px; } #footer-cta .visit, #footer-cta .span2 .btn-group.visit, #footer-cta .gift, #footer-cta .span2 .btn-group.gift { width: 95px; } #footer-cta .span2 .btn-group.apply { margin-left: 0; } #footer-cta ul.social { float: left; width: 100%; margin-top: 20px; } #footer-cta .span4 { float: left; margin-top: 0; } .social li, .social li a { width: 30px; height: 30px; } .social li a { float: left; background-size: 100%; } .social li a.icon-fb, .social li a.icon-fb:hover { background-position: 0 0px; } .social li a.icon-tw, .social li a.icon-tw:hover { background-position: 0 -30px; } .social li a.icon-yt, .social li a.icon-yt:hover { background-position: 0 -60px; } .social li a.icon-fl, .social li a.icon-fl:hover { background-position: 0 -90px; } .social li a.icon-li, .social li a.icon-li:hover { background-position: 0 -120px; } .social li a.icon-ig, .social li a.icon-ig:hover { background-position: 0 -150px; } .social li a.icon-pi, .social li a.icon-pi:hover { background-position: 0 -180px; } .social li a.icon-instagram, .social li a.icon-instagram:hover { background-position: 0 -210px; } .social li a.icon-news, .social li a.icon-news:hover { background-position: 0 -240px; } .social li a.icon-event, .social li a.icon-event:hover { background-position: 0 -270px; } .social li a.icon-rss, .social li a.icon-rss:hover { background-position: 0 -300px; } #footer-address .vcard { width: 75%; } footer #footer-links ul li { margin-top: 20px; } } /*=============================================================== MEDIA QUERY - PHONE - PORTRAIT - 5 ===============================================================*/ @media only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation : portrait), only screen and (-moz-min-device-pixel-ratio: 2) and (orientation : portrait), only screen and (-o-min-device-pixel-ratio: 2/1) and (orientation : portrait), only screen and (min-device-pixel-ratio: 2) and (orientation : portrait), only screen and (min-resolution: 2dppx) and (orientation : portrait) { #footer-cta .span2:first-child, #footer-cta .span2:nth-child(2) { min-width: 100%; width: 100%; margin-left: 0; } #footer-cta .btn-group .cta:first-child { margin: 0; min-width: 90.5%; width: 90.5%; } #footer-cta .span2, #footer-cta .span2 .btn-group, #footer-cta .span2 .btn-group.apply, #footer-cta .span2 .btn-group.info, #footer-cta .visit, #footer-cta .span2 .btn-group.visit, #footer-cta .gift { min-width: 100%; width: 100%; margin-top: 5px; margin-left: 0px; } }