/*************************************************************
**************AFRIKAANS TUTOR WEBSITE STYLESHEET**************
*************************************************************/
/*Author = Scott Hallauer*/

html,body{
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 background: url('/media/images/bubbles.png');
}

div#container{
 min-height: 100%;
 position: relative;
}

/****************************
           HEADER
****************************/
header{
 width: 100%;
 height: 120px;
 position: relative;
 overflow: hidden;
 box-shadow: 0 0 15px 0 rgba(0,0,0,0.75);
 -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.75);
 -moz-box-shadow: 0 0 15px 0 rgba(0,0,0,0.75);
}
	header div.title{
	 height: 60px;
	 width: 100%;
	 z-index: 2;
	 position: absolute;
	 top: 0;
	 background-color: #7eafb0;
	 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.3))); /* Chrome,Safari4+ */
	 background-image: -webkit-linear-gradient(top, transparent, rgba(0,0,0,0.3)); /* Chrome10+,Safari5.1+ */
	 background-image:    -moz-linear-gradient(top, transparent, rgba(0,0,0,0.3)); /* FF3.6+ */
	 background-image:     -ms-linear-gradient(top, transparent, rgba(0,0,0,0.3)); /* IE10+ */
	 background-image:      -o-linear-gradient(top, transparent, rgba(0,0,0,0.3)); /* Opera 11.10+ */
	 background-image:         linear-gradient(to bottom, transparent, rgba(0,0,0,0.3)); /* W3C */
	 overflow: hidden;
	 box-shadow: 0 3px 5px 0 rgba(0,0,0,0.75);
	 -webkit-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.75);
	 -moz-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.75);
	}
		header div.title > h1{
		 text-align: center;
		 margin: 0;
		 color: #FFF;
		 text-shadow: 1px 1px 0 #444, 2px 2px 0 #000;
		 line-height: 60px;
		}
			header div.title > h1 span.page{
			 display: none;
			}
	header div.nav{
	 height: 60px;
	 width: 100%;
	 position: absolute;
	 top: 60px;
	 background: #97c2c3;
	 z-index: 1;
	 text-align: center;
	}
			header div.nav div.menu{
			 display: none;
			 line-height: 60px;
			 font-size: 20px;
			 cursor: pointer;
			}
			header div.nav div.menu:after{
			 content: "";
			 width: 60px;
			 height: 60px;
			 position: absolute;
			 right: 0;
			 background: url('/media/images/menu_small.png');
			 background-size: 100%;
			}
			header div.nav  nav a{
			 display: inline-block;
			 height: 60px;
			 min-width: 100px;
			 padding: 0 15px;
			 border-left: 1px solid #597373;
			 line-height: 60px;
			 font-size: 20px;
			 text-align: center;
			 text-decoration: none;
			 color: #000;
			}
			header div.nav nav a:last-child{
			 border-right: 1px solid #597373;
			}
			header div.nav nav a:hover{
			 background: #7eafb0;
			 text-shadow: 0 1px 0 #FFF;
			}
			header div.nav nav a:active, header div.nav  nav a.current{
			 background: #759999;
			 text-shadow: 1px 1px 0 #000;
			 color: #FFF;
			}
			header div.nav  nav a.current{
			 background: #5E7C7C;
			}
	
/****************************
            MAIN
****************************/
section.main{
 width: 100%;
 padding: 35px 0 95px;
 text-align: center;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
}
	section.main article{
	 display: inline-block;
	 text-align: left;
	 position: relative;
	 width: 80%;
	 padding: 15px;
	 background: #f7ffff;
	 border-radius: 15px;
	 -webkit-border-radius: 15px;
	 -moz-border-radius: 15px;
	 box-shadow: 0 0 15px 0 rgba(0,0,0,0.75);
	 -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.75);
	 -moz-box-shadow: 0 0 15px 0 rgba(0,0,0,0.75);
	 box-sizing: border-box;
	 -webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	}
		section.main article h2{
		 margin: 5px 0 15px;
		 padding-bottom: 10px;
		 border-bottom: 1px solid #000;
		}
		section.main article h3{
		 font-size: 22px;
		}
		section.main article p:not(.reference), section.main article li, section.main article blockquote{
		 line-height: 22px;
		 font-size: 17px;
		}
		section.main article address{
		 text-align: center;
		 font-size: 18px;
		 line-height: 30px;
		}
		section.main article li{
		 margin-bottom: 10px;
		}
		section.main article blockquote{
		 font-style: italic;
		 color: #444;
		 margin: 15px 50px;
		}
		section.main article blockquote.testimonial{
		 background-color: #7eafb0;
		 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.3))); /* Chrome,Safari4+ */
		 background-image: -webkit-linear-gradient(top, transparent, rgba(0,0,0,0.3)); /* Chrome10+,Safari5.1+ */
		 background-image:    -moz-linear-gradient(top, transparent, rgba(0,0,0,0.3)); /* FF3.6+ */
		 background-image:     -ms-linear-gradient(top, transparent, rgba(0,0,0,0.3)); /* IE10+ */
		 background-image:      -o-linear-gradient(top, transparent, rgba(0,0,0,0.3)); /* Opera 11.10+ */
		 background-image:         linear-gradient(to bottom, transparent, rgba(0,0,0,0.3)); /* W3C */
		 padding: 20px;
		 box-sizing: border-box;
		 -webkit-box-sizing: border-box;
		 -moz-box-sizing: border-box;
		 color: #FFF;
		 font-size: 20px;
		 text-shadow: 1px 1px 0 #444;
		 border-radius: 30px / 50px;
		 -webkit-border-radius: 30px / 50px;
		 -moz-border-radius: 30px / 50px;
		}
		section.main article cite.testimonial{
		 font-size: 18px;
		 padding: 0 80px;
		 display: block;
		 margin-bottom: 30px;
		}
		section.main article cite.testimonial:last-of-type{
		 margin-bottom: 10px;
		}
		section.main article cite.testimonial:nth-of-type(2n){
		 text-align: right;
		}
		section.main article a{
		 color: #597373;
		 text-decoration: none;
		}
		section.main article a:hover{
		 border-bottom: 1px solid #597373;
		}
		section.main article img{
		 max-width: 100%;
		 margin: 15px;
		}

/****************************
           FOOTER
****************************/
footer{
 position: absolute;
 bottom: 0;
 width: 100%;
 height: 60px;
 background: #97c2c3;
 box-shadow: 0 0 15px 0 rgba(0,0,0,0.75);
 -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.75);
 -moz-box-shadow: 0 0 15px 0 rgba(0,0,0,0.75);
 overflow: hidden;
}
	footer p{
	 text-align: center;
	 line-height: 60px;
	 padding: 0;
	 margin: 0;
	}
		footer p span.referrer a{
		 color: #000;
		 text-decoration: none;
		 font-weight: bold;
		}
		footer p span.referrer a:hover{
		 border-bottom: 1px solid #000;
		}
	footer div.logo{
	 position: absolute;
	 background-image: url('/media/images/logo_small.png');
	 background-size: 100%;
	 width: 60px;
	 height: 60px;
	 bottom: 0;
	 right: 0;
	 cursor: pointer;
	 box-shadow: 0 0 10px 0 #000;
	 -webkit-box-shadow: 0 0 10px 0 #000;
	 -moz-box-shadow: 0 0 10px 0 #000;
	}
	
img.portrait{
 width: 300px;
}
img.landscape{
 width: 400px;
}
img.portrait, img.landscape{
 float: right;
 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 box-shadow: 2px 2px 10px #000;
 -webkit-box-shadow: 2px 2px 10px #000;
 -moz-box-shadow: 2px 2px 10px #000;
}
abbr{
 border-bottom: 1px dotted #000;
 cursor: help;
}
.bold{
 font-weight: bold;
}
.italic{
 font-style: italic;
}
.center{
 text-align: center;
}
.clear{
 clear: both;
}
.reference{
 font-style: italic;
 color: #444; 
 font-size: 15px;
}

/*CUSTOM INPUT*/
input.custom_input, textarea.custom_input{
 width: 100%;
 margin: 3px 0 7px;
 padding: 5px;
 border: 1px solid rgba(0,0,0,0.5);
 outline: none;
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
}
textarea.custom_input{
 height: 300px;
}
input.custom_input:focus, textarea.custom_input:focus{
 border: 1px solid #005C7A;
 box-shadow:0 0 5px #005C7A;
 -webkit-box-shadow:0 0 5px #005C7A;
 -moz-box-shadow:0 0 5px #005C7A;
}
button.custom_input{
 appearance: none;
 -webkit-appearance: none;
 -moz-appearance: none;
 border: 1px solid transparent;
 background: transparent;
 cursor: pointer;
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 padding: 10px;
 margin: 5px;
 min-width: 100px;
 color: #FFF;
 font-weight: bold;
 text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
button.custom_input.blue{
 border: 1px solid #25729a;
 background-color: #3093c7;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#3093c7), to(#1c5a85));
 background-image: -webkit-linear-gradient(top, #3093c7, #1c5a85);
 background-image: -moz-linear-gradient(top, #3093c7, #1c5a85);
 background-image: -ms-linear-gradient(top, #3093c7, #1c5a85);
 background-image: -o-linear-gradient(top, #3093c7, #1c5a85);
 background-image: linear-gradient(to bottom, #3093c7, #1c5a85);
 filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3093c7, endColorstr=#1c5a85);
}
button.custom_input.blue:hover{
 border: 1px solid #005C7A;
 box-shadow:0 0 5px #005C7A;
 -webkit-box-shadow:0 0 5px #005C7A;
 -moz-box-shadow:0 0 5px #005C7A;
}
button.custom_input.blue:active{
 background-image: -webkit-gradient(linear, left top, left bottom, from(#26759e), top(#133d5b));
 background-image: -webkit-linear-gradient(top, #26759e, #133d5b);
 background-image: -moz-linear-gradient(top, #26759e, #133d5b);
 background-image: -ms-linear-gradient(top, #26759e, #133d5b);
 background-image: -o-linear-gradient(top, #26759e, #133d5b);
 background-image: linear-gradient(to bottom, #26759e, #133d5b);
 filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#26759e, endColorstr=#133d5b);
}
button.custom_input.grey{
 border: 1px solid #b7b7b7;
 background-color: #d3d3d3;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#d3d3d3), to(#707070));
 background-image: -webkit-linear-gradient(top, #d3d3d3, #707070);
 background-image: -moz-linear-gradient(top, #d3d3d3, #707070);
 background-image: -ms-linear-gradient(top, #d3d3d3, #707070);
 background-image: -o-linear-gradient(top, #d3d3d3, #707070);
 background-image: linear-gradient(to bottom, #d3d3d3, #707070);
 filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#d3d3d3, endColorstr=#707070);
}
button.custom_input.grey:hover{
 border:1px solid #a0a0a0;
 box-shadow:0 0 5px #a0a0a0;
 -webkit-box-shadow:0 0 5px #a0a0a0;
 -moz-box-shadow:0 0 5px #a0a0a0;
}
button.custom_input.grey:active{
 background-color: #bababa;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#bababa), top(#575757));
 background-image: -webkit-linear-gradient(top, #bababa, #575757);
 background-image: -moz-linear-gradient(top, #bababa, #575757);
 background-image: -ms-linear-gradient(top, #bababa, #575757);
 background-image: -o-linear-gradient(top, #bababa, #575757);
 background-image: linear-gradient(to bottom, #bababa, #575757);
 filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#bababa, endColorstr=#575757);
}
label.required:after{
 content: " *";
 color: red;
}
div.button_wrapper{
 text-align: center;
}
div.contact-form_wrapper{
 text-align: center;
}
form.contact-form{
 display: inline-block;
 position: relative;
 text-align: left;
 padding: 20px;
 width: 440px;
 max-width: 100%;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 box-shadow: 0 0 10px 0 rgba(0,0,0,0.7);
 -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.7);
 -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.7);
 background: #D6E7FF;
}

/*SOCIAL NETWORK ICONS*/
div.social{
 display: inline-block;
}
div.social-icon{
 width: 48px;
 height: 48px;
 background-size: 100%;
 display: inline-block;
 margin-right: 10px;
}
div.facebook{background-image: url('/media/icons/facebook.png');}
div.linkedin{background-image: url('/media/icons/linkedin.png');}
div.twitter{background-image: url('/media/icons/twitter.png');}
div.google_plus{background-image: url('/media/icons/google_plus.png'); margin-right: 0;}

/*****************************************
            iPad Portrait
*****************************************/
@media only screen and (max-width: 1024px) and (orientation: portrait) {
 section.main article{
  width: 90%;
 }
 header div.nav  nav a{
  padding: 0 10px;
 }
}

/*****************************************
             Smartphones
*****************************************/
@media only screen and (max-width: 600px){
 header div.title > h1 span.name{
  display: none;
 }
 header div.title > h1 span.page{
  font-size: 27px;
  display: block;
 }
 header div.nav div.menu{
  display: block;
 }
 header div.nav nav{
  display: none;
  background: #BAD7D7;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.75);
 }
	header div.nav nav a{
	 width: 50%;
	 border: none;
	 border-bottom: 1px solid #597373;
	 box-sizing: border-box;
	 -webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	}
	header div.nav nav a:nth-child(2n-1){
	 border-right: 1px solid #597373;
	}
	header div.nav nav a:last-child{
	 border-right: none;
     width: 100% !important;
	}
 section.main{
  padding: 0 0 60px;
 }
	section.main article{
	 width: 100%;
	 border-radius: 0;
	 -webkit-border-radius: 0;
	 -moz-border-radius: 0;
	}
		section.main article h2{
		 text-align: center;
		}
		section.main article h2:not(.permanent){
		 display: none;
		}
		section.main article blockquote{
		 margin: 15px 20px;
		}
		section.main article cite.testimonial{
		 padding: 0 20px;
		 text-align: center;
		}
		section.main article cite.testimonial:nth-of-type(2n){
		 text-align: center;
		}
		section.main article > img{
		 width: 100%;
		 margin: 15px 0;
		}
 footer p span.surname, footer p span.rights, footer p span.referrer{
  display: none;
 }
 }
}