/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline; }


h1, h2, h3, h4, h5, h6 {
  clear: both;
  font-weight: normal; }

ol, ul {
  list-style: none; }

blockquote {
  quotes: none; }

blockquote:before, blockquote:after {
  content: '';
  content: none; }

del {
  text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0; }

a img {
  border: none; }

/* =Scss Variables
-------------------------------------------------------------- */
/* =Global
-------------------------------------------------------------- */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body {
  background-color: #fff;
  color: #505050;
  font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.8;

   }

/* Headings */
h1, h2, h3, h4, h5, h6 {
  line-height: 1;
  font-weight: 300; }

a {
  text-decoration: none;
  color: #3cb5f9; }

a:hover {
  color: #0793e2; }

/* =Template
-------------------------------------------------------------- */
#wrapper {
  width: 100%;
  margin: 0 auto; 
  }

#main 
{ 
background-color: #fff;
padding-top: 135px; 
}

.container
{
width: 80%;
margin: 0 auto;
padding: 0 30px;
}
.container .one-half.column {
    width: 460px;
}
section
{
padding: 0px 0; 
}
section h1 
{
font-weight: 700;
margin-bottom: 10px;
}
section p 
{
margin-bottom: 30px; 
}
section p:last-child 
{
margin-bottom: 0; 
}
section.color 
{
color: white;
background-color: #656668;
padding: 30px 0;
text-align:center;
line-height: 28px;
font-weight: normal;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 16px;
letter-spacing: 0.5px;
}
section.color1 
{
color:#ccc;
background-color: #313233;
padding: 20px 0;
text-align:center;
line-height: 28px;
font-weight: normal;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 16px;
letter-spacing: 0.5px;
}
/* =Info Bar
-------------------------------------------------------------- */
#info-bar {
  background-color: #000; 
  }
  #info-bar a {
    color: #777;
    font-size: 12px;
    display: inline-block;
	font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    margin: 0;
    padding: 10px; }
  #info-bar span.all-tutorials,
  #info-bar span.back-to-tutorial {
    display: block;
    width: 50%; }
  #info-bar span.all-tutorials {
    float: left;
    text-align: left; }
  #info-bar span.back-to-tutorial {
    float: right;
    text-align: right; }

/* =Header
-------------------------------------------------------------- */
header {
  width: 100%;
  height: 135px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #fff;
  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  -ms-transition: height 0.3s;
  -o-transition: height 0.3s;
  transition: height 0.3s;
    border-bottom:1px solid #ccc;
	 }
  header h1#logo img {
    display: inline-block;
    height: 113px;
    line-height: 150px;
    float: left;
    font-family: "Oswald", sans-serif;
    font-size: 60px;
    color: #000;
    font-weight: 400;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s; }
header nav 
{
display: inline-block;
float: right;
margin-top:-50px;
width:50%;
margin-right:20px;
}
header nav ul  
{
line-height: 20px;
margin-left: 20px;
color: #9fdbfc;
font-weight: 400;
font-size: 13px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
 }
header nav a:hover 
{
color: white;
}
header.smaller 
{
height: 120px;
}
header.smaller h1#logo img 
{
width: 200px;
height: 100px;
line-height: 55px;
font-size: 30px;
}
header.smaller nav a 
{
line-height: 0px; 
}
.row 
{
margin: 1em 0px;
}
.group:after {
  content: "";
  display: table;
  clear: both;
}
.container .one-quarter.column {
    width: 253px;
}
.grid .column, .grid .columns {
    background: none repeat scroll 0% 0% #CCC;
}
.column, .columns {
    float: left;
    margin: 0px 0px 20px 0;
}
.container .one-fifth.column {
    width: 190px;
}
.round
{
background-color: #656668 !important;
color: #FFF !important;
border-radius:999px;
width:100px;
height:100px;
padding:38px 30px;
vertical-align: middle;
}
.round:hover
{
background-color: #B71D22 !important;
cursor:pointer;
}
.round1
{
background-color: #656668 !important;
color: #FFF !important;
border-radius:999px;
width:100px;
height:100px;
padding:32px 32px;
vertical-align:middle;
}
.round1:hover
{
background-color: #B71D22 !important;
cursor:pointer;
}
.bpotxt
{
margin-bottom: 3px !important;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
letter-spacing: -1px;
position: relative;
}
.cat1
{
padding:10px 10px 10px 50px;
}
.cat
{
margin: 0px;
padding: 0px 0px 30px;
text-align:center;
font-size: 14px;
line-height: 36px;
}
.cat2
{
padding:10px 20px 10px 80px;
}
.cat3
{
margin: 0px;
padding: 0px 0px 30px;
text-align:center;
font-size: 14px;
line-height: 36px;
}
.cat4
{
padding:10px 20px 10px 120px;
}
.cat5
{
margin: 0px;
padding: 0px 0px 30px;
text-align:right;
font-size: 14px;
line-height: 36px;
}
.container .sixteen.columns {
    width: 1100px;
}
.wantxt
{
padding:20px 0;
}
.mortxt
{
text-align:center;
color: #656668;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.btn
{
background: none repeat scroll 0px 0px #B61D22;
position: relative;
top: -3px;
color: #FFF;
margin-bottom: 0px !important;
font-size: 12px;
box-shadow: 0px -3px rgba(0, 0, 0, 0.1) inset;
text-transform: uppercase;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
letter-spacing: 2px;
margin-left: 20px;
line-height: 24px;
display: inline-block;
border-radius: 5px;
padding: 16px 21px;
}
.btn:hover {
opacity: 0.8;
color: #FFF;
cursor:pointer;
}

.container .one-third.column {
    width: 310px;
}
.qtxt
{
color: #777;
font-size: 12px;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 10px;
text-align:left;
}
.qtxt1
{
color: #777;
font-size: 12px;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 10px;
text-align:left;
}
.key li
{
padding: 8px 0px;
list-style: outside none none;
margin-bottom: 0px;
border-bottom: 1px solid #444;
text-align:left;
width:300px;
}
.key li:first-child > a 
{
padding-top: 0px !important;
}
.key a 
{
color: #CCC;
font-size: 12px;
}
.key li a:hover
{
color:#B61D22;
}
.smallban
{
background:#000000;
width:100%;
height:85px;
border-bottom: 5px solid #B71D22;
}
.abttxt
{
font-size: 30px;
padding-top: 20px;
color: #FFF;
text-transform: uppercase;
font-weight: normal;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.abttxt1 
{
color: #444;
font-weight: normal;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
line-height: 22px;
margin-bottom: 7px;
text-align:justify;
letter-spacing: 0.5px;
}
.abttxt1 span {
    color: #B71D22;
}
.abttxt1 b, .abttxt1 span b { letter-spacing:0.2px;}
.container .eleven.columns {
    width: 620px;
	padding-right:10px;
}
.container .five.columns {
    width: 330px;
	padding-left:10px;
}
.loctxt {
    height: 100px;
    float: left;
    padding-right: 10px;
}
.addtxt
{
color: #B71D22;
line-height: 28px;
font-size: 24px;
text-transform: uppercase;
}
#formtab 
{
background: none repeat scroll 0% 0% #FFF;
padding: 20px;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
}
#formtab1 
{
float:right;
margin-right:-40px;
margin-top:20px;
}
/*enquiry*/

p.text7
{
font-weight: 400;
font-size: 13px;
color: #333;
line-height: 20px;
letter-spacing: 0.2px;
text-align: justify;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.names p
{
display: block;
padding: 20px 0 2px 0;
font-weight: 400;
font-size: 13px;
color: #333;
line-height: 20px;
letter-spacing: 0.2px;
text-align: justify;
margin-top:-15px;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.names1 p
{
display: block;
padding: 20px 0 2px 0;
font-weight: 400;
font-size: 13px;
color: #333;
line-height: 20px;
letter-spacing: 0.2px;
text-align: justify;
margin-top:-15px;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.txtbox
{
font: 14px tahoma;
width: 470px;
height:30px;
padding: 5px;
color: #666666;
background-color: #EDEDED;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-webkit-transition: 200ms;
-moz-transition: 200ms;
}
.txtbox2
{
font: 14px tahoma;
width: 470px;
height:60px;
padding: 9px;
color: #666666;
background-color: #EDEDED;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-webkit-transition: 200ms;
-moz-transition: 200ms;
}
.txtbox1
{
font: 14px tahoma;
width: 470px;
height:80px;
padding: 9px;
color: #666666;
background-color: #EDEDED;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-webkit-transition: 200ms;
-moz-transition: 200ms;
}
.txtarea
{
margin-top:0px;
margin-left:0px;
}


.names span
{
color:#E30000;
font-size:13px;
margin-left:10px;
font-weight:normal;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.txtarea1
{
margin-top:0;
margin-left:0;
}

.txtarea1 p
{
color:#E30000;
font-size:13px;
font-weight:normal;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.submit
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:70px;
height:30px;
margin-top:20px;
margin-left:0px;
text-align:center;
font-size:16px;
background:#000;
padding:5px 13px;
color:#FFFFFF;
font-weight: 400;
line-height: 15px;
letter-spacing: 0.6px;
text-align: justify;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.site li
{
list-style:url(../images/bullet1.png);
line-height:3;
}
.site li a
{
font-size:13px;
color: #505050;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.site1 li
{
list-style:url(../images/bullet1.png);
line-height:3;
margin-left:20px;
}
.site li a:hover
{
color:#B71D22;
}
.container .three.columns {
    width: 200px;
}
.container .thirteen.columns {
    width: 700px;
}
.hole { width:100%; min-width:1100px; height:200px;}.part1 {width:210px; height:200px; float:left;}
/* =Footer
-------------------------------------------------------------- */
/* =Extras
-------------------------------------------------------------- */
.clearfix:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0; }

/* =Media Queries
-------------------------------------------------------------- */
@media all and (max-width: 660px) {
  /* =Header
  -------------------------------------------------------------- */
  .hole { width:100%;  min-width:100%; height:auto;}.part1 { float:none;}
  header h1#logo img {
    display: block;
    float: none;
    margin: 0 auto;
    height: 95px;
	width:200px;
	padding-bottom:5px;
    line-height: 90px;
    text-align: center; }
  header nav {
    display: block;
    float: none;
    height: 35px;
    text-align: center;
    margin: 0 auto;
	width:100%;
	background:#000000; }
    header nav ul  {
      line-height: 0px;
      margin: 0 5px; }
  header.smaller {
    height: 120px; }
    header.smaller h1#logo img {
      height: 80px;
      line-height: 90px;
      font-size: 30px; }
    header.smaller nav {
      height: 35px; }
header.smaller nav a 
{
line-height: 25px; 
}
.container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-half.column, .container .one-third.column, .container .two-thirds.column, .container .one-quarter.column, .container .three-quarters.column, .container .one-fifth.column, .container .two-fifths.column, .container .three-fifths.column, .container .four-fifths.column {
    width: 100%;
}
.container .columns {
    margin: 0px;
}

.container .three.columns img {
margin-left:40px;
}
.mortxt
{
font-size: 18px !important;
}
.btn
{ 
display: block !important;
margin-top: 20px;
margin-left: 0px !important;
}
.key li
{
width:100%;
}
.qtxt1
{
margin-top:0;
}
.qtxt
{
margin-top:50px;
}
.abttxt1
{
padding:0 10px;
}
textarea, input[type="text"] {
    max-width: 100%;
}
.container .five.columns {
    padding-top: 20px;
}
.imgsize
{
width:100%;
margin-left:-35px;
}
.smallban
{
background:#000000;
width:100%;
height:auto;
padding-bottom:10px;
border-bottom: 5px solid #B71D22;
}
.abttxt
{
font-size: 16px;
padding-top: 10px;
color: #FFF;
line-height:30px;
text-transform: uppercase;
font-weight: normal;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.cat1
{
padding: 10px 50px 30px;
}
.cat
{
margin: 0px;
padding: 0px 0px 36px;
text-align: center;
font-size: 14px;
line-height: 36px;
}


}
@media all and (max-width: 600px) {
  .container {
    width: 100%; }

  #info-bar a {
    display: block; }
  #info-bar span.all-tutorials,
  #info-bar span.back-to-tutorial {
    width: 100%; }
  #info-bar span.all-tutorials,
  #info-bar span.back-to-tutorial {
    float: none;
    text-align: center; }
  #info-bar span.all-tutorials {
    border-bottom:none} }