/*

Theme name: KiwiEftpos
Author: Shane Batey
Version: 1.0

*/
 body {
    margin:0;
}

 @font-face {
     font-family: "Glober Thin";
     src: url(fonts/Glober_Thin_Free-webfont.ttf) format('truetype');
 }

 @font-face {
     font-family: "Glober Bold";
     src: url(fonts/Glober_Bold_Free-webfont.ttf) format('truetype');
 }

#page {
	width:960px;
	padding-left: 0;
	padding-right: 0;
	box-shadow: 10px 0 10px -7px rgba(0,0,0,0.5),
                -10px 0 10px -7px rgba(0,0,0,0.5);
}

.pagebody {
    padding-left:10px;
    padding-right:10px;
}

.pagebody td {
    vertical-align:top;
}

/* Header */
#logobanner {
    padding-right: 0;
	margin-left:0;
	position:relative;
}

#topbannerimages {
    padding-right:0;
	padding-left:0;
	position:relative;
}

#phone {
	margin-bottom:0;
	margin-top:0;
	left: 6.77%;
	top: 5%;
	position: absolute;
	z-index: 1;
}

#phonelink {
	color: #595959;
}

#logo {
    left:1.5625%;
    top:20%;
	position:absolute;
	bottom:auto;
	content:url(images/eftpos-canterbury-logo.png);
}

#banner {
	content:url(images/header.jpg);
    width:100%;
    float:left;
    padding-right:1.5%
}

#navbarcontainer {
    padding-left: 0;
    padding-right: 0;
}

#kiwinavbar {
    padding-left: 0;
    padding-right: 0;
}

#kiwinavbar li {
    display: inline-block;
    text-align: center;
}

/* Nav Bar Start */

/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
}

/* Float the list items side by side */
ul.topnav li {
    float: left;
    width:120px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    box-shadow: inset -1px -1px 17px -3px #ABABAB;
    -webkit-box-shadow: inset -1px -1px 17px -3px #ABABAB;
    -moz-box-shadow: inset -1px -1px 17px -3px #ABABAB;
    -o-box-shadow: inset -1px -1px 17px -3px #ABABAB;
}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: black;
    text-align: center;
    text-decoration: none;
    transition: 0.3s;
    font-size: 12px;
}

/* Change background color of links on hover */
/*ul.topnav li a:hover {background-color: #111;}*/
ul.topnav li:hover {
    transition: 0.3s;
    font-weight: bolder;
    cursor: pointer;
    cursor: hand;
}

ul.topnav li:after {
    display: block;
    position: absolute;
    width: 0;
    height: 1px;
    content: "";
    background-color: black;
    transition: width 0.3s;
}

ul.topnav li.active:after {
    display: block;
    position: absolute;
    width: 120px;
    height: 1px;
    content: "";
    background-color: red;
}

ul.topnav li:hover::after {
    width: 120px;
}

/* Change background color when active link */
/*ul.topnav li.active {background-color: #111;}*/
ul.topnav li.active a {
    color:red;
}

ul.topnav li.active {
    font-weight:bolder;
}

#phonelogo.topfixed {
    position:fixed;
    background:white;
    z-index:2000;
    width:960px;
    /*top:25px;*/
    height:80px;
}

#phone.topfixed {
    display:inline-block;
    position: relative;
    left:60%; 
    z-index:2001;
    top:5px;
}

#logo.topfixed {
    display:inline-block;
    position:relative;
    z-index:2002;
    height:60px;
}


/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}



/* Nav Bar End */

#topbuttons {
	margin-left:0;
}

#topButtonsDiv {
    padding-left:0;
    padding-right:0;
}

.topbutton {
   margin-right:-4px;
}

/* Page */

.wrapper {
	position:relative;
	width:100%;
	margin-left:0;
	margin-right:0;
}

#welcomeblurbvideo {
	margin-top:15px;
}

#welcome {
	margin-top:0;
}

#videohome {
	content:url(Videos/SampleVideo_1080x720_10mb.mp4);
}

#helpsetupshophome {
	content:url(images/homepage_finance.png);
}

#cloudpcoptionshome {
	content:url(images/homepage_finance.png);
}

#loyaltyshemeshome {
	content:url(images/homepage_finance.png);
}

#servicesupporthome {
	content:url(images/homepage_finance.png);
}

#testimonialshome {
	content:url(images/homepage_finance.png);
}

/* Sidebar */
#socialmediaarea {
	padding-top:15px;
}

hr {
    border:none;
    height:1px;
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
    margin-top: 5px;
    margin-bottom: 5px;
}

/* Footer */
.footertext {
    width:100%;
	color:white;
    background-color:#595959;
	margin-left:0;
	padding-left:0;
	padding-right:0;
}

#footertext1 {
	display:block; 
	float:left; 
	margin-right:25px; 
	margin-left:10px;
}

#footertext2 {
	display:block;
	float:left;
	margin-right:25px;
}

#footertext3 {
	display:block;
	float:left;
	margin-right:25px;
}

#footertext4 {
	display:block;
	float:left;
	margin-right:25px;
}

#regions {
	display:block;
	float:left;
	margin-right:15px;
}

.nobullets {
    list-style-type:none;
    font-size:smaller;
    text-align:left;
    margin-left:0;
    padding-left:0;
}

.nobullets li.listmain a {
    color:white;
}

.nobullets a {
    color:lightgray;
}

.listmain {
    margin-top: 10px;
}

#regionsheader {
    color:white;
    margin-top:10px;
}

@media screen and (max-width:960px) {
    #page {
        box-shadow:none;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    /*position: absolute;*/
    right: 0;
    top: 0;
    width: 100%;
  }
  ul.topnav.responsive li {
    float: left;
    display: inline;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    width: 50%;
  }
  ul.topnav.responsive li a {
    /*display: block;
    /*text-align: left;*/
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    width: 70%;
  }
  ul.topnav.responsive li:not(:first-child) {display: inline;}

  ul.topnav li.active:after {
    width: 50%;
  }

  ul.topnav li:hover::after {
    width: 100%;
  }

  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media only screen and (min-width: 320px) and (max-width: 400px) {
	#page {
		width: 100%;
        margin-left:0;
        margin-right:0;
	}
	
	#logobanner {
		height:150px;
	}
	
	#topbannerimages {
		height:150px;
        overflow-y: visible;
	}
	
	#banner {
		display:none;
	}
	
	#phone {
		float:right;
		position:absolute;
		left:20%;
		top:5%;
	}
	
	#logo {
		float:left;
		position:absolute;
		left:5%;
		top:20%;
	}

    #phonelogo.topfixed {
        width:100%;
    }

    #logo.topfixed {
        padding-top:0;
    }
}

/* Custom, iPhone Retina */
@media only screen and (min-width: 401px) and (max-width: 479px) {
	#page {
		width: 100%;
	}
	
	#logobanner {
		height:115px;
	}
	
	#topbannerimages {
		height:115px;
        overflow-y: visible;
	}
	
	#banner {
		display:none;
	}
	
	#phone {
		float:right;
		position:absolute;
		left:60%;
		top:40%;
	}
	
	#logo {
		float:left;
		position:absolute;
		left:5%;
		top:5%;
        height:60px;
	}

    #phonelogo.topfixed {
        width:100%;
    }

    #logo.topfixed {
        padding-top:0;
        height:60px;
    }

    #phone.topfixed {
        right:20%;
        left:auto;
        top:20px;
        height:60px;
    }
}

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

    #footertext1, #footertext2, #footertext3, #footertext4 {
        margin-left: 10px;
        margin-right:10px;
        width:43%;
    }

    #regions {
        width:100%;
    }

    #northisland, #southisland {
        margin-left:10px;
        margin-right:10px;
        width:43%;
        display:inline-block;
        vertical-align:top;
    }

    #regionsheader {
        text-align:center;
    }

    #logo.topfixed {
        padding-top:0;
        height:60px;
    }

    #phone.topfixed {
        right:20%;
        left:auto;
        top:20px;
        height:60px;
    }
}

@media only screen and (min-width: 470px) and (max-width: 599px) {

    #footertext1, #footertext2, #footertext3, #footertext4 {
        margin-left: 20px;
        margin-right:20px;
        width:40%;
    }

    #regions {
        width:100%;
    }

    #northisland, #southisland {
        margin-left:20px;
        margin-right:20px;
        width:40%;
        display:inline-block;
        vertical-align:top;
    }

    #regionsheader {
        text-align:center;
    }

    #logo.topfixed {
        padding-top:0;
        height:60px;
    }

    #phone.topfixed {
        right:15%;
        left:auto;
        top:20px;
    }
}

@media only screen and (min-width: 600px) and (max-width: 767px) {

    #footertext1, #footertext2, #footertext3, #footertext4 {
        margin-left: 35px;
        margin-right:35px;
        width:38%;
    }

    #regions {
        width:100%;
    }

    #northisland, #southisland {
        margin-left:35px;
        margin-right:35px;
        width:38%;
        display:inline-block;
        vertical-align:top;
    }

    #regionsheader {
        text-align:center;
    }

    #logo.topfixed {
        padding-top:0;
        height:60px;
    }

    #phone.topfixed {
        right:20%;
        left:auto;
        top:30px;
        height:60px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 906px) {

    #page {
        margin-left:0;
        margin-right:0;
    }

    #footertext1, #footertext2, #footertext3, #footertext4 {
        margin-left: 35px;
        margin-right:35px;
        width:38%;
    }

    #regions {
        width:100%;
    }

    #northisland, #southisland {
        margin-left:35px;
        margin-right:35px;
        width:38%;
        display:inline-block;
        vertical-align:top;
    }

    #regionsheader {
        text-align:center;
    }

    #logo {
        padding-top:30px;
    }

    #phonelogo.topfixed {
        width:100%;
    }

    #logo.topfixed {
        padding-top:0;
        height:60px;
    }

}

/* Extra small devices, Phones */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	#page {
		width: 100%;
        margin-left:0;
        margin-right:0;
	}
	
	#logobanner {
		height:115px;
	}
	
	#topbannerimages {
		height:115px;
	}
	
	#banner {
		display:none;
	}
	
	#phone {
		float:right;
		position:absolute;
		left:60%;
		top:40%;
	}
	
	#logo {
		float:left;
		position:absolute;
		left:5%;
		top:5%;
	}

    #phonelogo.topfixed {
        width:100%;
    }

    #logo.topfixed {
        padding-top:0;
        height:60px;
    }

    #regions {
        width:100%;
    }
}

/* Small devices, Tablets */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#page {
		width: 100%;
	}

    #phone {
        padding-top: 10px;
    }

    #logo {
        padding-top:30px;
    }

    #phonelogo.topfixed {
        width:100%;
    }

    #logo.topfixed {
        padding-top:0;
        height:60px;
    }
}

@media only screen and (min-width: 960px) and (max-width: 991px) {
    #logo {
        padding-top:40px;
    }

    #phone {
        padding-top: 10px;
    }

    #logo.topfixed {
        padding-top:0;
        height:60px;
    }
}

@keyframes flipdown {
  0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: rotateX(8deg);
  }
  83% {
    transform: rotateX(6deg);
  }
  92% {
    transform: rotateX(-3deg);
  }
  100% {
    transform-origin: top center;
    transform: rotateX(0deg);
  }
}