style.css

@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;src:local('Open Sans Light'),local('OpenSans-Light'),url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans Regular'),local('OpenSans-Regular'),url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:800;src:local('Open Sans ExtraBold'),local('OpenSans-ExtraBold'),url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN8rsOUuhs.ttf) format('truetype')}@font-face{font-family:Rokkitt;font-style:normal;font-weight:400;src:local('Rokkitt Regular'),local('Rokkitt-Regular'),url(https://fonts.gstatic.com/s/rokkitt/v12/qFdE35qfgYFjGy5hkEaCcw.ttf) format('truetype')}@font-face{font-family:Rokkitt;font-style:normal;font-weight:700;src:local('Rokkitt Bold'),local('Rokkitt-Bold'),url(https://fonts.gstatic.com/s/rokkitt/v12/qFdB35qfgYFjGy5hmP2nY9nqwg.ttf) format('truetype')}html{height:100%;min-height:100%;overflow-x:hidden;overflow-y:scroll;background:url(img/bg.png);color:#333;font-family:"Open Sans",sans-serif}body{height:100%;min-height:100%;margin:0}a{color:#bbb;text-decoration:none;font-weight:700}input:focus{outline:0}*{box-sizing:border-box}.header{width:100%;height:80px;z-index:1;position:fixed;top:0;background:#b74b66;box-shadow:0 0 10px rgba(0,0,0,.5);text-align:center;font-size:2em}.header__container{max-width:1100px;height:80px;margin:0 auto;padding:0 50px;display:flex;justify-content:space-between;align-items:center}.header__title{max-width:1100px;margin:0;flex:1;color:#eee;font-family:Rokkitt,serif;font-size:1.2em;line-height:.8em;text-shadow:3px 3px 0 #6d2358;text-align:left}.header__title--name{color:#fff}@media (max-width:800px){.header__title{margin:10px auto;padding:0;font-size:.9em;text-align:center}}.body-container{min-height:100%;position:relative}.subheader{width:100%;margin:0;padding:20px 0;border-top:80px solid;background:url(img/header.jpg) 0 38%;background-size:cover;box-shadow:0 0 10px rgba(0,0,0,.5);color:#fff}.subheader__container{width:100%;max-width:1100px;margin:0 auto}.subheader__title{max-width:800px;margin:.2em auto;padding-right:32%;text-align:center;font-size:3.2em;font-weight:700}@media (max-width:800px){.subheader__title{padding:0 50% 0 5%;font-size:1.8em}}.main{width:100%;max-width:1100px;margin:0 auto;padding:50px 50px 160px}@media (max-width:800px){.main{padding:50px 0 250px;overflow:hidden}}.main__text{max-width:1100px;margin:0 auto 60px;font-size:1em}@media (max-width:800px){.main__text{padding:0 50px}}.navigation{height:64px;margin-bottom:50px;overflow:hidden;border-bottom:4px solid #b74b66}@media (max-width:800px){.navigation{height:auto;border:0}}.navigation ul{margin:0;padding:0}.navigation li{float:left;list-style:none}@media (max-width:800px){.navigation li{width:100%}}.navigation__tab{width:240px;height:60px;display:flex;justify-content:center;align-items:center;background:#bbb;border-top-left-radius:8px;border-top-right-radius:8px;color:#fff;font-size:1.5em;text-align:center;transition:all .2s}@media (max-width:800px){.navigation__tab{width:100%;border-radius:0}}.navigation__tab:hover{background:orange}.navigation__tab--active{background:#b74b66}.view-loader.ng-enter{opacity:0;transform:translate3d(8%,0,0);transition:all .2s ease-out}.view-loader.ng-enter-active{opacity:1;transform:translate3d(0,0,0)}.footer{width:100%;padding:30px;position:absolute;bottom:0;background:#360;box-shadow:0 0 12px rgba(0,0,0,.5);color:#fff;text-align:center;font-size:.9em}.how-to-adopt__text{margin:0;padding:0}@media (max-width:800px){.how-to-adopt__text{padding:0 40px}}.how-to-adopt__image{width:100%;height:455px;margin:0 auto 40px;display:block;box-shadow:4px 4px 20px rgba(0,0,0,.2)}.card{width:100%;height:250px;margin:0 0 40px;overflow:hidden;display:flex;justify-content:space-between;align-items:center;background:#eee;box-shadow:0 -5px 0 #b74b66,0 0 10px rgba(0,0,0,.5);color:#333;transition:all .1s ease-out}@media (max-width:800px){.card{height:150px;margin:0;box-shadow:0 5px 0 #b74b66 inset,10px 10px 30px rgba(0,0,0,.2)}}.card:hover{background:#fff;box-shadow:0 -5px 0 orange,10px 10px 30px rgba(0,0,0,.2);cursor:pointer;transform:scale(1.025)}.card:active{transform:scale(1);background:#ffffe0}.card--selected{background:#ffefd5}.card--selected:hover{background:#ffefd5}.card__photo{width:250px;height:250px;position:relative}@media (max-width:800px){.card__photo{width:150px;min-width:150px;height:150px}}.card__photo-img{width:100%;height:100%;display:block;position:absolute;top:0;left:0;background-size:cover}.card__body{padding:40px;overflow:hidden;flex:1;font-size:1em}@media (max-width:800px){.card__body{padding-right:0}}.card__body-title{margin:0;font-family:Rokkitt,serif;font-size:2.5em}.card__body-text{margin:0 0 20px;color:#666}@media (max-width:800px){.card__body-text{display:none}}.card.ng-enter{height:0;margin:0;opacity:0;transition:all .2s ease-out}.card.ng-enter-active{height:250px;margin:0 0 40px;opacity:1}.card.ng-leave{transition:all .2s ease-in}.card.ng-leave-active{height:0;margin:0;opacity:0}.filter{width:100%;max-width:1100px;margin:50px auto;padding:8px 20px 10px;display:block;background:#fff;border-radius:5px;border:4px solid #bbb;color:#333;font-size:1.8em;font-family:"Open Sans",san-serif;transition:all .3s ease-out}.filter:hover{border-color:orange}.filter:focus{border-color:#360;box-shadow:0 0 20px rgba(255,255,255,.2),0 0 10px rgba(0,0,0,.2) inset}@media (max-width:800px){.filter{width:calc(100% - 100px)}}