beagle_app/app/assets/stylesheets/public.scss

@import "jquery.bxslider";

@import "fontawesome/font-awesome";

@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

.logo img:first-child {
    -webkit-animation: rotating 15s linear infinite;
}

.pulse{
	animation-name: pulse;
	-webkit-animation-name: pulse;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.9);
		opacity: 0.7;		
	}
	50% {
		transform: scale(1);
		opacity: 1;	
	}	
	100% {
		transform: scale(0.9);
		opacity: 0.7;	
	}			
}

@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale(0.95);
		opacity: 0.7;		
	}
	50% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(0.95);
		opacity: 0.7;	
	}			
}


.floating{
	animation-name: floating;
	-webkit-animation-name: floating;

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes floating {
	0% {
		transform: translateY(0%);	
    opacity: 0.7;	
	}
	50% {
		transform: translateY(8%);	
    opacity: 1;	
	}	
	100% {
		transform: translateY(0%);
    opacity: 0.7;	
	}			
}

@-webkit-keyframes floating {
	0% {
		-webkit-transform: translateY(0%);	
    opacity: 0.7;	
	}
	50% {
		-webkit-transform: translateY(8%);	
    opacity: 1;	
	}	
	100% {
		-webkit-transform: translateY(0%);
    opacity: 0.7;	
	}			
}



iframe{
  margin:auto;
  width:100%;
  
}

a{
  img{
    
    border:0;
  }
  
}

body{
  font-family:Lato;
  font-weight:300;
  line-height:1.62;
  text-align:justify;
  background:#F2F2F2;
  padding:0;
  margin:0;
  font-size:15px;
  color:#333333;
  
  
}

img{
  max-width:100%;
  
}
 
a{
  color:rgba(66,139,202,1);
  text-decoration:none;
  
  &:hover{
  color:#68b9ff;

  }
 
}

.clear{
  clear:both;
}
 
#large{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.8);
  z-index:10;

   h3{
     color:white;
     text-align:center;
     margin-top:5px;
     margin-bottom:0;
     font-weight:300;
     font-size:0.95em;
 
   }
  .next, .prev{
    width:20px;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;

  }
  .prev{
    left:15px;
  }
  .next{
    right:15px;
  }
 
  .img_container{
    height:100%;
    width:100%;
    box-sizing: border-box;

   .large-img{
      cursor:pointer;
      padding:10px;
      background:rgba(250, 250, 250, 0.9);
      display:block;
      margin:auto;
    }
  }
}



.rea-gal{
  padding-left:0px;

  margin-right:-5px;
  margin-bottom:-5px;
  img{
  padding-right:5px;
  padding-bottom:5px;
    width:200px;
    float:left;
    box-sizing: border-box;
    &:hover{
      opacity:0.8;
      
    }
  }
}


 





.row{

margin:auto;
//max-width:1100px;
display:block;


&:after{
content: "";
  display: table;
  clear: both;

}

.columns{


display:block;

box-sizing: border-box;
float:left;
display:inline-block;
padding:0 5px;

&:first-child{
padding-left:0px;

}
&:last-child{
padding-right:0px;

}

&.span_12{
width:100%;

}

&.span_11{
width:100/12*11;

}
&.span_10{
width:percentage(1/12*10);

}
&.span_9{
width:percentage(1/12*9);

}
&.span_8{
width:percentage(1/12*8);

}
&.span_7{
width:percentage(1/12*7);

}

&.span_6{
width:percentage(1/12*6);

}
&.span_5{
width:percentage(1/12*5);

}
&.span_4{
width:percentage(1/12*4);

}
&.span_3{
width:percentage(1/12*3);

}
&.span_2{
width:percentage(1/12*2);

}

&.span_1{
width:percentage(1/12*1);

}


}
}
.main{
width:100%;
max-width:1020px;
position:relative;
margin:auto;

}

.top{
  height:800px;
  background:white url("/fond.jpg") no-repeat fixed ;
  -webkit-background-size:cover;
  background-position-x:center !important;
  overflow:hidden;
  position:relative;
  
  
  h1, h2{
    text-align:center;
    position:absolute;
    font-weight:300;
    color:white;
    width:100%;
    padding:0;
    margin:0;
  }
  
  h1{
    font-size:2.3em;
    bottom:130px;
  }
  h2{
    bottom:20px;
    font-size:1.4em;
    
    img{
      width:60px;
      display:block;
      margin:1em auto;
    
      
    }
  }
}

#logo{
  width:100%;
  max-width:125px;
  padding:10px 10px;
  display:block;
  img{
    
  }

  
}

#menu{
  background:rgba(0,0,0,0.5);
  color:white;
  width:100%;
  position:fixed;
  
  -webkit-transition: background-color 1000ms linear;
  -moz-transition: background-color 1000ms linear;
  -o-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear;
  transition: background-color 1000ms linear;
  
  a{
    color:white;
    
  }
  
  ul{
    margin:0;
    padding:0 10px;
    float:right;
    li{
      padding:0;
      margin:0;
      display:inline;
      display:inline-block;
      padding:13px 10px;
      
    }
    
  }
  
}


#sub_menu{
  //background:rgba(0,0,0,0.5);
  color:white;
  width:100%;
  position:fixed;
  top:55px;
  text-align:center;
  
  -webkit-transition: background-color 1000ms linear;
  -moz-transition: background-color 1000ms linear;
  -o-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear;
  transition: background-color 1000ms linear;
  
  a{
    color:white;
    
  }
  
  ul{
    margin:0;
    padding:0 5px;
   
    li{
      padding:0;
      margin:0;
      display:inline;
      display:inline-block;
      padding:7px 15px;
      
    }
    
  }
  
}