* {padding: 0; margin: 0; list-style: none}
a {text-decoration: none; outline: none; transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out}
div {font-family: 'Titillium Web', sans-serif}
p {margin-top: 22px; margin-bottom: 0}
img {border: 0}
.clear {clear: both}
.left {float: left}
.right {float: right}
.center {text-align: center}
.screen {min-width: 1200px; max-width: 1680px; margin: auto; position: relative; overflow: hidden}
.page {width: 1200px; margin: auto; position: relative;}
.main {height: 815px}
.main .anim {height: 725px}
.sub {height: 515px}
.sub .anim {height: 425px}
.anim {width: 1680px; position: absolute; bottom: 0; left: 50%; margin-left: -840px; z-index: 1}
.anim img {display: block}
.logo {display: block; width: 530px; height: 200px; background: #fff; position: absolute; top: 0; left: 50%; margin-left: -600px; z-index: 4; -webkit-animation: showtop .5s cubic-bezier(0.175, 0.885, 0.320, 1.275) forwards; animation: showtop .5s cubic-bezier(0.175, 0.885, 0.320, 1.275) forwards}
.logo img {display: block; margin-left: 10px; margin-top: 30px; -webkit-animation: showtop .6s cubic-bezier(0.175, 0.885, 0.320, 1.275) forwards; animation: showtop .6s cubic-bezier(0.175, 0.885, 0.320, 1.275) forwards}
.logo_orly {background: #fff; position: absolute; top: 0; left: 50%; margin-left: -230px; z-index: 4; -webkit-animation: showtop .5s cubic-bezier(0.175, 0.885, 0.320, 1.275) forwards; animation: showtop .5s cubic-bezier(0.175, 0.885, 0.320, 1.275) forwards}
.logo_orly img {display: block; margin-left: 0px; margin-top: 30px; -webkit-animation: showtop .6s cubic-bezier(0.175, 0.885, 0.320, 1.275) forwards; animation: showtop .6s cubic-bezier(0.175, 0.885, 0.320, 1.275) forwards}
.top .phone {position: relative; z-index: 2; padding-top: 50px}
.top .phone ul {float: right}
.phone li {float: left; margin-right: 36px; padding-left: 35px; font-size: 16px; line-height: 20px; color: #002a5c}
.phone li:nth-child(1) {background: url(img/phone.png) left no-repeat}
.phone li:nth-child(2) {background: url(img/mail.png) left no-repeat}
.phone a {color: #002a5c}
#slider {width: 100%; height: 725px; overflow: hidden}
#slider li {width: 100%; height: 100%}
#slider img {display: block; width: 1680px !important; height: 725px !important}
.anythingSlider {width: 100%; height: 725px; position: absolute; top: 0; left: 0; z-index: 1; overflow: hidden !important}
.anythingSlider .anythingWindow {overflow: hidden; position: relative; width: 100%; height: 100%; z-index: 1}
.anythingSlider .anythingBase {background: transparent; list-style: none; position: absolute; overflow: visible !important; top: 0; left: 0; margin: 0; padding: 0}
.anythingSlider .panel {display: block; overflow: hidden; float: left; padding: 0; margin: 0}
.anythingSlider .vertical .panel {float: none}
.anythingSlider .fade .panel {float: none; position: absolute; top: 0; left: 0; z-index: -1}
.anythingSlider .fade .activePage {z-index: 1}
.anythingSlider .fade .panel {z-index: 0}
.sht {position: absolute; top: 0; left: 0; width: 100%; height: 201px; z-index: 2}
.cover-tw {position: absolute; top: 0; left: 50%; margin-left: -840px; z-index: 3}
.cover-bg {position: absolute; bottom: 0; left: 50%; margin-left: -840px; z-index: 2}
.menu {height: 108px; position: relative; z-index: 3; font-size: 18px; font-weight: 700; line-height: 74px; text-transform: uppercase}
.menu ul {float: right}
.menu li {float: left}
.menu li a {display: block; padding: 35px 20px 0 20px; color: #fff}
.menu li.active a {background: rgba(0,42,92,0.6)}
.menu li a:hover {background: #2883bc}
.top .menu li {-webkit-animation: showright 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; animation: showright 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; opacity: 0}
.top .menu li:nth-child(2) {animation-delay: .1s}
.top .menu li:nth-child(3) {animation-delay: .2s}
.top .menu li:nth-child(4) {animation-delay: .3s}
.top .menu li:nth-child(5) {animation-delay: .4s}
.adventure {position: absolute; top: 220px; left: 0; width: 100%; text-align: center; z-index: 5; font-size: 66px; color: #fff; line-height: 280px; background: url(img/sh.png) center no-repeat}
.more {display: block; width: 240px; position: absolute; top: 420px; left: 50%; margin-left: -120px; z-index: 6; font-size: 20px; font-weight: 700; text-transform: uppercase; text-align: center; line-height: 76px; background: rgba(0,42,92,0.7); color: #fff}
.more:hover {background: #2883bc}
.container {background: #f1f1f1; padding: 70px 0 50px 0; z-index: 2; font-size: 16px; line-height: 22px; color: #3c3c3c; text-align: justify}
.container h1 {font-size: 40px; font-weight: 400; color: #002a5c; line-height: 100px; padding-left: 50px; width: 700px; margin-bottom: 40px}
.container h2 {font-size: 30px; font-weight: 400; color: #000; line-height: 34px; margin-bottom: 40px}
.about {padding: 0 50px; width: 500px; min-height: 400px}
.btn {display: block; width: 170px; font-size: 16px; font-weight: 700; text-transform: uppercase; text-align: center; line-height: 54px; background: #2883bc; color: #fff; margin-top: 40px}
.btn:hover {background: #002a5c}
.mfoto {position: absolute; top: 0; right: 0; margin-bottom: 20px; padding-top: 30px}
.why {background: #f1f1f1 url(img/why-us.jpg) top no-repeat; padding-bottom: 40px}
.why .page {z-index: 2}
.why h2 {font-size: 52px; font-weight: 400; color: #fff; line-height: 60px; padding: 65px 0 30px 280px}
.why li  {float: left; width: 282px; margin-left: 24px; height: 260px; font-size: 16px; line-height: 22px; text-align: center}
.why li:first-child {margin: 0}
.why li a, .why li span {display: block; padding: 0 23px; height: 100%; color: #002a5c; background: #fff}
.why li img {display: block; margin: 0 auto 20px auto; padding-top: 25px}
.why li strong {display: block; color: #000; font-size: 20px; text-transform: uppercase; line-height: 32px; margin-bottom: 7px}
.why li a:hover {background: #fff}
.cover-tg {position: absolute; top: 0; left: 50%; margin-left: -840px; z-index: 1}
.cover-bw {position: absolute; top: 340px; left: 50%; margin-left: -840px; z-index: 1}
.bottom {background: #002a5c; padding: 50px 0; font-size: 16px; line-height: 20px; color: #fff}
.menu-bottom {float: left; font-weight: 700; text-transform: uppercase}
.menu-bottom li {float: left; margin-left: 50px}
.menu-bottom li a {color: #fff}
.menu-bottom li.active a, .menu-bottom li a:hover {color: #2883bc}
.bottom .phone {float: right}
.bottom .phone li {color: #fff}
.copy {text-align: center; font-size: 14px; line-height: 20px; padding: 40px 0; color: #666}
.copy img {margin: 0 0 -6px 3px; width: 55px; height: 20px}
.content {padding: 0 50px 30px 50px}
.sub .adventure, .sub .more {display: none}
.price {margin-bottom: 50px}
.price li {padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #ccc; line-height: 50px}
.price strong {float: right; display: block; background: #e7e7e7; color: #2883bc; text-align: center; width: 120px}
.col {width: 46%}
.col img {display: block; width: 100%; height: auto}
.promo {font-size: 18px; line-height: 30px; text-align: center; background: #e7e7e7; padding: 30px 0}
.kayak {padding: 0 50px}
.desc {padding-top: 40px}
.desc ul {width: 25%; float: left}
.desc li {padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dotted #ccc}
.desc img {width: 70%; height: auto; float: right}
.see {width: 510px; display: block; margin: 20px 0; background: #0d2c5a; font-size: 18px; font-weight: 700; color: #fff; text-align: center; line-height: 50px}
.see img {display: block}
.see span {display: inline-block; padding: 0 30px; background: url(img/more.png) right no-repeat}
.see:hover {background: #2883bc}
hr {width: 100%; height: 1px; border: 0; background: #ccc; margin: 50px 0}
.partners {text-align: center; border-top: 1px solid #ccc; padding: 20px 0}
.partners span, .partners img {display: inline-block; vertical-align: middle; margin: 0 20px}
.grey {background: #f1f1f1}

@-webkit-keyframes show {
    0% {opacity: 0}
	100% {opacity: 1}
}
@keyframes show {
    0% {opacity: 0}
	100% {opacity: 1}
}

@-webkit-keyframes showright {
    0% {opacity: 0; transform: translate(50px,0)}
	100% {opacity: 1; transform: translate(0,0)}
}
@keyframes showright {
    0% {opacity: 0; transform: translate(50px,0)}
	100% {opacity: 1; transform: translate(0,0)}
}

@-webkit-keyframes showleft {
    0% {opacity: 0; transform: translate(-50px,0)}
	100% {opacity: 1; transform: translate(0,0)}
}
@keyframes showleft {
    0% {opacity: 0; transform: translate(-50px,0)}
	100% {opacity: 1; transform: translate(0,0)}
}

@-webkit-keyframes showbottom {
    0% {opacity: 0; transform: translate(0,50px)}
	100% {opacity: 1; transform: translate(0,0)}
}
@keyframes showbottom {
    0% {opacity: 0; transform: translate(0,50px)}
	100% {opacity: 1; transform: translate(0,0)}
}

@-webkit-keyframes showtop {
    0% {transform: rotate(-10deg) translate(0px, -100%)}
	100% {transform: rotate(0) translate(0px, 0px)}
}
@keyframes showtop {
    0% {transform: rotate(-10deg) translate(0px, -100%)}
	100% {transform: rotate(0) translate(0px, 0px)}
}