/* ----COMPUTERS---- */
@media all and (min-width: 1100px) { 
}

/* ----IPAD---- */
@media all and (max-width: 1100px) and (min-width: 800px) {	  
}
       
    

/* ----COMMON COMPUTER AND IPAD---- */

@media all and (min-width: 801px) {

.inner {
position: relative;
width: 1000px;
left: 50%;
margin-left: -500px;
}

.relative-inner {
position: relative;
width: 1000px;
left: 50%;
margin-left: -500px;
}

#top-frame-layer3 {
display: none;
}

#top-frame-menu{
float: right;
background: #212121;
height: 1.5em;
cursor: pointer;
padding: 0.2em;
color: #fff;
display: none;
}

#top-frame button.thebut {
    border: none;
    background: none;
    margin-left: -8px;
    font-size: 1.2em;
    margin-right: 3em;
    font-weight: 300;
    font-family: "Roboto",Calibri,Arial,sans-serif;
    padding: 5px;
}

#top-frame button.thebut:hover {
    background: #212121;
    color: #f1f1f1;
}


#top-frame a.homebut {
    border: none;
    background: none;
    margin-left: -8px;
    font-size: 1.2em;
    margin-right: 3em;
    font-weight: 300;
    font-family: "Roboto",Calibri,Arial,sans-serif;
   
}

#top-frame a.homebut{
   display: inline-block;
   padding: 5px;
   color: #212121;
 text-decoration: none;
}


#top-frame a.homebut:hover {
 background: #212121;
 color: #f2f2f2;
}


#top-frame h1 {
    font-family: "Roboto",Calibri,Arial,sans-serif;
    font-size: 3em;
    line-height: 1em;
    margin: 0.3em 0em 0em;
    font-weight: 300;
}
      
#top-frame h2 {
    font-size: 1.5em;
    line-height: 1em;
    margin: 0em 0em 1.5em;
    font-weight: 500;
}

.halfpage-left{
width: 40%;
float: left; /*REVERSE!!!*/
}

.withphoto-100 {
width: 100%;
}

.halfpage-right {
    width: 53%;
    float: right;
    line-height: 1.4em;
    font-size: 1.1em;
    padding-left: 3%;
    border-left: solid 1px #ccc;
}

/*
#slideshow-frame {
    position: relative;
    width: 800px;
    height: 500px;
    overflow: hidden;
    padding-top: 10px;
}
*/

}

/* ----IPHONE---- */
@media all and (max-width: 800px) {

.inner {
position: relative;
width: 95%;
margin: 0% 2% 0% 2%;
}    

.relative-inner{
position: relative;
width: 98%;
margin: 0 1%;
}

#top-frame-layer2, #top-frame-layer3 {
display: none;
background: #212121;
}


#top-frame-menu{
float: right;
background: #212121;
height: 1.5em;
cursor: pointer;
padding: 0.2em;
color: #fff;
}

#top-frame h1 {
    font-family: "Roboto",Calibri,Arial,sans-serif;
    font-size: 2em;
    line-height: 1em;
    margin: 0.3em 0em 0em 0em;
}
      
#top-frame h2 {
    font-size: 1em;
    line-height: 1em;
    margin: 0em 0em 0.5em;
} 

#top-frame button {
    font-size: 1.2em;
    font-weight: 300;
    font-family: "Roboto",Calibri,Arial,sans-serif;
}



#top-frame button.thebut {
    border: none;
    background: none;
    margin-left: 3px;
    font-size: 1.2em;
    margin-right: 0.5em;
    font-weight: 300;
    font-family: "Roboto",Calibri,Arial,sans-serif;
    padding: 2px;
    color: #ccc;
}

#top-frame button.thebut:hover {
    background: #212121;
    color: #f1f1f1;
}


#top-frame a.homebut {
   display: none; /* hide on iphone*/
    border: none;
    background: none;
    margin-left: -8px;
    font-size: 1.2em;
    margin-right: 3em;
    font-weight: 300;
    font-family: "Roboto",Calibri,Arial,sans-serif;
   padding: 5px;
   color: #212121;
 text-decoration: none;
   
}




#top-frame a.homebut:hover {
 background: #212121;
 color: #f2f2f2;
}





.halfpage-left{
width: 100%;
position: relative;
}

.halfpage-right{
width: 100%;
float: right;
position: relative;
}
    
}



/* ----COMMON---- */

.halfpage-left input {
width: 98%;
height: 30px;
}

.halfpage-left textarea {
width: 98%;
height: 60px;
}

.masonry-image{
width: 23%;
margin: 3px 0.5% 3px 0.5%;
cursor: pointer;
}

.masonry-image:hover, .masonry-im-whole:hover, .masonry-im-whole:hover{
/* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=80);

  /* Netscape */
  -moz-opacity: 0.8;

  /* Safari 1.x */
  -khtml-opacity: 0.8;

  /* Good browsers */
  opacity: 0.8;
}

.masonry-holder {
width: 48%;

}

.masonry-im-half {
width: 49%;
margin-left: 0.5%;
cursor: pointer;
}

.masonry-im-whole {
width: 98.5%;
margin: 0 0 0 0.5%;
cursor: pointer;
}

html {
height: 100%;
margin: 0;
overflow:scroll;
position: relative;
}
    	
body {
height: 100%;
margin: 0;
min-height: 100%; 
font-family: "Lato",Calibri,Arial,sans-serif;
/*background: orange;*/
}

#wrapper {
position: relative;
min-height: 100%; 
background: #D2D4D5;
margin: 0;
padding: 20px 0px;
}

#footer {
    position: relative;
    height: 20px;
    width: 100%;
    background: none repeat scroll 0% 0% #212121;
    color: #F7F7F7;
    padding: 1em 0;
    text-align: right;
}

.breaker {
clear:both;
width: 100%;
height: 10px;
}

/*-------top frame with nav and title---*/

#top-frame {
position: relative;
top: 0px;
left: 0px;
width: 100%;
background: none repeat scroll 0% 0% #B9BBBC;
overflow: hidden;  
z-index: 500;  
/* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

  /* IE 5-7 */
  filter: alpha(opacity=100);

  /* Netscape */
  -moz-opacity: 1;

  /* Safari 1.x */
  -khtml-opacity: 1;

  /* Good browsers */
  opacity: 1;
    }
    



    
 

#top-frame button:hover{
cursor: pointer; 
    }  

#top-frame-layer1, #top-frame-layer2, #top-frame-layer3 {
position: relative;
width: 100%;
}

#top-frame-title{
float: left;
width: 80%;
}



#top-frame-return {
    background: none repeat scroll 0% 0% #7E7777;
    padding: 1px 0px 2px;
    height: 30px;
    width: 10%;
    cursor: pointer;
    text-align: center;
    margin: 0px auto;
}

/*---------------*/

.slide {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
background: pink;
height: 100%;
max-height: 100%;
overflow: hidden;
margin: 0;
padding: 0px;
}


.slide h3{
font-family: "Open Sans",sans-serif;
font-weight: 300;
display: inline-block; //means it fits nicely into the space
width: 100%;
font-size: 3em;
margin: 0.1em 0em 0.1em 0em;
}    
        

    
#slide-1 {
background: #ffffff !important;
}  

#slide-2 {
background: #f6f6f6 !important;
}  
    
#slide-3 {
background: #f3f3f3 !important;
}  
    
#slide-4 {
background: #eee !important;
}  
    
#slide-5 {
background: #e1e1e1 !important;
}  
    
#slide-6 {
background: #ccc !important;
} 
    
#slide-7 {
background: #f7f7f7 !important;
}
    
#slide-8{
background: #e2e2e2 !important;
}