.w-center {  height: 600px; width: 100%; position: relative; left: 0px; }

.callout-back{background: #e0e0e0;position:absolute;right:0px;top:250px;width: calc(100% - 100px);height: 325px;}


/* ROW ONE */
.sm-row1{height: 550px; width:50%; position: absolute; right:40px;} 
.sm-row2{height: 550px; width:50%; position: absolute; left: 0px;} 

.sm-photo1 { background: url(/images/design/welcome/ranchmensws1.jpg) no-repeat bottom center;left: -3px;top:150px;z-index:10;}
.sm-photo2 { background: url(/images/design/welcome/ranchmensws2.jpg) no-repeat top center;right: 0px;top:50px;z-index:20;}
.sm-photo3 { background: url(/images/design/welcome/ranchmensws3.jpg) no-repeat bottom center;left: 0px;top:200px;z-index:30;}
.sm-photo4 { background: url(/images/design/welcome/ranchmensws4.jpg) no-repeat bottom center;right: 0px;top:0px;z-index:40;}

.sm-photo1, .sm-photo2, .sm-photo3, .sm-photo4{background-size:cover; position: absolute; height: 400px; width: calc(50% + 25px);border: 3px solid #ffffff;-webkit-transition: all 0.5s ease;transition: all 0.8s ease;}




.callout div{color: #ffffff; text-align:left;font-weight:500;vertical-align: middle;}
.sm-line{background:#ebebeb;height:1px;width:100%;margin:5px 0px;}
.sm-tag{ letter-spacing: 0.2em; text-transform: uppercase; font-size: 14px;line-height:100%; }
.sm-title{font-family:'Oswald', sans-serif;font-size:42px;letter-spacing: .05em; font-weight: 300; text-transform: uppercase;line-height:100%;text-shadow: 1px 1px 1px #000000;margin:15px 0px;}
.sm-text {padding:10px 0px; }
.sm-learn {text-align:right !important;text-transform:uppercase;}
.sm-learn a {color:#ffffff;text-align:right !important;}
.sm-learn a:hover{opacity: 0.8;filter: alpha(opacity=80);text-align:right !important;}


.sm-photo{text-align:center;position:relative;margin:auto;height:100%;width:100%;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;max-height:100vh;}
.callout-content{}
.callout{position:absolute;width:100%;height:100%;padding:30px;}
.callout-body{visibility: hidden;height:0px;}
.sm-photo:hover .callout, .sm-photo:focus .callout{background:rgba(0, 0, 0, 0.4);visibility: visible;-webkit-transition: all 0.5s ease;transition: all 0.8s ease;}
.sm-photo:hover .callout-body, .sm-photo:focus .callout-body{visibility: visible;height:auto;}
.sm-photo3:hover,.sm-photo2:hover,.sm-photo1:hover,.sm-photo4:hover{z-index:50;-webkit-transition: all 0.5s ease;transition: all 0.8s ease;}



@media (max-width:1200px) {

}


@media (max-width:1150px) {
.w-center {height: 800px;}
.callout-back{right:20px;height:475px;}
.callout{padding:30px 20px;}
.sm-row1{height:650px;width: calc(50% + 40px);right:0px;} 
.sm-row2{height:650px;width: calc(50% + 40px);top:150px;} 
.sm-photo1, .sm-photo2, .sm-photo3, .sm-photo4{height:300px;width:100%}
.sm-photo1{top:350px; left:40px;z-index:10;}
.sm-photo2{top:0px; left:-3px;right:auto;z-index:30;}
.sm-photo3{top:350px; right:-3px;left:auto;z-index:20;}
.sm-photo4{top:0px;right:40px;z-index:40;}
.sm-title{font-size:36px;}
.sm-tag{ letter-spacing: 0.1em;}
}



@media (max-width:930px) {
}


@media (max-width:767px) {
.sm-photo1{left:20px;}
.sm-photo4{right:20px;}
}


@media (max-width:550px) {
.w-center {height: 1050px;}
.callout-back{right:0px;height:900px;top:100px;width:100%;}
.sm-row1{height:auto;width: calc(100% - 40px);left:10px;right:auto;} 
.sm-row2{height:auto;width: calc(100% - 40px);top:250px;right:10px;left:auto;} 
.sm-photo1, .sm-photo2, .sm-photo3, .sm-photo4{height:300px;width:100%}
.sm-photo1{top:500px; left:auto;right:0px;z-index:40;}
.sm-photo2{top:0px; left:auto;right:0px;z-index:20;}
.sm-photo3{top:500px; right:auto;left:0px;z-index:30;}
.sm-photo4{top:0px;right:auto;left:0px;z-index:10;}
}


@media (max-width:540px) {

}

@media (max-width:450px) {
.sm-title{font-size:30px;}
.sm-text {line-height:140%; }
.callout{padding:20px;}
}

@media (max-width:400px) {
}