/* 

Website: http://www.upstech.co.za

Author: Matthew Reynard

My CSS style sheet for upstech.co.za

This overwrites the standard bootstrap CSS files to add more customisation

*/

/* Stop font used for title*/
@font-face {
    font-family: "Stop";
    src: url(./fonts/stop.ttf) format("truetype");
}

/*p.customfont { 
    
}*/

* {
    box-sizing: border-box;
}

html{
	padding:0;
	margin: 0;
}

body {
	font-size: 1.5em;
	/*font-family: arial, sans-serif;*/
	font-family: 'Roboto', sans-serif;
	background-color:#FFF;

}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal !important;
}

h2{
	font-family: 'Roboto', sans-serif;
	/*font-family: 'Audiowide', Verdana;*/
	color: #000 !important;
}

h2 > a{
	color: #000;
}

h2 > a:hover{
	color: #1111FF;
}

footer{
	font-size: 1.0em;
	position: absolute;
	/*max-height: 30px;*/
	width: 100%;
	/*min-height: calc(100% - 50px);*/
	background-color: #000;
	color: #EEE;
	margin: 0px;
	padding: 40px 0px;
	text-align: center;
}

#Logo{
	/*max-width: 240px;
	width: 100%;
	height: auto;*/
	max-height: 180px;
	width: auto;
	height: 100%;
	/*width: 100px;*/
	vertical-align: middle;
	display: block;
	margin-top: auto;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
	
}

#websiteTitle{
	font-size: 6.2vw;
	/*font-size: 7.5em;*/
	vertical-align: middle;
	/*font-family: 'Audiowide';*/
	font-family: "Stop", Verdana, Tahoma;
	padding-left: 15px;
	color: #070099;
	/*text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;*/
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	text-align: center;
	/*max-width: 900px;*/
}

#websiteSlogan{
	font-size: 2.7vw;
	padding-left: 15px;
	color: #EF0013;
	text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
	/*text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;*/
	text-align: center;
}

#map {
	height: 400px;
	width: 100%;
}

#mynavbar {
	overflow: hidden;
}

.jumbotron{
	background-image: url('images/tm.jpg');
	/*filter: brightness(0.30);*/
	background-position: center top; 
	background-size: 100% auto;
	/*min-height: 100%;*/
	background-repeat: no-repeat; 
	background-attachment: fixed;
	/*background-color:#CCC;*/
	padding: 10px;
	margin-bottom: 0px;
	height: 200px;
	overflow-x: hidden;
	overflow-y: hidden;
	/*filter: blur(10px);*/
}



/* Navigation bar */
#navbar{
	border-radius: 0px;
	/*background-color:#346327;*/
	/*padding: 0px;*/
	/*margin: 0px;*/
	background-color: #FFF;
	filter: drop-shadow(0px 5px 8px #000);
	z-index: 1;
}

.navbar-brand{
	padding: 0px 6px 0px 6px;
	margin: 0;
}

.nav.navbar-nav li {
    /*width: calc( 100% +10px);*/
    /*width: auto;*/
}
.nav.navbar-nav li a {
    color: #000;
    font-weight: bold;
    /*z-index: 1;*/
}
.nav.navbar-nav li a:hover {
    color: #0000EE;
    /*background-color: #000;*/
}
.nav.navbar-nav li.active a{
    color: #EE0000;
    background-color: #EEE;
}
.nav.navbar-nav li.active a:hover{
    color: #0000EE;
    /*background-color: #000;*/
}
.nav.navbar-nav li a:focus {
    color: #0000EE;
    /*background-color: #000;*/
}
.nav.navbar-nav.dropdown.dropdown-menu{
	/*z-index: 10;*/
}

/*
.sticky {
	position: fixed;
	top: 0;
	width: 100%;
}
*/

.sticky + .container {
	padding-top: 70px;
}

/*Thumbnails*/
.thumbnail{
	background-color:#F1F1F1;
	border-color: #DDD;
	border-radius: 25px;
	min-height: 27em;
	z-index: -1;
}

.wrapper {
	overflow: hidden;
	overflow-x:hidden;
	overflow-y:hidden;
	padding: 20px;
	align-content: center;
	width: 90%;
	margin: 0 auto;
}

.zoom {
	border-radius: 25px;
	border-style: solid;
	border-color: #777;
	border-width: 2px;

	display: block;
	margin-left: auto;
	margin-right: auto;

	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);

	transition: transform .5s, filter .5s ease;
	-webkit-transition: -webkit-transform .3s, -webkit-filter .4s ease;
}

.zoom:hover {
	-ms-transform: scale(1.1); /* IE 9 */
	-webkit-transform: scale(1.1); /* Safari 3-8 */
	transform: scale(1.1);
	border-color: #0000FA;

	filter: grayscale(0);
	-webkit-filter: grayscale(0);
}

.bg1{
	background: url('images/ups_system.jpg');
	background-position: center; 
	background-repeat: no-repeat;
	background-size: cover;
	height: 200px;
}
.bg2{
	background: url('images/gen_open.jpg');
	background-position: center; 
	background-repeat: no-repeat;
	background-size: cover;
	height: 200px;
}
.bg3{
	background: url('images/inverter2.jpg');
	background-position: center; 
	background-repeat: no-repeat;
	background-size: cover;
	height: 200px;
}
.bg4{
	background: url('images/solar.jpg');
	background-position: center; 
	background-repeat: no-repeat;
	background-size: cover;
	height: 200px;
}
.bg5{
	background: url('images/electric.jpg');
	background-position: center; 
	background-repeat: no-repeat;
	background-size: cover;
	height: 200px;
}
.bg6{
	background: url('images/audit.jpg');
	background-position: center; 
	background-repeat: no-repeat;
	background-size: cover;
	height: 200px;
}
.bg7{
	background: url('images/power_supply.jpg');
	background-position: center; 
	background-repeat: no-repeat;
	background-size: cover;
	height: 200px;
}
.bg8{
	background: url('images/about.jpg');
	background-position: center; 
	background-repeat: no-repeat;
	background-size: cover;
	height: 200px;
}
.bg9{
	background: url('images/contact_us.jpg');
	background-position: center; 
	background-repeat: no-repeat;
	background-size: cover;
	height: 200px;
}

/* Carousel Styling */
/*.slide1{
	background-image: url('images/table-mountain-4b.png');
	height: 500px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}*/
.slide2{
	background-image: url('images/sa_flag.jpg');
	height: 500px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.slide3{
	background-image: url('images/lions-head.jpg');
	height: 500px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
/*.slide4{
	background-image: url('images/black.png');
	height: 500px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}*/
.carousel-caption h1{
	font-size: 4.5em;
	font-family: 'Noto Sans';
	padding-bottom: .4em;
}
.carousel-caption p{
	font-size: 2em;
}

/*Important text*/
.NB {
	color: #FF1010;
}

/* Footer icons */
.icon {
    position: relative;
    display: inline-block;
    padding: 5px 10px;
    filter: drop-shadow(0px 0px 10px #000000);
    transition: filter .5s ease;
}
.icon:hover{
	filter: drop-shadow(0px 0px 15px #FFF);
}


/* Taken from w3schools on forms */

input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}

input[type=submit]:hover {
    background-color: #45a049;
}

/*.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}*/

.col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
}

.col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, 
make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}

@media screen and (min-width: 1600px) {
	#websiteTitle{
		font-size: 6.0em !important; 
	}
	#websiteSlogan{
		font-size: 3.0em !important; 
	}

}

@media screen and (max-width: 767px) {
	.jumbotron{

		background-size: cover;
		/*background-attachment: fixed;*/
		/*filter: blur(10px);*/
	}
}