/*
Theme Name: Burnt Phoenix
Theme URI: http://www.burntphoenix.com
Description: HTML5 Blank WordPress Theme
Version: 1.0
Author: Josh Nicholson
Author URI: http://www.burntphoenix.com
Tags: Blank, HTML5, CSS3
License: MIT
License URI: http://opensource.org/licenses/mit-license.php
*/





/*------------------------------------*\



   BODY AND HTML



\*------------------------------------*/

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
  -moz-box-sizing: inherit;
  -webkit-box-sizing: inherit;
}






body {	font-family:'roboto', sans-serif;}


/*------------------------------------*\



   COLOURS



\*------------------------------------*/



.yellow {color:#fcaf19;}
.grey {color:#414042;}
.white {color:#FFF;}
.darkGrey { color:#333132;}
.red {color:#ff0000;}
.black {color: #000}

.yellowBG {background-color:#fcaf19;}
.greyBG {background-color:#414042;}
.redBG { background-color:#ff0000;}
.darkGreyBG { background-color:rgba(51, 49, 50, 1);}
.lightGreyBG { background-color:rgba(51, 49, 50, 0.3);}
.lightestGreyBG { background-color:rgba(51, 49, 50, 0.1);}



/*------------------------------------*\


    TEXT


\*------------------------------------*/



p {
	font-family: 'Roboto', sans-serif;
	font-size:16px;
	font-weight:300;
	line-height:1.5;
	letter-spacing: 0.5px;
	color:#333132;
	margin:20px 0;
}



h1 {
	font-family: 'Enriqueta', serif;
	font-size:50px;
	font-weight:300;
	margin:0;
	line-height:1.5;
}

mark {
	background-color:#fcaf19;
	padding:0 20px;
}


h2 {
  font-family: 'Architects Daughter', cursive;
	font-size:30px;
	font-weight:300;
	margin:0;
	letter-spacing:2px;
	padding:5px 20px;
	display:inline-block;
}




h3 {
	font-family: 'Roboto', sans-serif;
	font-size:24px;
	font-weight:700;
	line-height:1.5;
	letter-spacing: 2px;
	color:#333132;
	margin:5px 0;
}


h4 {
	font-family: 'Roboto', sans-serif;
	font-size:20px;
	font-weight:700;
	line-height:1.5;
	letter-spacing: 2px;
	color:#333132;
	margin:15px 0;
}




h5 {
	font-family: 'Roboto', sans-serif;
	font-size:18px;
	font-weight:300;
	line-height:1.5;
	letter-spacing: 2px;
	color:#333132;
	margin:5px 0;
}


li {

}


.heroCont h3, .heroCont h5 {
	padding-left:20px;
}

.caps {
	text-transform:uppercase;
}



/*------------------------------------*\



			!!LINKS!!



\*------------------------------------*/





a {

}



a:hover {

}



a:focus {

}





/*------------------------------------*\



HEADER



\*------------------------------------*/




header {height:85px;}

.logo img {width:100%; height:auto; min-width: 322px;}



/*------------------------------------*\



			!!NAV!!



\*------------------------------------*/


.nav {
	font-family: 'Enriqueta', serif;
}

.ubermenu-main {
   -webkit-transition: .7s;
   transition: .7s;
}

.ubermenu-main .ubermenu-item-level-0.ubermenu-current-menu-item > .ubermenu-target {
	border-top:#fcaf19 solid 5px !important;
    padding-top: 10px !important;

}


header button {
	margin-top:13px;
}
footer button {
  border: white solid 2px !important;
  margin-top: 13px;
}
.petbutton {
  margin-top: 50px;
  padding: 50px 0px;;
}
.petbutton button {
  width: 100px;
  margin: 10px 50px;
}

.petbutton button:before {
  width: 30px;
}

button, input[type="submit"] {
  -webkit-transform: translateX(0%) translateY(0%);
  transform: translateX(0%) translateY(0%);
  background: rgba(252, 175, 25, 1);
  color: #fff;
  width: 200px;
  height: 60px;
  border: 0;
  font-size: 18px;
  border-radius: 4px;
  font-family: 'Architects Daughter', cursive;
  -webkit-transition: .6s;
  transition: .6s;
  overflow: hidden;
}
button:focus, input[type="submit"]:focus {
  outline: 0;
}

button:before {
  content: '';
  display: block;
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
  width: 60px;
  height: 100%;
  left: 0;
  top: 0;
  opacity: .5;
  -webkit-filter: blur(30px);
          filter: blur(30px);
  -webkit-transform: translateX(-100px) skewX(-15deg);
          transform: translateX(-100px) skewX(-15deg);
}

button:after {
  content: '';
  display: block;
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  width: 30px;
  height: 100%;
  left: 30px;
  top: 0;
  opacity: 0;
  -webkit-filter: blur(5px);
          filter: blur(5px);
  -webkit-transform: translateX(-100px) skewX(-15deg);
          transform: translateX(-100px) skewX(-15deg);
}

footer button:hover {
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
}

button:hover, input[type="submit"]:hover {
  background: #414042;
  cursor: pointer;
}
button:hover:before {
  -webkit-transform: translateX(300px) skewX(-15deg);
          transform: translateX(300px) skewX(-15deg);
  opacity: 0.6;
  -webkit-transition: .7s;
  transition: .7s;
}



button:hover:after {
  -webkit-transform: translateX(300px) skewX(-15deg);
          transform: translateX(300px) skewX(-15deg);
  opacity: 1;
  -webkit-transition: .7s;
  transition: .7s;
}


/*------------------------------------*\



			!!STRUCTURE!!



\*------------------------------------*/


.heroImage {
    background-image: url(http://dogotel.com.au/wp-content/uploads/2017/03/HeroImage.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 650px;
    z-index: 0;
    position: relative;
}

.heroImage::after {
    height: 200px;
    width: 100%;
    background-color: rgba(255, 255, 255, .5);
    content: " ";
    z-index: 99;
    position: absolute;
    bottom: 0;
	left:0;
}

.heroCont {
	width:90%;
	max-width:800px;
    margin: -313px auto 0 auto !important;
    position: relative;
	height:313px;
}

.firstCol .aboutImg {
  display: none;
}

.container {
	width:100%;
	max-width:1600px;
	margin:0 auto;
}

.rates {
  margin-top: 20px;
}



.rates td {
  height: 30px;
  padding: 10px 20px;
}


.testimonials {
	background-color:rgba(51, 49, 50, 1);
	padding:1.5% 20%;
	text-align:left;
	color:white;
	font-style:italic;
	font-weight:300;
	line-height:2;
	letter-spacing:2;
	min-height:300px;
}
.testieborder {
	border-bottom:8px solid #fcaf19;
  padding-left: 20px; padding-right: 20px;
}

.testihead {margin-left:18%; padding-top:40px;}



.Five {width: 5%;}
.Fifteen {width:15%;}
.TwentyFive {width:25%;}
.Thirty {width: 30%;}
.Fourty {width:40%;}
.Fifty {width:50%;}
.Sixty {width:60%;}
.Seventy {width:70%;}
.OneHundred {width:100%;}

.third {width:33.333%;}

.twentypxPad {padding:20px;}
.importantArea {padding: 1px 0px 1px 20px;}

.margTop { margin-top:50px;}

.alignLeft {text-align:left;}
.alignRight {text-align:right;}
.alignCenter {text-align:center;}

.floatLeft {float:left;}
.floatRight {float:right;}
.clearALL {clear:both !important;}


.maxTwelve {max-width: 1200px; margin-left: auto; margin-right: auto;}


/*------------------------------------*\



			!!FOOTER!!



\*------------------------------------*/



footer {
	clear:both;
	margin-top:50px;
	margin-bottom:0;
	bottom:0;
  padding-bottom: 15px;
}

footer .container {
  margin-top: 20px;
}

footer p {margin:0px;}

#map {
	border-top:8px solid #d1d3d4 !important;
	border-bottom:8px solid #d1d3d4 !important;
}

.footerLogo {
  width: auto;
  border-left: 2px solid white;
  padding:5px 0 5px 20px;
  text-align: left;
  font-family: 'Enriqueta', serif;
	font-size:24px;
  color: white;
  margin-left: 20px;
}




/*------------------------------------*\



			!!Booking form!!



\*------------------------------------*/


input, textarea {
  background-color:rgba(51, 49, 50, 0.3);
  border:0 !important;
  color: black;
  padding: 10px;
  width: 90%;
}
input[type="checkbox"], input[type="radio"] {
    width: 25px;
    height: 20px;
    margin-top: 10px;
}

div.wpcf7-mail-sent-ok {
    border: none;
    background-color: rgba(43, 145, 20, 0.6) ;
    padding:20px;
    font-family: 'Architects Daughter', cursive !important;
    font-size:30px;
    color: white;
    margin-left: 0;
}

div.wpcf7-validation-errors {
    border: none;
    background-color: rgba(225, 0, 0, 0.6) ;
    padding:20px;
    font-family: 'Architects Daughter', cursive !important;
    font-size:30px;
    color: white;
    margin-left: 0;
}

label {font-weight: 400; margin: 0px 0px 10px 0px; }

.semiStrongLabel {font-size: 24px; text-decoration: underline; font-family: 'Enriqueta', serif;}
.italics {font-style: italic; text-decoration: none !important; font-size: 18px;}
.FormSpacer {margin-bottom: 80px;}

.Pet1, .Pet2, .Pet3, .Pet4 {width: 48%; padding: 20px;}
.Pet1 input, .Pet2 input, .Pet3 input, .Pet4 input {background-color: white;}
.Pet2, .Pet4 {margin-left: 4%;}
.Pet1 {background-color:rgba(252, 175, 25, 0.2); }
.Pet2 {background-color:rgba(255, 0, 0, 0.2); }
.Pet3 {background-color:rgba(51, 49, 50, 0.2); }
.Pet4 {background-color:rgba(43, 145, 20, 0.2); }

.contactPage h4 {margin-top: 0px !important;}
.contactPage .yellowBG {background-color:rgba(51, 49, 50, 1);}

.showMe, .smallHeader, .newsMob {display:none;}

.inTextImg { width: 49.5%; margin: 5px 0.25% 20px 0.25%;}

.aboutImg {width: 100%; height:auto;}
/*------------------------------------*\




    RESPONSIVE



\*------------------------------------*/
@media only screen and (max-width:2100px) {

}



@media only screen and (max-width:1900px) {

}



@media only screen and (max-width:1600px) {

.heroImageCont { width: 100%; height: auto;}

  .container { width:97%;}
  header {height:65px;}
  .logo img {width:100%; height:auto; min-width: 200px;}

header button { max-width: 600px;}

button, input[type="submit"] {
    width: 100%;
    height: 45px;
    font-size: 15px;
    max-width: 220px;

   }

header button { margin-top: 5px;}


 .ubermenu-main {margin-top:0px !important;}

 .ubermenu .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target{
     font-size:16px;
 }

 /* Submenu*/
 .ubermenu .ubermenu-submenu .ubermenu-item .ubermenu-target{
             font-size:16px;;
 }

 .heroImage {height: 480px;}

 h1 { font-size: 38px; margin-top: 32px; clear: both;}
h2 {font-size: 24px;}
h4 {  font-size: 16px;}
h5 {font-weight: 400;}
.margTop {margin-top: 0;}
.cycloneslider-template-standard .cycloneslider-prev, .cycloneslider-template-standard .cycloneslider-next {height:70px !important;}
.testimonials { padding: 1.5% 13%; min-height: 220px; font-size: 12px !important;}
.testihead { margin-left: 10%; padding-top: 40px;}
footer iframe {height:200px !important;}
footer button {  max-width: 220px; margin-left: 0;}


}




@media only screen and (max-width:1024px) {

  .largeHeader {display: none;}
  .smallHeader {display: block;}
  header {height: 165px;}

  button, input[type="submit"] {
      height: 65px;
      margin-top: 5% !important;
  }

footer .showMe {display:block !important;}
footer button {margin-top: 0; margin-bottom: 10px;}
.hideMe {display: none;}

.footerLogo { width: auto; border-left: 0px solid white; padding: 0px; text-align: center; font-size: 17px; margin-left: 0px; margin-top: 10px;}
footer .floatRight, footer .floatRight {float: none;}
footer .Fifty {width: 100%; text-align: center;}
footer button { max-width: 220px; margin-left: auto; margin-right: auto;}


  .firstCol .aboutImg {
    display: block !important;
    margin-top: 20px;
  }

  .firstCol { width: 66.666%;}

.ubermenu-responsive-toggle.ubermenu-responsive-toggle-main { margin-top: 10px; z-index: 999;}

.ubermenu .ubermenu-submenu-type-flyout>.ubermenu-item {
  display: inline !important;
  float: left !important;
  position: relative !important;
  min-width: 50% !important;
  clear: none !important;
}

    /* Top Level */
.ubermenu .ubermenu-item.ubermenu-item-level-0 {
  width: 100% !important;
}

    .ubermenu .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target{
        font-size:14px;
    }


    .ubermenu .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target:hover {
      background-color: #414042 !important;
      color: white !important;
    }
    /* Submenu*/
    .ubermenu .ubermenu-submenu .ubermenu-item .ubermenu-target{
                font-size:14px;;
    }
    /*responsive BG*/
    .ubermenu-responsive.ubermenu .ubermenu-nav {
    background-color: white !important;
}

.heroImage {
    height: 380px;
    margin-top: 30px;
}
h1 { font-size: 28px;
margin-top: 92px;}
h2 {font-size: 19px;}
h3 { font-size: 19px;}
h5 { font-size: 14px;}
.firstCol { width: 60%;}
.news {width: 40%;}
.heroCont {height: 230px; position:absolute;}

.contentSection h1 {margin-top: 20px;}

}



@media only screen and (max-width:768px) { .heroImage { margin-top: 15px;}}



@media only screen and (max-width:600px) {
  .cycloneslider-template-standard .cycloneslider-prev, .cycloneslider-template-standard .cycloneslider-next {height:40px !important; width: 15px !important;}
  .testimonials { padding: 0% 13%; }
  .testihead { margin-left: 5%; padding-top: 20px;}

  .ubermenu .ubermenu-submenu-type-flyout>.ubermenu-item {
    display: inline-block !important;
    float: none !important;
    position: relative !important;
    min-width: 100% !important;
    clear: both !important;
  }
  .heroCont h1 { font-size: 20px;}
 .heroImage {height: 230px; margin-top: 15px;}

 .heroCont {
     margin-top: -135px !important;
     position: relative;
     clear: both;
     height: auto;
 }

 header {
     height: 125px;
 }

 h3 {font-size: 14px;}
 h5 {line-height: 1.5;}
 mark { padding: 0px 5px;}
 button, input[type="submit"] {
     height: 45px;
     margin-top: 5% !important;
 }

 .heroImage::after { display: none;}

.firstCol { width: 100%;}
h2 {margin-top: 35px;}
.newsMob {display: block;}
.newsMob h2 {margin-top: 0;}
.news {display: none;}
.newsMob h4, .newsMob p {font-size: 12px;}

.inTextImg {margin-top: 5px; margin-bottom: 20px; width: 100%; height: auto;}

.bookingForm .Fifty, .contactPage .Fifty {width: 100%;}
.bookingForm .floatLeft, .contactPage .floatLeft {float: none;}

.Pet1, .Pet2, .Pet3, .Pet4 {
    width: 100%;
    padding: 20px;
    margin-left: 0px !important;
}
input, textarea { width: 100%;}

}


@media only screen and (max-width:480px) {

}



@media only screen and (max-width:320px) {



}