<html>
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="favicon.ico">
<title>San Felipe Del Rio CISD</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--if lt IE 9
    script(src='https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js')
    script(src='https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js')
    
    -->
  <style>
  
.animated-li {
  position: relative;
  bottom:20px;
}

.animated-li li {
  height: auto;
  display: block;
  position: relative;
  z-index: 100;
  margin: 5px 0;
  -webkit-animation: menu 2s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation: menu 2s;
  -moz-animation-fill-mode: forwards;
  -ms-animation: menu 2s;
  -ms-animation-fill-mode: forwards;
  animation: menu 2s;
  /* Safari and Chrome */
  animation-fill-mode: forwards;
  opacity: 0;
  float:left;
  -webkit-transform:rotate(270deg);
  -khtml-transform:rotate(270deg);
  -moz-transform:rotate(270deg);
  transform:rotate(270deg);
-ms-transform: rotate(270deg);
  width:56px;
}

.animated-li li:hover {
  cursor: pointer;
}

.animated-li li:before {
  display: block;
  height: 50px;
  width: 50px;
  content: '>';
  font-size: 2em;
  position: absolute;
  left: 0;
  top: 0;
  border-right: rgba(255, 255, 255, 0.2) 1px solid;
  text-align: center;
  color: #fff;
  text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;
  z-index: 200;
  line-height: 1.8em;
}
.animated-li li a {
  color: #fff;
  display: block;
  height: 50px;
  padding: 0 1em 0 70px;
  z-index: 100;
  text-decoration: none;
  font-size: 14px;
  line-height: 2.8em;
  position: absolute;
  top: 0;
  left: 0;
width: 230px;
  overflow: hidden;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  text-shadow: rgba(0, 0, 0, 0.3) 1px 1px;
}

.animated-li li:nth-child(1) a {
  background: #012951;
}

.animated-li li:nth-child(2) a {
  background: #012951;
}

.animated-li li:nth-child(3) a {
  background: #012951;
}

.animated-li li:nth-child(4) a {
  background: #012951;
}
.dnone1{dispaly:block;}
.animated-li li:nth-child(5) a {
  background: #012951;
}
.animated-li li:nth-child(6) a {
  background: #012951;
}

.animated-li li:nth-child(7) a {
  background: #012951;
}
.list2, .list3{left: -27px;}

.animated-li li a:hover {
  opacity: 1.0;
  padding-right: 3.0em;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  transition: all 0.1s ease;
background:#000;
}

.animated-li li:nth-child(2) {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -ms-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.animated-li li:nth-child(3) {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  -ms-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.animated-li li:nth-child(4) {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  -ms-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.animated-li li:nth-child(5) {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -ms-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.animated-li li:nth-child(6) {
  -webkit-animation-delay:0.6s;
  -moz-animation-delay: 0.6s;
  -ms-animation-delay: 0.6s;
  animation-delay:0.6s;
}

.animated-li li:nth-child(7) {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  -ms-animation-delay: 0.7s;
  animation-delay: 0.7s;
}
.animated-li li:nth-child(8) {
  -webkit-animation-delay: 2.48s;
  -moz-animation-delay: 2.8s;
  -ms-animation-delay: 2.8s;
  animation-delay: 2.8s;
}

@-webkit-keyframes menu {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes menu {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes menu {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes menu {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
h2{display:block; position:relative; cursor:pointer;}
.lstDiv{width:100%;position:absolute; left:0; bottom:0;}
.dnone{display:none;}
    </style>

</head>

<body>
<style>
ul.orbit.orbitlistJS li{line-height:16px !important; font-size:13px; }
	.logodiv img{height:180px;}
	.logodiv h3 {
    color: #FFF;
    margin: 0px;
    padding: 0;
    text-transform: uppercase;
    font-size: 36px;
    display: inline;
    text-shadow: 2px 2px 2px #000;
text-decoration:none;
}
.hovereffect {
width: 100%;
 height:auto !important;
 }

 .news-carousel{padding:10px !important}
 .footer .row .col-md-4{min-height:auto !important;}
 .logodiv{padding: 1rem 0 !important;}
</style>
<nav role="navigation" class="navbar navbar-inverse topsticky">
        <!-- Brand and toggle get grouped for better mobile display -->
        
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        
        <!-- Collection of nav links and other content for toggling -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Calendar <b class="caret"></b></a>
	<ul class="dropdown-menu" style="display: none;">
		<li><a href="#" class="color-white">Assessment Calendar</a></li>
		<li><a href="#" class="color-white">District Calendar</a></li>
	</ul>
</li>	
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Media Center</a>
                </li>		
  <li>
                    <a href="#">Contact Us</a>
                  </li>
				
            	<li class="pull-right">
                  	<form class="navbar-form" role="search">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" name="q">
                        <div class="input-group-btn">
                            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                        </div>
                    </div>
                    </form>
                  </li>

            	<li class="pull-right">
					<form class="navbar-form" role="select">
						<select class="form-control"> 
						<optgroup>
						  <option>English</option>
						  <option>Spanish</option>
						  <option>Vietnamese</option>
						</optgroup>
					  </select>
				   </form>
                </li>
<li class="pull-right"><a href="#">login</a></li>
               <!---   <li>
                    <a href="#">Our Media</a>
                  </li>
                  <li>
                    <a href="#">Our Community</a>
                  </li>--->
                  
            </ul>            
        </div>
    </nav>
    <div class="container-fluid logodiv  radial-center">
      <a href="#">
      	<img src="http://pprod.medixsoft.com:8080/media/1714/sfdr-logo.png">
       <h3 class="animated bounceInDown">San Felipe Del Rio CISD</h3>
      </a>
       
    </div>
    
    <div class="navbar yamm main-navbar">
          
            <button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
          
          <div id="navbar-collapse-grid" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <!-- Grid 12 Menu -->
              <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Parents  </a>    </li>
              <!--With Offsets 
              -->
              <!--Aside Menu 
              -->
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Students</a> </li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community  <b class="caret"></b></a> 
<ul class="dropdown-menu" style="display: none;">
                    <li>
                      <div class="yamm-content">
                        <div class="row">
                          <ul class="col-sm-3 list-unstyled">
                            <li><a href="#"> Superintendent Blog </a></li>
                            <li><a href="#"> Departments </a></li>
                          </ul>
                        </div>
                      </div>
                    </li>
                  </ul>
</li>
              <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Board of Trustees</a>
              </li>
 <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Academics</a></li>

             <li class="dropdown yamm-fw"><a href="schools" class="dropdown-toggle">Schools</a></li>
              <!-- Employees -->
              <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Employees</a></li>
 <li class="dropdown"><a href="http://idashboardweb.tylerisd.org/" target="_blank">Executive Dashboard</a></li>
              </ul>
              </li>
           

            </ul>
          </div>
        </div>
        
<div class="container-fluid">
	<div class="row schools-content">
		<div class="col-md-4 pad-mar-zero">
			<div class="hovereffect">
				<img src="http://pprod.medixsoft.com:8080/media/1675/elementary.jpg" class="img-responsive">
					<div class="overlay"  id="div1">
							<div class="lstDiv">
								<ul class="animated-li list1 dnone">
								<li><a href="#">Leader In Me</a></li>
								<li><a href="#">Bilingual Academics</a></li>
								<li><a href="#">Early Literacy</a></li>
								<li><a href="#">Gifted & Talented </a></li>
								<li><a href="#">Special-Ed</a></li>
								<li><a href="#">Fine Arts</a></li>
								</ul>
								<h2>Elementary School</h2>
							</div>
					</div>
			</div>
		</div>
		<div class="col-md-4 pad-mar-zero">
			<div class="hovereffect">
				<img src="http://pprod.medixsoft.com:8080/media/1676/highschool.jpg" class="img-responsive">
					<div class="overlay"  id="div2">
						<p> 
							<div class="lstDiv">
								<ul class="animated-li list2 dnone">
								<li><a href="#">Capturing Kids Hearts</a></li>
								<li><a href="#">ESL</a></li>
								<li><a href="#">Athletics</a></li>
								<li><a href="#">UIL</a></li>
								<li><a href="#">CTE</a></li>
								<li><a href="#">Fine Arts</a></li>
								<li><a href="#">Early College  </a></li>
								</ul>
								<h2>High School</h2>
							</div>
						</p> 
					</div>
			</div>
		</div>
		
		<div class="col-md-4 pad-mar-zero">
			<div class="hovereffect">
				<img src="http://pprod.medixsoft.com:8080/media/1680/middle_school.jpg" class="img-responsive">
					<div class="overlay"  id="div3">
						<p> 
							<div class="lstDiv">
								<ul class="animated-li list3 dnone">
								<li><a href="#">ESL</a></li>
								<li><a href="#">Athletics</a></li>
								<li><a href="#">Special Ed</a></li>
								<li><a href="#">CTE</a></li>
								<li><a href="#">Capturing Kids Hearts</a></li>
								<li><a href="#">Fine Arts</a></li>
								<li><a href="#">ECHS</a></li>
								</ul>
								<h2>Middle School </h2>
							</div>
						</p> 
					</div>
			</div>
		</div>
	</div> 
</div><!-- /.container -->
<div class="col-xs-12 news-carousel">
	<marquee>Welcome to the 2016-2017 School Year! Broadcast Message goes here.</marquee>
</div>
<div style="clear:both;"></div>

<div class="container-fluid footer">
    <div class="row">
    	<ul class="col-md-2 border-right">
        	<li><a href="#" class="fade_success">Students</a></li>
            <li><a href="#" class="fade_success">Faculty</a></li>
            <li><a href="#" class="fade_success">Staff</a></li>
            <li><a href="#" class="fade_success">Alumni</a></li>
            <li><a href="#" class="fade_success">Parents</a></li>
            <li><a href="#" class="fade_success">Visit</a></li>
        </ul>
        <ul class="col-md-2 border-right">
        	<li><a href="#" class="fade_success">Directory</a></li>
            <li><a href="#" class="fade_success">Maps</a></li>
            <li><a href="#" class="fade_success">Quick Links</a></li>
            <li><a href="#" class="fade_success">Campus Notices</a></li>
            <li><a href="#" class="fade_success">SFDR CISD</a></li>
            <li><a href="#" class="fade_success">Make a Gift</a></li>
        </ul>
        <div class="col-md-4">
        	<a href="#"><img src="http://pprod.medixsoft.com:8080/media/1684/sfdr-footer-logo.png"></a>
        </div>
        <ul class="col-md-2 border-left">
        	<li><a href="#" class="fade_success">Job Opportunities</a></li>
            <li><a href="#" class="fade_success">Emergency Info</a></li>
            <li><a href="#" class="fade_success">xMail</a></li>
            <li><a href="#" class="fade_success">Title IX</a></li>
            <li><a href="#" class="fade_success">Non-discrimination Statement</a></li>
        </ul>
        <ul class="col-md-2 border-left">
        	<li>San Felipe Del Rio CISD Administration Bldg.</li>
            <li>315 Griner St.</li>
            <li>Del Rio, Texas 78840</li>
            <li>(830) 778-4000 </li>
        </ul>
    </div>
    <div class="row row1">
		<div class="col-md-4">
			<p class="copyright">Copyright <i class="fa fa-copyright"></i> San Felipe Del Rio CISD.</p>
		</div>
		<div class="col-md-4">
			<ul style="padding-left:0">
				<li><a href="#" class="btn btn-default"><i class="fa fa-facebook"></i></a></li>
				<li><a href="#" class="btn btn-default"><i class="fa fa-twitter"></i></a></li>
				<li><a href="#" class="btn btn-default"><i class="fa fa-linkedin"></i></a></li>
				<li><a href="#" class="btn btn-default"><i class="fa fa-google-plus"></i></a></li>
				<li><a href="#" class="btn btn-default"><i class="fa fa-instagram"></i></a></li>
			</ul>
		</div>
		<div class="col-md-4">
			<p class="powered">Powered by<br><i class="fa fa-copyright"></i> <a href="#">ekōhī</a> <i class="fa fa-registered"></i> is a Registered Trademark of <i class="fa fa-copyright"></i> <a href="#">Medixsoft.Inc</a></p>
			
		</div>
        
    </div>
</div>
		<p id="back-top" style="display: none;">
			<a href="#top"><i class="fa fa-angle-up"></i></a>
		</p>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

	<script>
	$(document).ready(function(){
		$("#div1").hover(function(){
			$(".list1").toggleClass("dnone");
			$(".list2").addClass("dnone");
			$(".list3").addClass("dnone");
		});
		$("#div2").hover(function(){
			$(".list2").toggleClass("dnone");
			$(".list1").addClass("dnone");
			$(".list3").addClass("dnone");
		});
		$("#div3").hover(function(){
			$(".list3").toggleClass("dnone");
			$(".list1").addClass("dnone");
			$(".list2").addClass("dnone");
		});
	});
</script>  

				<script src="http://pprod.medixsoft.com:8080/media/1638/bootstrapmin.js"></script>      
				<script src="http://pprod.medixsoft.com:8080/media/1644/jquerye-calendar.js"></script>      
				<script src="http://pprod.medixsoft.com:8080/media/1640/index.js"></script>      
				<script src="http://pprod.medixsoft.com:8080/media/1639/democarousel.js"></script>      
				<script src="http://pprod.medixsoft.com:8080/media/1647/owlcarouselmin.js"></script>      
				<script src="http://pprod.medixsoft.com:8080/media/1646/smoothscrollmin.js"></script>      
				<script src="http://pprod.medixsoft.com:8080/media/1700/moozthemesscripts.js"></script> 

		 <script>
			$('ul.nav li.dropdown').hover(function() {
		  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
		}, function() {
		  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
		});
			
			</script>
</body>
</html>



