/*  
::::::::::::::::::::::::;::::::::::::::::::::::::;
-------------------- PHOTOGRAPHY COURSE --------------------
::::::::::::::::::::::::;::::::::::::::::::::::::;

 */
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 {

	border: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;

}

a img {
	border: none;
}

.bigimg{
max-width:1000px;
margin :80px 0 80px 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

@media only screen and (max-width: 1000px){
	.bigimg{
		width:100%;	
	}
}

/* ----------- Layout ------------------------------------------- */

body {
width: 100%;
	font-family: 'Montserrat';
	margin:auto;
	background: #fff;
	
	/*background: rgba(0, 0, 0, 255) url("../images/poster.jpg") no-repeat fixed 0 0;*/
	background: url("../images/poster.jpg") no-repeat 0 50px;
	
	
background-size: 100%;
	color:#fff;
	text-align:center;
}


#container{
max-width:1000px;
	text-align:center;
	margin:auto;
	}

#footer {
background:#000;
	clear: both;
	width: 100%;
	text-align:center;
	font-size:0.7em;
	height:50px;
}
@media only screen and (max-width: 435px){
	#footer  Aimg{width:100%}
}

#masthead{
margin-top:50px;
margin-bottom:20px;
}
#branding{
	height:300px;
	margin-top:150px;
	}
@media only screen and (max-width: 800px){
	body{
		background: url("../images/poster.jpg") no-repeat 0 100px;
		background-size: 100%;
	}
	#branding img{
		width:100%;
		height:auto;
	}
	#branding{
	
	height:100px;
	}
	#header img{
		visibility:hidden;

	}

	#header .right{
		margin:auto;
		position:absolute;
	top:0;
	}
}
/* ----  HEADER  ------ */
#header{
	position:fixed;
	z-index:100;
	width:100%;
	top:0;
	background:#fff;
	text-align:right;
	height:50px;
	box-shadow: 0px 0px 5px #888888;
	list-style: outside none none;
	box-sizing: border-box;
	letter-spacing: 1px;
	display: block;
}


#header ul{
	margin-right:30px;
	float: right 
}
#header li{
display: block;
	float: left;
	padding:10px 10px;
}

#header .left{
	float:left;
	margin:10px 100px 0 50px ;
}
#header .right{

	margin:10px 50px 50px 0;
}


@media only screen and (max-width: 500px){
	#header{
		height:110px;
	}
}




a {
	color: #000;
	text-decoration: none;
}


.socialbuttons img{

	
}

img.social{
	margin:20px;
	opacity:0.5;
	text-decoration:none;
	border: 0;
	box-shadow: 0;
	display: inline;
}

img.social:hover{
	opacity:1;
}


.scrol{

	margin-bottom:20px;
	margin-top:50px;
}

/* --------REGISTER BUTTON-------*/
.regBut{
	box-shadow: inset 0 0 0 1px #27496d,0 5px 15px #193047;
	background-color: #ff9664;
	}

.regBut:hover{
	box-shadow: inset 0 0 0 1px #27496d,0 5px 15px #193047;
	}
	
.regBut:active{
	box-shadow: inset 0 0 0 1px #27496d,inset 0 5px 30px #193047;
	}
	

a.button {
 -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    
	width:200px;
  height:50px;
  display:inline-block;

  font-size:16px;
  font-weight:bold;
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  text-align:center;
  text-shadow:1px 1px 0px #07526e;
  padding-top:16px;
  margin-left:auto;
  margin-right:auto;

  position:relative;
  cursor:pointer;
  border: none;
  background: #109bce;
  background-image: linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);
  border-radius: 5px;
  box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;
}

a.button:active {
  top:3px;
  box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;
}

a.button:before {

  font-size: 50px;
  line-height: 1em;
  font-weight: normal;
  color: #fff;
  width:85px;
  height:90px;
  display:block;
  position:absolute;
  padding-top:10px;
  top:10px;
  text-shadow: 1px 1px 2px #07526e;

}
a.b_right{
margin-left:50px;
}
/*  ---------------- intro ---------- */
#intro{
	/*border-top:2px solid #000;*/
	
	font-size:1em;
	line-height: 150%;
	margin:auto;
	padding:30px;
	text-align:left;
	color:#fff;
	

}
#intro .left{
	margin-right:50px;
	float: left;
	width:44%;
	margin-top:25px;
	}
#intro .right{
	margin-top:25px;
	position: relative;
  	float: left;
	width:44%;
	margin-left: 50px;
}

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

    #intro{ 
		width:100%

	}
	#intro .right, #intro .left{
		width:90%;margin-left:5px;
	}
}



/*------INFO----------*/
#info_wrap{
color:#000;
	background-color: #fff;
	padding:50px 0 30px 0;
}
#info{
max-width: 750px;
margin: 0 auto;
	
	
	text-align: center;
}
#info .question{

	font-size: 1.2em;
}
#info p{
	text-align: left;
	margin-bottom: 20px;
}

#info p img{
	margin-left: -90px;
	margin-right: 20px;
}
#info-intro{
font-size:1.4em;
}
@media only screen and (max-width: 700px){

	#info {
		margin: 80px 30px 0 30px;
	}
#info img.flow{
	width: 100%;
	height:auto;
	}

}


/*-------------about ---------*/
#about{
	width:100%;
	font-size:1em;
	line-height: 150%;
	margin:0 auto;
	text-align:center;
	height:100%;
	background-color: #ffffff;
	color:#000;
	height: 780px;
	padding:40px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.about_img{
	width:500px;	height:300px;
}
#about b{
	font-size: 1.3em;
}
#about .col{
	margin-right:0px;
	float: left;
	width:45%;
	margin:20px;
	text-align:left;

}
#about .col img{
	float: left;
	margin-right: 20px;
}

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

    #about{ 
		width:100%;
		height: 1100px;
		text-align:center;
	}

	#about img{
		margin-bottom: 20px;
		width:100%;	height:auto;
	}
	#about .col{
	width:100%;
	}
	
}


    
/*-------------WHO ---------*/
#who{
	width:100%;
	font-size:1em;
	line-height: 150%;
	margin:0 auto;
	text-align:center;
	height:100%;
background-color: #e8e8e8;
	color:#000;
	height: 500px;
	padding:50px 100px 50px 100px;
}


#who p{
	text-align:left;
}
.me{
	float:left;
	margin-right: 50px;
}

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

    #who{ 
		width:100%;
		height: 800px;
		text-align:center;
		padding:50px 50px 50px 50px;
	}
	
.me{
	float:none;
	margin-left: 70px;
	margin-top: -50px;
}
	#who img{
		margin-bottom: 20px;
	}
	
}
/*---------  REGISTER  ---------------*/
#register{
text-align:center;

}
form {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 border: 1px solid #c0c0c0;
  padding: 20px;
background:#fff;
color:#000;
 width:500px;margin: auto;
 margin-bottom:100px;
}
form label,
form input,
form button {
  border: 0;
  margin-bottom: 3px;
  display: block;
  width: 100%;
}

input:focus{
background:#e8e8e8;
}
.with-errors li{

	font-size:0.8em;list-style: none;
	margin:10px 0 10px 0;
}
	.has-error{
	 border-bottom: 1px solid #ff0000;
}
form input {
outline: none;width: 100%;display: block;
border: none;
	margin: 0;
  height: 35px;
 background:#fff;
  color: #000;
  padding:0 0 0 0px;
  font-size:1em;
    border-bottom: 1px solid #ddd;

  /*
   background: transparent;
  line-height: 25px;
  background: #fff;
  color: #000;
  padding: 0 6px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;*/
}

form button {
  height: 50px;
  
  background: #109bce;
  color: #fff;
  margin-top: 30px;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  cursor: pointer;font-size:1.4em;
}


form button:active {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
form .error {
  color: #ff0000;
  font-size:0.4em;
}

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

    form{ 
		width:100%;
		
	}

	
	
}
/*---------    ---------------*/

@media only screen and (max-width: 700px){
	#back2top img{
		width:100%;
	}
	.scrol{
		width:100%;

	}
}
#back2top{
width:100%;
margin:0 0 50px 0;
}