@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Extra+Condensed:400,400i,600,600i&subset=cyrillic');

html {padding:0px;margin:0px;height: 100%;}
body {min-height: 100%;color:#ffffff;padding:0px;margin:0px;font-size:14px;font-family: 'Fira Sans Extra Condensed', Helvetica, Arial, sans-serif;line-height: 1.5;position: relative;;
background:url('http://animalpark.com.ua/files/drifttime/background-01.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color:#000000;
}
* {margin: 0;}
.clear {clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
.transition {-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in;}
.shadow{-webkit-box-shadow: 0px 5px 9px -5px rgba(0,0,0,0.50);-moz-box-shadow: 0px 5px 9px -5px rgba(0,0,0,0.50);box-shadow: 0px 5px 9px -5px rgba(0,0,0,0.50);z-index:1000;}
.table {display:table;margin: 0 auto;}
.wrapper {display: flex;flex-direction: column;height: 100%;}
.wrapper-content {flex: 1 0 auto;}
.wrapper-footer {flex: 0 0 auto;}
hr {border: 0 #e6e6e6 solid;border-top-width:1px;clear:both;display:block;height:0;margin:0px auto;}
blockquote{border-left:5px solid #004d9d;font-weight:700;font-style:italic;padding-left:20px;font-size:16px;color:#666666;}
a{-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in;color:#ffffff;}
a:hover{color:#f3ec19;}
.logo{}
h1,h2,h3,h4{color:#ffffff;line-height:1.2;padding:0px;margin:0px;font-family: 'Fira Sans Extra Condensed', Helvetica, Arial, sans-serif;}

header{padding-top:40px;}
header h1 {font-size:32px;font-weight:600;font-style:italic;}
header h2 {font-size:18px;font-weight:600;font-style:italic;}

.slogan{font-size:22px;font-weight:600;font-style:italic;text-transform:uppercase;}

.adres{z-index:2;background-color:#f3ec19;color:#000000;padding:0px 400px 0px 20px;position:relative;float:right;height:60px;line-height:1.2;font-size:16px;}
.adres p{padding:0px;margin:0px;font-style:italic;font-weight:600;}
.adres::after {position:absolute;content:'';left: -10px; bottom: 0px;border: 60px solid transparent;border-bottom: 0px solid transparent;border-right: 10px solid #f3ec19;border-left: 0px solid transparent;}

.phone{z-index:1;background-color:#e73125;color:#ffffff;padding:0px 40px 0px 30px;position:relative;float:right;height:60px;line-height:1.2;font-size:24px;}
.phone p{padding:0px;margin:0px;font-style:italic;font-weight:600;}
.phone::after {position:absolute;content:'';left: -10px; bottom: 0px;border: 60px solid transparent;border-bottom: 0px solid transparent;border-right: 10px solid #e73125;border-left: 0px solid transparent;}

.social{float:left;height:60px;padding-left:40px;}
.social a{display:block;width:32px;height:28px;padding-top:4px;text-align:center;background:#f3ec19;color:#000000;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;font-size:18px;}
.social a:hover{background:#e73125;color:#ffffff;}

.gallery figure{border:1px solid #ffffff;}

main{padding-top:60px;}
footer{padding-top:100px;}

.button{display:inline-block;border:2px solid #ffffff;padding:10px 20px;text-decoration:none;text-transform:uppercase;}
.button:hover{border:2px solid #ffffff;background:#ffffff;color:#000000;text-decoration:none;}

@media screen and (max-width: 1219px) {
.adres{padding:0px 200px 0px 20px;}
}
@media screen and (max-width: 959px) {
.adres{padding:0px 100px 0px 20px;}
header h1{font-size:28px;}
header h2 {font-size:18px;}
}
@media screen and (max-width: 767px) {
header h1{font-size:22px;font-weight:600;}
header h2 {font-size:16px;font-weight:400;}
footer{padding-top:60px;}
.adres{padding:0px 60px 0px 20px;}
}
@media screen and (max-width: 480px) {
header{padding-top:20px;}
main{padding-top:20px;}
.logo{width:60%;}
header h1{text-align:center;}
header h2 {text-align:center;}
.adres{padding:0px 30px 0px 20px;}
}