* {
	margin: 0px;
	padding: 0px;
}
#container {
	width: 100vw;
	height: 100vh;
	background-color: blue;

}
#left{
	/*width: 20vw;
	height: 100vh;
	background-color: black;
	float: left;*/

	  width: 20%;
	height: 100%;
	background-color: black;
	/*padding-top: 10px;*/
	overflow: auto;
	margin: 0;
	position: relative;
	text-align: center;
	float: left;
	vertical-align: middle;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	/*z-index: 1;*/
}
#top{
	/* width: 80vw;
	height: 70vh;
	background-color: red;
	float: right;*/

	width: 80%;
	height: 75%;
	background-color: #fff;
	/*overflow: auto;
	overflow: hidden;*/
	position: relative;;
	text-align: center;
	float: right;

}
#bottom {
	/* width: 80vw;
	height: 20vh;
	background-color: green;
	float: right;*/

	width: 80%;
	height: 25%;
	background-color:  rgb(69,68,68);
	/*padding-bottom: 10px;*/
	/*padding-top: 10px;*/
	margin-left: 0,auto;
	/*overflow: hidden;*/
	position: relative;
	text-align: center;;
	float: right;
	/*overflow: auto;*/
	bottom: 0px;

	font-size: 12px;
	font-family: tahoma, sans-serif;
	font: black;
	font-weight: bold;
}

/*.img{
  padding: 10px;
}*/

a:hover {
	color: white;
	text-decoration: none;
}

a {
    color: black;
    text-decoration: none;
}

a.visited {
	color: black;
	text-decoration: none;
}

.hvr-grow {
	display: inline-block;
	/*vertical-align: middle;*/
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	transition-duration: 0.3s;
	transition-property: transform;
}

.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
	transform: scale(1.1);	
}
#left img {
	height: 210px;
}
.padding {
	width: 100%; 
	height: 10px; 
	display: none;
}

#mobile {
	display: none;
}
#mobTop {
	display: none;
}
#mobMiddle {
	display: none;
}
#mobBottom{
	display: none;
}




@media screen and (max-width: 1350px) { /*works to 1270px wide*/
	#bottom{
		height: 25%;
		width: 85%;
	}
	#top {
		height: 75%;
		width: 85%;
	}
	#left img {
		height: 150px;
	}
	#left {
		width: 15%;
	}
	#mobile, #mobTop, #mobMiddle, #mobBottom{
	display: none;
}
}

@media only screen and (max-width: 1024px) {
	/* styles for browsers larger than 1024px; */
	#bottom{
		height: 20%;
		width: 80%;
	}
	#bottom img {
		height: 45%;
	}
	#bottom .padding {
		display: block;
	}
	#top {
		height: 80%;
		width: 80%;
	}
	#left img {
		height: 150px;
	}
	#left {
		width: 20%;
		height: 100%;
	}
	#mobile, #mobTop, #mobMiddle, #mobBottom{
	display: none;
}
}

@media only screen and (min-width: 700px) and (max-width: 800px) {
	 #bottom{
		height: 20%;
		width: 80%;
	}
	#bottom img {
		height: 45%;
	}
	#bottom .padding {
		display: block;
	}
	#top {
		height: 80%;
		width: 80%;
	}
	#left img {
		height: 100px;
	}
	#left {
		width: 20%;
		height: 100%;
	}
	#mobile, #mobTop, #mobMiddle, #mobBottom{
	display: none;
}
}

@media only screen and (min-width: 800px) and (max-width: 900px) {
	#bottom{
		height: 20%;
		width: 80%;
	}
	#bottom img {
		height: 50%;
	}
	#bottom .padding {
		display: block;
	}
	#top {
		height: 80%;
		width: 80%;
	}
	#left img {
		height: 100px;
	}
	#left {
		width: 20%;
		height: 100%;
	}
	#mobile, #mobTop, #mobMiddle, #mobBottom{
	display: none;
}
}

   /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
@media only screen and (min-width:1024px) and (max-width: 1100px) {
    /* styles for browsers larger than 1024px; */
    #bottom{
		height: 20%;
		width: 80%;
	}
	#bottom img {
		height: 45%;
	}
	#bottom .padding {
		display: block;
	}
	#top {
		height: 80%;
		width: 80%;
	}
	#left img {
		height: 150px;
	}
	#left {
		width: 20%;
		height: 100%;
	}
	#mobile, #mobTop, #mobMiddle, #mobBottom{
	display: none;
}
}

@media only screen and (min-width:1100px) and (max-width: 1200px) {
/* styles for browsers larger than 1024px; */
	#bottom{
		height: 20%;
		width: 80%;
	}
	#bottom img {
		height: 50%;
	}
	#bottom .padding {
		display: block;
	}
	#top {
		height: 80%;
		width: 80%;
	}
	#left img {
		height: 170px;
	}
	#left {
		width: 20%;
		height: 100%;
	}
	#mobile, #mobTop, #mobMiddle, #mobBottom{
	display: none;
}
}
@media only screen and (min-width:1200px) and (max-width: 1300px) {
    /* styles for browsers larger than 1024px; */
	#bottom{
		height: 20%;
		width: 80%;
	}
	#bottom img {
		height: 45%;
	}
	#bottom .padding {
		display: block;
	}
	#top {
		height: 80%;
		width: 80%;
	}
	#left img {
		height: 180px;
	}
	#left {
		width: 20%;
		height: 100%;
	}
	#mobile, #mobTop, #mobMiddle, #mobBottom{
	display: none;
}
}
 @media only screen and (min-width:1300px) and (max-width: 1400px) {
        /* styles for browsers larger than 1024px; */
    #bottom{
		height: 20%;
		width: 80%;
	}
	#bottom img {
		height: 50%;
	}
	#bottom .padding {
		display: block;
	}
	#top {
		height: 80%;
		width: 80%;
	}
	#left img {
		height: 200px;
	}
	#left {
		width: 20%;
		height: 100%;
	}
	#mobile, #mobTop, #mobMiddle, #mobBottom{
	display: none;
}
}
@media only screen and (min-width:1400px) and (max-width: 1504px){
        /* styles for browsers larger than 1440px; */
	#bottom{
		height: 20%;
		width: 80%;
	}
	#bottom img {
		height: 55%;
	}
	#bottom .padding {
		display: block;
	}
	#top {
		height: 80%;
		width: 80%;
	}
	#left img {
		height: 210px;
	}
	#left {
		width: 20%;
		height: 100%;
	}
	#mobile, #mobTop, #mobMiddle, #mobBottom{
	display: none;
}
}

@media only screen and (min-width:1504px) and (max-width: 1600px){
        /* styles for browsers larger than 1440px; */
	#bottom{
  		height: 20%;
  		width: 80%;
  	}
  	#bottom img {
    	height: 60%;
  	}
	#bottom .padding {
		display: block;
	}
	#top {
		height: 80%;
		width: 80%;
	}
	#left img {
		height: 230px;
	}
	#left {
		width: 20%;
		height: 100%;
	}
	#mobile, #mobTop, #mobMiddle, #mobBottom{
	display: none;
}
}

@media only screen and (min-width:1600px) and (max-width: 1700px){
    /* styles for browsers larger than 1440px; */
	#bottom{
		height: 20%;
		width: 80%;
	}
	#bottom img {
		height: 63%;
	}
	#bottom .padding {
		display: block;
	}
	#top {
		height: 80%;
		width: 80%;
	}
	#left img {
		height: 250px;
	}
	#left {
		width: 20%;
		height: 100%;
	}
	#mobile, #mobTop, #mobMiddle, #mobBottom{
	display: none;
}
}
@media only screen and (min-width:1700px){
    /* for sumo sized (mac) screens */
	#bottom{
		height: 20%;
		width: 80%;
	}
	#bottom img {
		height: 65%;
	}
	#bottom .padding {
		display: block;
	}
	#top {
		height: 80%;
		width: 80%;
	}
	#left img {
		height: 250px;
	}
	#left {
		width: 20%;
		height: 100%;
	}
	#mobile, #mobTop, #mobMiddle, #mobBottom{
	display: none;
}
}
@media only screen and (min-width: 1px) and (max-width:480px){
/* styles for mobile browsers smaller than 480px; (iPhone) */
	#mobile {
		display: block;
		background-color: black;
		display: block;
		padding: 0;
		margin: 0;
	}
	#top, #left, #bottom, #container{
		display: none;
	} 

	#mobTop {
		display: block;
		width: 100%;
		height: 40%;
		background-color: white;
		display: block;
		position: fixed;
		z-index: 20;

	}
	#mobMiddle {
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
		padding-top: 85%;
		background-color: black;
	}
	#mobMiddle img {
		display: block;
		position: relative;
		max-width: 80%;
		left: 50px;
		bottom: 50px;
	}
	#mobBottom {
		display: block;
		background-color: gray;
		width: 100%;
		height: 510px;
	}
	#twitter, #youtube, #linkdin, #instagram, #skype {
		display: none;
	}
}
/*working on this one*/
@media only screen and (max-width: 500px) (orientation:portrait){
/* default iPad screens */
	#mobile {
		display: block;
		padding: 0;
		margin: 0;
	}
	#top, #left, #bottom, #container{
		display: none;
	} 

	#mobTop {
		display: block;
		width: 100%;
		height: 42%;
		background-color: white;
		display: block;
		position: fixed;
		padding-bottom: 50px;

	}
	#mobTop img {
		height: : 80%;
	}
	#mobMiddle {
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
		
		background-color: black;
	}
	#mobMiddle img {
		display: block;
		position: relative;
		max-width: 60%;
		
		padding-left: 50px;
	}
	#mobBottom {
		display: block;
		background-color: gray;
		width: 100%;
		height: 510px;
	}
	#twitter, #youtube, #linkdin, #instagram, #skype {
		display: none;
	}
}

@media only screen and (device-width:768px){
/* default iPad screens */
	#mobile {
		background-color: black;
		display: block;
		padding: 0;
		margin: 0;
	}
	#top, #left, #bottom, #container{
		display: none;
	} 

	#mobTop {
		display: block;
		width: 100%;
		height: 40%;
		background-color: white;
		display: block;
		position: fixed;
		z-index: 20;

	}
	#mobMiddle {
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
		padding-top: 20%;
		background-color: black;
	}
	#mobMiddle img {
		display: block;
		position: relative;
		max-width: 70%;
		padding-top: 10px;
		padding-left: 50px;
	}
	#mobBottom {
		display: block;
		background-color: gray;
		width: 100%;
		height: 510px;
	}
	#twitter, #youtube, #linkdin, #instagram, #skype {
		display: none;
	}
}

@media only screen and (min-width: 500px) (max-width:794px){
/* default iPad screens */
	#mobile {
		background-color: black;
		display: block;
		padding: 0;
		margin: 0;
	}
	#top, #left, #bottom, #container{
		display: none;
	} 

	#mobTop {
		display: block;
		width: 100%;
		height: 40%;
		background-color: white;
		display: block;
		position: fixed;
		z-index: 20;

	}
	#mobMiddle {
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
		padding-top: 20%;
		background-color: black;
	}
	#mobMiddle img {
		display: block;
		position: relative;
		max-width: 70%;
		padding-top: 10px;
		padding-left: 50px;
	}
	#mobBottom {
		display: block;
		background-color: gray;
		width: 100%;
		height: 510px;
	}
	#twitter, #youtube, #linkdin, #instagram, #skype {
		display: none;
	}
}
/*didthis one myself temporarily*/
@media only screen and (min-width: 481px) {
	#mobile, #mobTop, #mobMiddle, #mobBottom{
	display: none;
}
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}

@media only screen and (min-height: 500px) {

}
	
.mySlides{
	display: none;
}

.grad{
	background: gray; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(lightgreen, white); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(lightgreen, white); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(lightgreen, white); /* For Firefox 3.6 to 15 */
    background: linear-gradient(lightgreen, white); /* Standard syntax */
}
#PlaceInMindSpecific{
	display: none;
}
#PlaceInMindSpecific1{
	display: none;
}
#PlaceInMindSpecific2{
	display: none;
}