/* Library Futures master landing page -- load after library-futures-main.css */

 nav a{
     color:#007dba !important;
     font-weight:bold;
}
 nav a:hover {
     color: #e87722 !important;
     text-decoration: none;
}
 #landingpg .sb-logo{
     background-image: url('/content/dam/oclc/events/2019/library-futures/libfutures_lockup_wide_animated.svg');
}

@media only screen and (max-width: 930px) {
	#landingpg .sb-logo{
		 background-image: url('/content/dam/oclc/events/2019/library-futures/libfutures_lockup_mobile.svg');
         background-size: contain;
	}
    #landingpg .sb-logo-container {
         height: 0px;
         padding-bottom:50%;
    }
}

 #locales *{
     font-family: 'Graphik', Helvetica, Arial, sans-serif;
}
 #locales.row{
     padding:8px 0;
}
 .panel{
     overflow:hidden;
     height:340px;
     background:#eceaea;
     padding:100px 0 0 4%;
     background-position: center top;
     background-size: cover;
}
 #phoenix{
     width:33%;
     margin:0;
     background-image: url('/content/dam/oclc/events/2019/library-futures/bg_phoenix.jpg');
}
 #singapore{
     width:34%;
     margin:0;
     background-image: url('/content/dam/oclc/events/2019/library-futures/bg_singapore.jpg');
}
 #vienna{
     width:33%;
     margin:0;
     background-image: url('/content/dam/oclc/events/2019/library-futures/bg_vienna.jpg');
}
 .slantbox{
     position: relative;
     float:left;
     clear:both;
     padding:12px 36px;
     transform: skewX(-45deg);
     transform-origin: 100%;
     text-align:center;
}
 .slantbox.orange{
     background:#E87722;
}
 .slantbox.fuschia{
     background:#AE2573;
}
 .slantbox:before, .slantbox:after {
     content: "";
     position: absolute;
     right: 0px;
     bottom: 0px;
}
 .slantbox:before {
     height: 200px;
     left: -1px;
     transform: skewX(0deg);
     transform-origin: right bottom;
}
 .slantbox.orange:before {
     box-shadow: 1px 200px 0px 0px #dd5713;
}
 .slantbox.fuschia:before {
     box-shadow: 1px 200px 0px 0px #921553;
}
 .slantbox h2{
     margin:0;
     font-weight:600;
     font-size:48px;
     line-height:48px;
     color:#ffffff;
     letter-spacing:1px;
     transform: skewX(45deg);
     text-transform:uppercase;
}
 .slantbox p.sub1{
     margin:0;
     font-weight:500;
     font-size:24px;
     line-height:26px;
     color:#ffffff;
     text-transform:uppercase;
     transform: skewX(45deg);
     text-align:left;
}
 .slantbox p.sub2{
     margin:0;
     font-weight:400;
     font-size:18px;
     line-height:20px;
     color:#ffffff;
     text-transform:uppercase;
     transform: skewX(45deg);
     text-align:left;
}
 .slantbox {
     animation-duration: 0.6s;
}
 #box1a{
     animation-delay: 1.0s;
}
 #box1b{
     animation-delay: 1.3s;
}
 #box1c{
     animation-delay: 1.6s;
}
 #box2a{
     animation-delay: 1.2s;
}
 #box2b{
     animation-delay: 1.5s;
}
 #box2c{
     animation-delay: 1.8s;
}
 #box3a{
     animation-delay: 1.4s;
}
 #box3b{
     animation-delay: 1.7s;
}
 #box3c{
     animation-delay: 2.0s;
}
 .panel .box-cont{
     transition: all 0.2s ease-in-out 
}
 .panel:hover{
     background-color: rgba(0, 0, 0, 0.1);
}
 .panel:hover > .box-cont {
     transform: translate(50px, -50px);
}
 @media only screen and (min-width: 1880px) {
     .panel{
         height:400px;
         padding:160px 0 0 3%;
    }
}
 @media only screen and (max-width: 1230px) {
     .panel{
         display:block;
         height:280px;
         padding:40px 0 0 10%;
    }
     #phoenix,#singapore,#vienna{
         width:100%;
    }
     #phoenix,#vienna{
         background-position:center center;
    }
     .panel:hover > .box-cont {
         transform: translate(25px, -25px);
    }
}
 @media only screen and (max-width: 520px) {
     .panel{
         height:240px;
         padding-top:50px;
    }
     .slantbox{
         padding:6px 30px;
    }
     .slantbox.h2{
         padding:4px 30px;
    }
     .slantbox h2{
         font-size:36px;
    }
     .slantbox p.sub1{
         font-size:21px;
         line-height:24px;
    }
     .slantbox p.sub2{
         font-size:16px;
         line-height:19px;
    }
}
 @media only screen and (max-width: 360px) {
      .panel{
         padding-top:60px;
    }
    .slantbox h2{
         font-size:32px;
    }
     .slantbox p.sub1{
         font-size:18px;
         line-height:21px;
    }
     .slantbox p.sub2{
         font-size:14px;
         line-height:17px;
    }
}