/**
* ---------------------------------------------------------------------------
*
*	CSS main style sheet for Armadale Reptile & Wildlife Centre website
*	Author: Leyé Jin (jinleye@hotmail.com)
*	Version: 1.337
* 
* --------------------------------------------------------------------------- */

/*===================================
	Basic styles
===================================*/
/* Main elements */
body {
   font-family: 'Raleway', sans-serif;
   line-height: 24px;
   font-size: 16px;
   color: #777;
   background: #FFF url("../img/body.png") repeat fixed;
}
figure, p, address {
   margin: 0;
}
iframe {
   border: 0;
}
a {
   color: #395542;
   -webkit-transition: all 0.2s ease-out 0s;
   -moz-transition: all 0.2s ease-out 0s;
   -ms-transition: all 0.2s ease-out 0s;
   -o-transition: all 0.2s ease-out 0s;
   transition: all 0.2s ease-out 0s;
}
a:hover, a:focus, .btn:focus {
   text-decoration: none;
   outline: none;
   color: #C7D6C7;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   font-family: 'Roboto Slab', serif;
   color: white;
}
h1 {
   display: none;
}
p, li{
   font-size: 15px;
}
main > section {
   padding: 40px 0;
}

/* Logo */
.arwc_logo {
   width: 200px;
   height: auto;
   left: 40px;
   top: 40px;
   position: absolute;
   z-index: 998;
}

/* Back to top button */
.back-to-top {
   position: fixed;
   bottom: 15px;
   right: 15px;
   z-index: 99;
   width: 40px;
   height: 40px;
   text-align: center;
   line-height: 30px;
   background: #000;
   color: #EEE;
   cursor: pointer;
   text-decoration: none;
   opacity: 0.5;
   display: none;
   transition: background 0.4s;
   border-radius: 50%;
}
.back-to-top:hover {
   background: #333;
}

/* Alert box */
.alert-overlay {
   background: rgba(0, 0, 0, 0.7);
   position: fixed;
   width: 100%;
   z-index: 1000;
   padding: 30px;
   color: white;
   height: 100vh;
}
.alert {
   padding: 15px;
   border: 1px solid #FFA300;
   margin: 0;
   border-radius: 0;
   text-align: center;
   height: 100%;
   overflow-y: auto;
}
.alert.info {
   background: rgba(50, 50, 50, 0.8);
}
.alert h2 {
   color: #FFA300;
   margin: 5px 0;
}
.alert p {
   font-size: 14px;
   text-align: left;
}
.alert img {
   display: inline-block;
   padding: 15px 0;
}
.alert-closebtn {
   position: fixed;
   top: 55px;
   right: 55px;
   cursor: pointer;
   transition: 0.3s;
   background: url("../img/icons/close.png") no-repeat scroll 0 0 transparent;
   height: 50px;
   width: 50px;
   z-index: 1001;
}
.alert-closebtn:hover {
   background: url("../img/icons/close_hover.png") no-repeat scroll 0 0 transparent;
}
.alert i {
   color: #368772;
   font-size: 24px;
}

#wrap{
   width: 1349px;
   margin: 0 auto;
   background-color: #FFF;
   max-width: 100%;
}
.btn {
   color: #FFF;
   background: transparent;
   padding: 15px 55px;
   border: 2px solid #FFF;
   border-radius: 0;
   text-transform: uppercase;
   display: inline-block;
   text-align: center;
   cursor: pointer;
   box-shadow: inset 0 0 0 0 #FFF;
   -webkit-transition: all ease 0.3s;
   -moz-transition: all ease 0.3s;
   transition: all ease 0.3s;
}
.btn:hover {
   background-color: #FFF;
   color: #382822;
}
.section-title {
   margin-bottom: 20px;
}
.section-title.white {
   color: #fff;
}
.section-title h2 {
   color: #382822;
   font-weight: bold;
   line-height: 20px;
   margin: 60px 0px 30px 0px;
   padding-bottom: 20px;
   position: relative;
   text-transform: uppercase;
   font-size: 56px;
}
.section-title h2:after {
   content: '';
   display: block;
   background: #382822;
   height: 3px;
   max-width: 500px;
   width: 100%;
   margin: 18px auto 0px auto;
}
.section-title p {
   color: #444;
   font-size: 16px;
}
.section-title.white p {
   color: #fff;
}
.section-title.white h2 {
   color: #fff;
}
.parallax {
   background-attachment: fixed;
   background-position: center top;
   background-repeat: no-repeat;
   background-size: cover;
   perspective: 300px;
}
.overlay {
   background: url("../img/slide_bg.png") repeat scroll 0 0 transparent;
   padding: 0;
}

/*===================================
	Navbar
===================================*/
.navbar {
   z-index: 999;
   padding: 5px 5px 0 5px;
   height: 58px;
   background-color: #382822;
   border: 0 solid;
   border-radius: 0px;
   box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.5);
}
.navbar-toggle {
   border: 0;
   margin-right: 8px;
}
.navbar-toggle:hover {
   background-color: #368772!important;
   border-radius: 0;
}
.navbar-toggle .icon-bar {
   background-color: white!important;
}
.navbar .navbar-collapse {
   margin: 4px -21px 0px -21px;
   border-top: 2px solid #368772;
   box-shadow: none;
   background-color: #405149;
   box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.5);
}
.navbar ul.nav.navbar-nav {
   display: inline;
}
.navbar ul.nav.navbar-nav li {
   margin-left: -21px;
   margin-right: -15px;
}
.navbar ul.nav.navbar-nav li a {
   color: #EEE;
   font-family: "Arial black", sans-serif;
   font-size: 15px;
   font-weight: 400;
   text-transform: uppercase;
   padding-left: 30px;
}
.navbar ul.nav.navbar-nav li a:hover {
   background-color: #368772;
   color: #EEE;
}
.navbar ul.nav.navbar-nav li.active a {
   background-color: #368772;
   color: #EEE;
}

@media (min-width: 768px) {
   .navbar {
      z-index: 999;
      background-color: transparent;
      padding: 25px 0;
      height: 73px;
      -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
      -moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
      transition: background .5s ease-in-out, padding .5s ease-in-out;
      border: 0;
      border-radius: 0;
      box-shadow: none;
   }
   .top-nav-collapse {
      padding: 10px 0;
      background-color: #382822;
      box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.5);
      opacity: 0.9;
   }
   .navbar .navbar-collapse {
      margin-top: 0px;
      border: 0;
      background-color: transparent;
      box-shadow: none;
   }
   .navbar ul.nav.navbar-nav {
      display: inline-block;
      float: right;
   }
   .navbar ul.nav.navbar-nav li {
      margin: 0;
      padding: 0;
   }
   .navbar ul.nav.navbar-nav li a {
      color: white;
      font-family: "Arial black", sans-serif;
      font-size: 12px;
      font-weight: 400;
      padding: 10px;
      margin-top: 10px;
      text-transform: uppercase;
      height: 40px;
   }
   .navbar ul.nav.navbar-nav li a:hover {
      background-color: #368772;
      color: #EEE;
   }
   .navbar ul.nav.navbar-nav li.active a {
      background-color: #368772;
      color: #EEE;
   }
   .top-nav-collapse .arwc_logo img {
      width: 250px;
      height: auto;
      margin-left: 50px;
   }
}

/*===================================
	Main slider
===================================*/
.swiper-container {
   width: 100%;
   height: 700px;
   text-align: center;
}
.swiper-slide {
   background-position: center;
   background-size: cover;
}
.swiper-pagination-bullet {
   width: 20px;
   height: 20px;
}
.swiper-pagination {
   bottom: 5px!important;
}
.swiper-button-disabled {
   opacity: 0!important;
}
.slide-caption {
   color: #FFF;
   position: absolute;
   text-align: left;
   width: 100%;
   z-index: 9;
   background-color: rgba(0, 0, 0, 0.6);
   padding: 0px 45px 40px 45px;
   bottom: 0;
}
.slide-caption p {
   text-align: left;
   margin: 5px 0px 10px 0px;
   font-size: 16px;
}
.slide-caption h2 {
   margin-bottom: 50px;
   font-size: 45px;
}
.slide-caption .caption-content {
   vertical-align: middle;
}
@media screen and (min-width: 768px) {
   .swiper-container {
      height: 100vh;
   }
   .slide-caption {
      margin-top: 110px;
   }
}

/*===================================
	Rescue section
===================================*/
#rescue h3 {
   border-bottom: 1px solid #405149;
   font-weight: 600;
   margin-bottom: 10px;
   padding-bottom: 10px;
   text-transform: uppercase;
   font-size: 16px;
   margin-top: 0;
   color: #405149;
   text-align: left;
}
#rescue img {
   margin: 15px 0;
}
#rescue .row {
   margin-bottom: 20px;
}
.list-nav {
   padding: 0;
   margin-top: 10px;
}
.list-nav li {
   list-style: none;
   margin: 0;
   padding: 0;
   font-size: 16px;
   padding: 5px 0px 0px 25px;
   margin-bottom: 10px;
   position: relative;
}
.list-nav li i {
   position: absolute;
   left: 0;
   top: 4px;
   font-size: 28px;
   color: #405149;
}

/*===================================
	Specials section
===================================*/
#specials {
   background-color: #52585B;
   color: #FFF;
   position: relative;
   padding: 0;
}
#specials .overlay {
   padding: 40px 0;
   overflow: hidden;
}
#specials .container {
   padding-bottom: 40px;
}
#specials a {
   font-weight: bold;
   color: #FFF;
}
#specials a:hover, #specials a:focus {
   text-decoration: none;
   outline: none;
   color: #C7D6C7;
}
#specials h2 {
   text-align: center;
   margin-bottom: 40px;
}
#specials h3 {
   border-bottom: 1px solid #FFF;
   font-weight: 600;
   margin-bottom: 10px;
   padding-bottom: 10px;
   text-transform: uppercase;
   font-size: 16px;
   margin-top: 0;
   color: #FFF;
   text-align: left;
}
#specials p {
   text-align: left;
   margin: 5px 0px 10px 0px;
}
#specials .swiper-c2ccr {
   width: 100%;
   height: 250px;
   text-align: center;
}
/*===================================
	Facilities section
===================================*/
#facilities {
   background-image: url(../img/parallax/facilities.jpg);
   color: #FFF;
   position: relative;
   padding: 0;
}
#facilities .overlay {
   padding: 40px 0;
}
#facilities h2:after {
   background: #FFF;
}
#facilities h3 {
   border-bottom: 1px solid #DDD;
   font-weight: 600;
   margin-bottom: 10px;
   padding-bottom: 10px;
   text-transform: uppercase;
   font-size: 16px;
   margin-top: 0;
   color: #DDD;
}
#facilities p {
   color: #FFF;
}
#facilities img {
   margin-bottom: -9px;
}
.facilities-icon {
   border: 3px solid transparent;
   display: inline-block;
   line-height: 40px;
   -webkit-transition: all 0.3s ease 0s;
   -moz-transition: all 0.3s ease 0s;
   -ms-transition: all 0.3s ease 0s;
   -o-transition: all 0.3s ease 0s;
   transition: all 0.3s ease 0s;
}
.facilities-item {
   margin-bottom: 60px;
   padding: 0 14px;
}
.facilities-icon i {
   font-size: 60px;
   color: #83AD9E;
}
.facilities-item h3 {
   font-size: 13px;
   font-weight: 600;
   margin-top: 10px;
   margin-bottom: 20px;
   color: #83AD9E;
   text-transform: uppercase;
}
.facilities-item p {
   color: #eee;
   font-weight: 200;
}

/*===================================
	Gallery
===================================*/
.gallery {
   margin: 0;
   padding: 0;
   list-style: none;
   text-align: center;
   border: 0;
}
.filter-button {
   display: inline-block;
   padding: 10px 18px;
   margin-bottom: 10px;
   background: #EEE;
   border: none;
   border-radius: 0px;
   background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
   color: #222;
   font-family: sans-serif;
   font-size: 16px;
   text-shadow: 0 1px white;
   cursor: pointer;
}
.filter-button:hover {
   background-color: #382822;
   text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
   color: #FFF;
}
.filter-button:active,
.filter-button.is-checked {
   background-color: #382822;
}
.filter-button.is-checked {
   color: white;
   text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}
.filter-button:active {
   box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}
.button-group:after {
   content: '';
   display: block;
   clear: both;
}
.button-group .filter-button {
   float: left;
   border-radius: 0;
   margin-left: 0;
   margin-right: 1px;
}
.gallery-item {
   cursor: pointer;
   overflow: hidden;
   position: relative;
   padding: 0;
}
.gallery-item img {
   -webkit-transition: all 0.4s ease 0s;
   -moz-transition: all 0.4s ease 0s;
   -o-transition: all 0.4s ease 0s;
   transition: all 0.4s ease 0s;
}
.gallery-item:hover img {
   -webkit-transform: translateY(-105px);
   -ms-transform: translateY(-105px);
   -o-transform: translateY(-105px);
   transform: translateY(-105px);
}

/* Image captions */
figcaption.mask {
   background-color: #f1f1f1;
   bottom: 0;
   color: #333;
   padding: 30px 15px;
   position: absolute;
   width: 100%;
   text-align: left;
   -webkit-transform: translateY(100%);
   -ms-transform: translateY(100%);
   -o-transform: translateY(100%);
   transform: translateY(100%);
   -webkit-transition: all 0.4s ease 0s;
   -moz-transition: all 0.4s ease 0s;
   -o-transition: all 0.4s ease 0s;
   transition: all 0.4s ease 0s;
}
.gallery-item:hover figcaption.mask {
   -webkit-transform: translateY(0px);
   -ms-transform: translateY(0px);
   -o-transform: translateY(0px);
   transform: translateY(0px);
}
figcaption.mask h3 {
   margin-top: 0;
   color: #333;
   font-size: 18px;
   margin-bottom: 15px;
   opacity: 0;
   -webkit-transform: translateY(30px);
   -ms-transform: translateY(30px);
   -o-transform: translateY(30px);
   transform: translateY(30px);
   -webkit-transition: all 0.4s ease 0.1s;
   -moz-transition: all 0.4s ease 0.1s;
   -o-transition: all 0.4s ease 0.1s;
   transition: all 0.4s ease 0.1s;
}
figcaption.mask p {
   line-height: 1.3;
   -webkit-transform: translateY(30px);
   -ms-transform: translateY(30px);
   -o-transform: translateY(30px);
   transform: translateY(30px);
   opacity: 0;
   -webkit-transition: all 0.4s ease 0.3s;
   -moz-transition: all 0.4s ease 0.3s;
   -o-transition: all 0.4s ease 0.3s;
   transition: all 0.4s ease 0.3s;
}
.gallery-item:hover figcaption.mask h3,
.gallery-item:hover figcaption.mask p {
   opacity: 1;
   -webkit-transform: translateY(0px);
   -ms-transform: translateY(0px);
   -o-transform: translateY(0px);
   transform: translateY(0px);
}

/* Gallery Fancybox */
.fancybox-item.fancybox-close {
   background: url("../img/icons/close.png") no-repeat scroll 0 0 transparent;
   height: 50px;
   right: 0;
   top: 0;
   width: 50px;
}
.fancybox-item.fancybox-close:hover {
   background: url("../img/icons/close_hover.png") no-repeat scroll 0 0 transparent;
}
.fancybox-next span {
   background: url("../img/icons/right.png") no-repeat scroll center center #382822;
   height: 50px;
   width: 50px;
   right: 0;
}
.fancybox-prev span {
   background: url("../img/icons/left.png") no-repeat scroll center center #382822;
   height: 50px;
   width: 50px;
   left: 0;
}
.fancybox-skin {
   border-radius: 0;
}
.fancybox-title.fancybox-title-inside-wrap {
   padding: 15px;
}
.fancybox-title h3 {
   margin: 0 0 15px;
   color: #DDD;
   font-size: 20px;
   text-align: center;
}
.fancybox-title p {
   color: #FFF;
   font-size: 14px;
   line-height: 15px;
}
.fancybox-title-inside-wrap {
   padding-top: 0;
}
.fancybox-title-outside-wrap {
    margin: 10px;
}
/*===================================
	Price section
===================================*/
#price {
   background-image: url(../img/parallax/prices.jpg);
   color: #FFF;
   position: relative;
   padding: 0;
}
#price .overlay {
   padding: 40px 0;
}
#price h2:after {
   background: #FFF;
}
#price p {
   color: #FFF;
}
.price-table {
   border: 1px solid #368772;
   margin-bottom: 50px;
}
.price-table.featured {
   border: 1px solid #368772;
   -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.8);
   -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.8);
   box-shadow: 0 4px 5px rgba(0, 0, 0, 0.8);
}
.price-table > span {
   color: #444;
   display: block;
   font-size: 20px;
   padding: 15px 0;
   text-transform: uppercase;
   font-weight: bold;
   letter-spacing: 1px;
   height: 100px;
   background-color: #83AD9E;
   vertical-align: bottom;
}
.price-table .value {
   color: #222;
   background-color: #FFF;
   padding: 20px 0;
   -webkit-transition: all 0.7s ease 0s;
   -moz-transition: all 0.7s ease 0s;
   -ms-transition: all 0.7s ease 0s;
   -o-transition: all 0.7s ease 0s;
   transition: all 0.7s ease 0s;
}
.price-table.featured > span {
   background-color: #368772;
   color: #FFF;
}
.price-table .value span {
   display: inline-block;
}
.price-table .value span:first-child {
   line-height: 32px;
}
.price-table .value span:nth-child(2) {
   font-size: 40px;
   line-height: 40px;
   margin-bottom: 10px;
}
.price-table .value span:last-child {
   font-size: 30px;
}
/*===================================
	Coming soon page
===================================

#coming-soon {
   background-image: url(../img/coming_soon_bg.jpg);
   padding-top: 50px;
}
#coming-soon .block {
   padding: 20px 0px 75px 0px;
}
#coming-soon .block img {
   width: 100%;
   height: auto;
}
#coming-soon .btn-to-home {
   text-align: center;
   margin-bottom: 20px;
}
===================================
	Basic Style
===================================*/
#contact-form .btn, .contact-details .btn {
   color: #382822;
   background: transparent;
   width: 100%;
   font-weight: bold;
   border: 2px solid #382822;
}
#contact-form .btn:hover, .contact-details .btn:hover {
   color: #FFF;
   background-color: #382822;
}
.contact-form {
   margin-bottom: 50px;
}
.help-block{
   font-size: 14px;
}
.input-field {
   margin-bottom: 10px;
}
.form-control {
   border: 1px solid #333;
   border-radius: 0;
   box-shadow: none;
   color: #333;
   font-size: 14px;
   height: 40px;
   background-color: #EEE;
}
.form-control:focus {
   box-shadow: none;
   border-color: #368772;
}
textarea.form-control {
   width: 100%;
   min-height: 200px;
   resize: vertical;
   background-color: #EEE;
}
.input-field label.error {
   color: red;
   display: block;
   font-size: 13px;
   font-weight: 400;
}
.contact-details {
   margin-bottom: 20px;
   line-height: 1;
}
#contact-form h3, .contact-details h3 {
   border-bottom: 1px solid #405149;
   font-weight: 600;
   margin-bottom: 10px;
   padding-bottom: 10px;
   text-transform: uppercase;
   font-size: 16px;
   margin-top: 0;
   color: #405149;
   text-align: left;
}
.contact-details h4 {
   font-size: 14px;
   margin: 15px 0px 10px 0px;
   padding-bottom: 5px;
   text-align: left;
   color: #405149;
   border-bottom: 1px solid #405149;
}

.contact-details p {
   line-height: 20px;
   font-size: 16px;
   color: #444;
   display: inline;
}
.contact-details i {
   margin-right: 15px;
   font-size: 32px;
   color: #405149;
}
.contact-details span {
   display: list-item;
   height: 50px;
   list-style-type: none;
}
#msgSubmit {
   margin: 15px 0px 25px 0px;
   padding: 10px 0;
}
.text-success{
   background-color: #C4F8C3;
}
.text-danger{
   background-color: #F8C3C3;
}

/*===================================
	Google maps
===================================*/
#google-map-canvas {
   width: 100%;
}

/*===================================
	404 page
===================================*/
#section-404{
   background-image: url(../img/landscape.jpg);
   padding-top: 50px;
}
#section-404 .block {
   padding: 20px 0px 35px 0px;
   text-align: center;
}
#section-404 .block img {
   width: 450px;
   height: auto;
}
#section-404 .btn-to-home {
   text-align: center;
   margin-bottom: 20px;
}

/*===================================
	Footer
===================================*/
#footer-top {
   background-color: #FFF;
}
#footer {
   background-color: #52585B;
   padding: 0px 0px 25px 0px;
   color: #FFF;
}
#footer .row {
   margin-top: -20px;
}
.footer-social span {
   display: inline-block;
   margin: -20px 3px;
}

/* bottom footer */
#footer p {
   color: #EEE;
}
#footer form {
   margin-top: 20px;
}
#footer ul {
   padding-left: 0;
}
#footer ul li {
   list-style: none;
   margin-bottom: 5px;
}
#footer ul li a {
   color: #EEE;
   display: inline-block;
   font-size: 14px;
   margin: 2px 14px;
}
#footer ul li a:hover {
   color: #83AD9E;
}
#footer h4 {
   color: #FFF;
   text-transform: uppercase;
   font-weight: 500;
   margin-top: 30px;
   margin-bottom: 30px;
   letter-spacing: 2px;
   font-size: 20px;
}
#footer h4:after {
   content: '';
   display: block;
   background: white;
   height: 2px;
   max-width: 300px;
   width: 100%;
   margin: 5px 0;
}
#footer img {
   margin-top: 40px;
   margin-bottom: 30px;
}

#footer .arwc_logo {
   position: relative;
   left: 0px;
   margin-bottom: 50px;
   margin-top: -20px;
}

#footer-bottom {
   background: transparent;
   padding: 20px 0;
}
#footer-bottom p {
   font-size: 13px;
   color: #888;
}

/*===================================
	Responsive styles
===================================*/
 
/*-- Mobile (Portrait) Design for a width of 479px --*/
@media only screen and (max-width: 479px) {
   body {
      font-size: 14px;
   }
   .parallax {
      background-position: center top !important;
   }
   .section-title h2 {
      font-size: 25px;
   }
   .btn {
      padding: 8px 30px;
   }
   .alert h2 {
      font-size: 18px;
      margin-bottom: 25px;
   }
   .alert p {
      font-size: 11px;
   }
   .alert .alert-img-1 {
      display: none;
   }

   /* logo */
   .arwc_logo {
      width: 120px;
      margin-top: 50px;
   }

   /* navbar */
   .navbar-inverse .navbar-toggle {
      border-color: #fff;
   }
   .navbar-inverse .navbar-toggle:hover,
   .navbar-inverse .navbar-toggle:focus {
      background-color: transparent;
   }

   /* slider */
   .swiper-container {
      height: 650px;
   }
   .slide-caption {
      text-align: center;
   }
   .caption-content h2 {
      font-size: 25px;
      color: white;
      margin-bottom: 20px;
   }
   .caption-content > span {
      font-size: 16px;
      margin-bottom: 20px;
   }
   .caption-content p {
      font-size: 12px;
      margin-bottom: 10px;
      line-height: 18px;
   }

   /* service */
   .facilities-item {
      width: 100%;
   }

   /* gallery */
   .filter-button {
      font-size: 14px;
   }
   .fancybox-title h3 {
      font-size: 18px;
   }
   .fancybox-title p {
      font-size: 12px;
   }

   /* price */
   .price-table {
      margin-bottom: 30px;
   }

   /* contact form */
   .contact-details p {
      line-height: 1;
      font-size: 13px;
      color: #444;
      display: inline;
   }
   .contact-details i {
      margin-right: 5px;
      font-size: 20px;
   }
   .help-block{
      font-size: 11px;
   }

   /* footer */
   .footer-content {
      width: 100%;
   }
   .footer-social ul li {
      margin: 0 7px;
   }
   #footer .arwc_logo {
      display:none;
   }
   #footer .col-md-4 {
      margin-top: 50px;
   }
}

/*-- Mobile (Landscape) Design for a width of 480px --*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
   .section-title h2 {
      font-size: 32px;
   }

   /* logo */
   .arwc_logo {
      margin-top: 40px;
   }
   
   .alert p {
      font-size: 12px;
   }
   
   /* slider */
   .caption-content h2 {
      font-size: 28px;
      color: white;
      margin-bottom: 30px;
   }
   .caption-content p {
      font-size: 14px;
      line-height: 20px;
   }

   /* facilities */
   .facilities-item {
      margin: 0 auto 50px;
      width: 55%;
   }

   /* gallery */
   .filter-button {
      font-size: 14px;
   }
   .fancybox-title h3 {
      font-size: 18px;
   }
   .fancybox-title p {
      font-size: 12px;
   }

   /* price */
   .price-table > span {
      font-size: 22px;
   }
   /* footer */
   .footer-content {
      width: 380px;
   }
   #footer .arwc_logo {
      left: 20px;
      margin-bottom: 30px;
      margin-top: 20px;
   }
}

/*-- Tablet (Portrait) Design for a width of 768px to desktop with a width of 1024px --*/
@media (min-width: 768px) and (max-width: 1024px) {
   .section-title h2 {
      font-size: 56px;
      letter-spacing: 2px;
   }
   /* slider  */
   .caption-content h2 {
      font-size: 42px;
      color: white;
   }

   #footer .arwc_logo {
      width: 250px;
      left: 0px;
      margin-bottom: 70px;
      margin-top: -20px;
   }
}