.primaryContainer {
    height: auto;
    margin-left: auto;
    margin-right: auto;
    min-height: 100%;
    width: 100%;
}

#harmony_frame1 {
    float: left;
    height: auto;
    clear: none;
    width: 55%;
    overflow: hidden;
    display: block;
    max-width: none;
    border: 10px solid rgb(255, 255, 255);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    -webkit-box-shadow: rgba(135, 135, 135, 0.341176) 0px 3px 25px 0px;
    box-shadow: rgba(135, 135, 135, 0.341176) 0px 3px 25px 0px;
    position: static;
    top: 0px;
    left: 0px;
    margin-top: 0px;
    margin-left: 0%;
    margin-right: 0%;
	
	rotate: -10deg;
}

#harmony_frame2:hover {
    -webkit-filter: grayscale(50%);
    filter: grayscale(50%);
}

#harmony_frame2 {
    float: none;
    width: 100%;
    max-width: none;
    height: auto;
    margin-left: auto;
    margin-top: 0px;
    clear: none;
    color: rgb(0, 0, 0);
    display: block;
    margin-right: auto;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

#harmony_frame {
    float: none;
    height: auto;
    margin-left: auto;
    margin-top: 0px;
    clear: none;
    width: 80%;
    margin-right: auto;
}

#harmony_frame3 {
    float: right;
    height: auto;
    clear: none;
    width: 55%;
    overflow: hidden;
    display: block;
    max-width: none;
    border: 10px solid rgb(255, 255, 255);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
   -webkit-box-shadow: rgba(135, 135, 135, 0.341176) 0px 3px 25px 0px;
    box-shadow: rgba(135, 135, 135, 0.341176) 0px 3px 25px 0px; 
    position:relative;
    top: 0px;
    left: 0px;
    margin-top: -33%;
    margin-left: -75px;
    margin-right: 0%;
	
	rotate: 10deg;
}

#harmony_frame4:hover {
    -webkit-filter: grayscale(50%);
    filter: grayscale(50%);
}

#harmony_frame4 {
    float: none;
    width: 100%;
    max-width: none;
    height: auto;
    margin-left: auto;
    margin-top: 0px;
    clear: none;
    color: rgb(0, 0, 0);
    display: block;
    margin-right: auto;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

/*@media only screen and (max-width: 1200px) {

#harmony_frame {
	width: 100%;	
	}
	
	#harmony_frame3 {
	margin-top: 0px;
	}
	
}*/

@media only screen and (max-width: 1200px) {
    #harmony_frame2 {
        width: 100%;
        margin-top: 0px;
    }

    #harmony_frame4 {
        width: 100%;
        margin-top: 0px;
    }

    #harmony_frame1 {
        height: auto;
    }

    #harmony_frame3 {
        height: auto;
		margin-top: -3%;
		width: 50%;
    }
	
	   #harmony_frame {
      width: 100%;
    }
	
	
	
}

@media only screen and (max-width: 850px) {
	  #harmony_frame3 {
        height: auto;
		margin-top: -7%;
    }
   
}

@media only screen and (max-width: 700px) {
	  #harmony_frame3 {
        height: auto;
		margin-top: -7%;
    }
   
}

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