/*common images and ideas*/

.spacer{
  
    height: 2em;
}
.push{
    height:20%;
}

/*intro*/

#IntroTitle {

	margin:1% auto;
	margin-top: 5%;
    background:url("../images/banner.png")no-repeat;
    height:200px;
    width: 800px;
    }
     


#subtitle{
	font-family:'Noto Serif', sans-serif!important;
	font-size: 2em;
  	text-align: center;
	margin:2% auto;
  	color:#333;
  	
  }

/*Image*/

.box{
	margin:1% auto;
	text-align: center;
}

#image1{
		text-align: center;
	margin-bottom: 0;
	
}

img{
	max-width: 100%;
	height: auto;
	border: solid 3px white;
	-webkit-box-shadow: 0 10px 20px -10px black;
	-moz-box-shadow: 0 10px 20px -10px black;
	box-shadow: 0 10px 20px -10px black;
}

/*INFO BAND AND COPYRIGHT TO IMAGE*/


.infoBand{
	font-family:'Noto Serif', sans-serif!important;
	
	margin:0 auto;
	margin-top: 0%;
	height:auto;
	
	 
       
}



.infoBand p{
	font-size: 1.4em;
	color:#333;
	text-align: center;
	line-height: 1.4em;

}

.copyright {
	font-size: 1em!important;
	color:#333;
	line-height: 0.8em;
}

/*TEXT DESCRIPTION*/

.text {
	margin: 1% auto;
	text-align: center;
	max-width:70%;
	margin-bottom: 0%;
}

.text p{
	font-family:'Noto Serif', sans-serif!important;
	font-size: 1.3em;
	line-height:1.5em;
	color: #333;
}



/*back btn and next btn*/

#navButtons{
	
	text-align: center;
}

.imageLeft, .imageRight{
	height:auto;
	
}

.images{
margin-top: 1%;

}


.imageLeft{
	margin:1%;
	text-align: left;
}

.imageRight{
	margin:1%;
	text-align: right;

}         






/*media queries*/

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

	.text {
		max-width:95%;
	}

}

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

#IntroTitle {
        font-size: 5em;
        margin-top: 2%;
    }
     

   

#subtitle{
	font-size: 1em;
  }


}


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

	#IntroTitle {
        font-size: 3.2em;
        margin-top: 2%;
    }
     


#subtitle{
	font-size: 1em;
  }

.imageRight:first-child {
  margin-left: 0;
}

  
.text {
		text-align: left;
	}

.imageLeft, .imageRight{
	text-align: center;
	
}

.imageLeft{

	margin-left:0;
}


.text p{

	text-align: center;
}

}