#home { height: 100%; width: 100%; background: url(../img/bg-original.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; position: absolute; top: 0; left: 0; } #title { width: 80%; margin: auto; text-align: center; margin-left: 10%; position: absolute; top: 50%; margin-top: -14%; } #menu { font-family: Garamond, 'EB Garamond', serif; position: relative; font-size: 17px; margin: auto; text-align: center; margin-top:24px; width: 100%; } #menu a { color:#000; } .item { display: inline-block; margin:0; margin:0px 8px; letter-spacing: .4px; cursor: pointer; } .item:hover { text-decoration: underline; } #menu li { font-size: 15px; margin: 1px; } #menu-icon { position: absolute; top: 13px; right: 21px; } #menu-icon img { width: 32px; } #down { position: absolute; bottom:15px; width: 30px; left:50%; margin-left:-15px; cursor: pointer; } #main { position: absolute; top:100%; left:0; width: 100%; height: 100%; background: url(../img/flowers-big.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } #album { width: 100%; text-align: center; width: 100%; text-align: center; position: absolute; top: 50%; margin-top: -22%; } #back, #front { width: 38%; margin: 2%; display: inline-block; box-shadow: 0px 0px 10px rgba(0,0,0,.3); } .cover { width: 100%; } #preorder { font-family: Garamond, 'EB Garamond', serif; background: url(../img/bg-original.jpg) no-repeat fixed; display: inline-block; text-align: center; position: absolute; bottom: 4%; left: 50%; margin-left: -185px; padding: 10px 20px; font-size: 18px; letter-spacing: .5px; box-shadow: 0px 0px 10px rgba(0,0,0,.3); } #preorder a { color:#000; margin:0px 3px; opacity: 1; -webkit-transition: opacity .3s ease; -moz-transition: opacity .3s ease; transition: opacity .3s ease; } #preorder a:hover { opacity: .6; -webkit-transition: opacity .3s ease; -moz-transition: opacity .3s ease; transition: opacity .3s ease; } #contactbox #join { margin-bottom:2px; } #listen { position: absolute; top:200%; left:0; width: 100%; height: 100%; background: url(../img/bg-original.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } .videowrapper { width: 80%; text-align: center; margin: 0 auto; position: absolute; top: 50%; margin-top: -20%; left: 50%; margin-left: -40%; } #videowrapper{ top:50%; margin-bottom:0px; } .vid { text-align: center; xmargin-top:20%; } .vid iframe { width: 853px; height: 480px; box-shadow: 0px 0px 10px rgba(0,0,0,.2); } .slick-list { top: 50%; margin-top: -240px; } .slick-prev { background: url(../img/left.svg); width: 40px; height: 40px; z-index: 10; left:2%; } .slick-next { background: url(../img/right.svg); width: 40px; height: 40px; z-index: 10; right:2%; } #tweets { width: 80%; margin:60px auto; padding:10px; background: url(../img/bg-original.jpg) no-repeat center center fixed; box-shadow: 0px 0px 10px rgba(0,0,0,.3); } #tweets iframe .timeline { width: 100% !important; } #tour { position: absolute; top:300%; left:0; width: 100%; background: url(../img/bg4.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } #tourbox { width: 80%; margin:60px auto; padding:10px; background: url(../img/bg-original.jpg) no-repeat center center fixed; box-shadow: 0px 0px 10px rgba(0,0,0,.3); } #contactbox { width: 80%; margin:60px auto; padding:10px; background: url(../img/bg-original.jpg) no-repeat center center fixed; box-shadow: 0px 0px 10px rgba(0,0,0,.3); } #contactbox p { font-family: Garamond, 'EB Garamond', serif; font-size: 15px; margin: 6px 10px; } #contactbox a { color:#000; opacity: 1; -webkit-transition: opacity .3s ease; -moz-transition: opacity .3s ease; transition: opacity .3s ease; } #contactbox a:hover { opacity: .6; -webkit-transition: opacity .3s ease; -moz-transition: opacity .3s ease; transition: opacity .3s ease; } #social { padding:0px; margin-left:6px; margin-bottom:12px; } #social li { display: inline-block; list-style-type: none; margin:0px 3px; } #social img { width: 26px; opacity: 1; -webkit-transition: opacity .3s ease; -moz-transition: opacity .3s ease; transition: opacity .3s ease; } #social img:hover { opacity: .6; -webkit-transition: opacity .3s ease; -moz-transition: opacity .3s ease; transition: opacity .3s ease; } .slick-dots li button:before { font-size: 25px; } .slick-dots { bottom: 50%; margin-bottom: -280px; } #mailform { margin-left: 10px; margin-bottom: 10px; } #emailinput { font-size: 15px; font-family: Garamond, 'EB Garamond', serif; padding: 2px 4px; color: #000; border: 1px solid #999; background:rgba(250,250,250,.4); letter-spacing: .4px; margin-right:3px; } .email{ font-family: Garamond, 'EB Garamond', serif; font-size: 15px; } .submit { color:#fff; font-family: Garamond, 'EB Garamond', serif; background:#222; border:none; font-size: 15px; letter-spacing: .4px; padding: 3px 7px; } input:focus {outline:0;} @media screen and (max-device-width:600px) { #home { background: url(../img/bg-original.jpg); } #main { background: url(../img/flowers-big.jpg); height:150%; } #preorder { background: url(../img/bg-original.jpg); width: 78%; margin-left: -41%; padding: 2%; bottom: 25%; margin-bottom: -35%; font-size: 16px; } #listen { background: url(../img/bg-original.jpg); top:250%; height:50%; } #tour { background: url(../img/mobile-bg.jpg); } #tourbox { background: url(../img/mobile-bg2.jpg); } #tweets { background: url(../img/mobile-bg2.jpg); } #contactbox { background: url(../img/mobile-bg2.jpg); } #example1 ul { padding:0px 1%; } #menu { font-size: 12px; } .item { letter-spacing: 0px; margin:0px 5px; } #album { top:10%; margin-top:0px; } #back, #front { width: 70%; } .slick-next, .slick-prev { width: 20px; height:20px; margin-top:-10px; } .slick-next { right: 10px; } .slick-prev { left:10px; } } @media screen and (max-width:990px) { .vid iframe { width: 640px; height:360px; } .slick-list { margin-top: -180px; } } @media screen and (max-width:770px) { .vid iframe { width: 560px; height:315px; } .slick-list { margin-top: -157px; } } @media screen and (max-width:680px) { .vid iframe { width: 230px; height:129px; } .slick-list { margin-top: -73px; } }