| Current File : /home/cideo/site_2015/www/sass/styles.scss |
@import "bootstrap";
@import "fonts";
@import "swiper";
@import "variable";
@import "mixin";
body, html{font-family: $fontmain;}
a:active, a:hover, a:focus, a:visited {
outline:none;
outline-offset: 0px;
}
section{
article{
overflow-x:hidden;
}
}
/*INTRO REALISATIONS GALERIE*/
.galerie{
list-style:none;
display:block;
padding:0;
margin:0;
>li{
position:relative;
padding:0;
margin:0;
display:inline-block;
*display:inline;
*zoom:1;
text-align: center;
width:100%;
a {
display:block;
margin:0%;
img{
vertical-align:top;
width: 100%;
height:auto !important;
}
div.caption{
div.caption-text{
height:100%;
display:inline-block;
@include align;
h3{
width:100%;
display: inline-block;
vertical-align: middle;
@media (max-width:$screen-lg){
font-size:28px;
}
@media (max-width:$screen-md){
font-size:16px;
}
@media (max-width:$screen-xs){
font-size:10px;
}
span{
display:block;
border:1px solid #FFF;
width:75%;
margin:0 auto;
padding:15px;
}
}
}
}
}
}
}
.galerie.gal1 > li{width: 100%}
.galerie.gal2 > li{width: 50%}
.galerie.gal3 > li{width: 33.33333333%}
.galerie.gal4 > li{width: 25%}
.galerie.gal5 > li{width: 20%}
.galerie.gal6 > li{width: 16.66666667%}
.galerie.gal7 > li{width: 14.2857143%}
.galerie.gal8 > li{width: 12.5%}
.galerie.gal9 > li{width: 11.111111111%}
.galerie.gal10 > li{width: 10%}
.galerie.gal11 > li{width: 9.09090909%}
.galerie.gal12 > li{width: 8.33333333%}
.galerie.gal12 > li{width: 7.69230769%}
.galerie.gal12 > li{width: 6.66666667%}
.galerie.gal12 > li{width: 6.25%}
/*Vertical Aligner*/
nav{
a{
color:#000;
text-decoration: none;
&:active, &:hover, &:focus, &:visited {
text-decoration: none;
color:#000;
}
}
}
.aligner{
}
@media (min-width:$screen-xs){
.aligner {
text-align: center;
white-space: nowrap;
}
.aligner::after, .aligner > * {
display: inline-block;
vertical-align: middle;
}
.aligner::after {
content: "";
height: 100%;
visibility: hidden;
width: 0;
}
.aligner > * {
text-align: left;
white-space: normal;
}
}
/**/
/*HEADER*/
.navbar-default {
background-color: #ffffff;
border-color: transparent;
}
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
float: left;
width: 26%;
}
.navbar-brand {
float: left;
font-size: 18px;
height: auto;
line-height: 20px;
padding: 15px;
}
#nav-icon3 {
cursor: pointer;
height: 30px;
margin: 30px auto;
position: relative;
transform: rotate(0deg);
transition: all 0.5s ease-in-out 0s;
width: 40px;
span {
background: #000 none repeat scroll 0 0;
border-radius: 0;
display: block;
height: 3px;
left: 0;
opacity: 1;
position: absolute;
transform: rotate(0deg);
transition: all 0.25s ease-in-out 0s;
width: 100%;
&:nth-child(1) {
top: 0;
}
&:nth-child(2), &:nth-child(3){
top: 13px;
}
&:nth-child(4) {
top: 26px;
}
}
&.open{
span{
&:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
&:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
&:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
&:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
}
}
}
.baseline {
display: inline-block;
font-size: 12px;
letter-spacing: 3px;
line-height: 100px;
text-align: center;
text-transform: uppercase;
width: 50%;
@media (max-width:$screen-lg){
font-size: 10px;
letter-spacing: 1px;
}
}
.mainmenu{
position:fixed; left:0; right:0; visibility:hidden; opacity:0; transition:all .5s ease; border-bottom: 2px solid rgba(204,204,204,0.00) ;
border-top: 2px solid rgba(204,204,204,0.00) ; background-color:rgba(255,255,255,1.00); z-index:1;
}
.mainmenu.menuopen{
position:fixed;
height:100%;
left:0;
right:0;
visibility:visible;
opacity:1;
transition:all .5s ease;
z-index:1;
border-bottom: 2px solid rgba(204,204,204,1.00) ;
border-top: 2px solid rgba(204,204,204,1.00) ;
}
.mainmenu .menu-wrapper{
width:100%;
@media (max-width:$screen-xs){
margin-top:10px;
}
ul{
margin:0px 0px 15px 0px; padding:0px; text-align:center;
li{
font-size: 2vmax;
list-style: outside none none;
margin: 0;
padding: 0;
@media (max-width:$screen-lg){
padding:10px 0;
}
@media (max-width:$screen-xs){
padding:2px 0;
}
a{
text-transform:uppercase; color:#000; font-family: $fontmainLight;
&.btn{
@media (max-width:$screen-xs){
font-size:12px;
padding: 2px 4px;
}
}
}
}
}
}
/*Newletter form*/
.mainmenu .form-control:focus {
border-color: inherit;
border-width:1px 0px 1px 1px;
box-shadow: none;
outline: 0 none;
}
.mainmenu .form-control {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #000000;
border-image: none;
border-style: solid;
border-width: 1px 0 1px 1px;
box-shadow: none;
color: #000;
font-family: $fontmainLight;
font-size: 12px;
font-weight: 100;
}
.mainmenu .btn-primary {
background-color: #ffc600;
border-color: #000;
color: #000000;
border-width:1px 1px 1px 0px;
}
.mainmenu .input-group{font-family: $fontmainLight;}
.mainmenu .input-group a.btn.btn-primary{font-family: $fontmainLight; margin-left:-1px !important;}
.mainmenu .input-group a.btn.btn-primary:hover{font-family: $fontmainLight; margin-left:-1px !important;}
::-webkit-input-placeholder { color:#000; }
::-moz-placeholder { color:#000; } /* firefox 19+ */
:-ms-input-placeholder { color:#000; } /* ie */
input:-moz-placeholder { color:#000; }
@media (max-width:$screen-md){
.navbar-brand > img {
display: block;
min-width: 100px;
width: 100%;
margin-top: 10px;
}
}
section{
&.main{
article{
overflow:hidden;
padding-left: 0px;
padding-right: 0px;
}
}
&#index{
width:100%;
font-family: $fontmainLight;
h1,h2{
text-transform: uppercase;
text-align:center;
font-size:40px;
width:520px;
margin:0 auto 0 auto;
@media (max-width:$screen-md){
font-size:20px;
width:75%;
margin:30px auto 35px auto;
}
@media (max-width:$screen-xs){
font-size:16px;
}
a{
font-style:bold;
color:$color-jaune-cideo;
text-decoration: underline;
}
}
h2{
font-size:22px;
width:auto;
margin:0 auto 2% auto;
width:50%;
@media (max-width:$screen-xs){
width:100%;
margin:0 0 20px 0;
padding:0 20px;
font-size:18px;
}
}
p{
text-align: center;
font-size:14px;
width:590px;
line-height:26px;
margin:0 auto 80px auto;
&:first-child{
font-size:16px;
}
@media (max-width:$screen-md){
font-size:10px;
width:75%;
line-height:18px;
margin:0 auto 50px auto;
}
em{
font-size:12px;
@media (max-width:$screen-md){
font-size:10px;
}
}
a{
font-style:bold;
color:$color-jaune-cideo;
text-decoration: underline;
font-weight:400;
}
}
ul.galerie{
li>a>figure{
&.captionjs{
background-color:#000;
}
figcaption{
color:#FFF;
}
img.caption{
opacity:1;
filter: alpha(opacity=100);
&:hover{
opacity: 0.4;
filter: alpha(opacity=40);
}
}
}
}
}
&#equipe{
padding:0 20px;
height:100%;
article{
header{
h1{
text-align:center;
}
}
div.row{
margin-bottom:50px;
a{
color:#000;
}
&:nth-last-child(2){
@media (min-width:$screen-md){
margin-bottom:100px;
}
}
}
}
div.gauche{
@media (min-width:$screen-md){
height:800px;
min-height:800px;
}
h2{
display:inline;
}
div.text{
height:100%;
padding: 0 50px;
h2.personne{
font-size: 1em;
text-align:center;
display:block;
width:100%;
@media (min-width:$screen-md){
font-size: 2.8em;
height:100%;
display:inline-block;
@include align;
text-align:right;
}
}
}
}
div.droite{
text-align:left;
@media (max-width:$screen-md){
text-align:center;
}
img{
&.photo{
width:50%;
height:auto;
max-width:300px;
}
}
}
}
article{
div.gauche{
font-family: $fontmainLight;
div.text{
padding:0 150px;
margin-bottom:20px;
@media (max-width:$screen-lg){
padding:0 50px;
}
@media (max-width:$screen-xs){
padding:0 5px;
}
p{
font-size:14px;
margin:0 0 30px 0;
padding:0;
strong{
font-weight:100;
font-style:italic;
}
&.minimarge{
margin:0 0 10px 0;
}
@media (max-width:$screen-lg){
margin:0 0 10px 0;
font-size:12px;
}
@media (max-width:$screen-xs){
margin:0 0 10px 0;
font-size:10px;
}
}
ul{
margin:0 0 40px 0px;
padding: 0 0 0 12px;
li{
font-size:14px;
@media (max-width:$screen-lg){
font-size:12px;
}
@media (max-width:$screen-xs){
font-size:10px;
}
}
}
a{
color:#000;
}
}
}
h1{
font-family: $fontmainLight;
text-transform: uppercase;
font-size:40px;
padding:4% 0;
margin:0;
@media (max-width:$screen-lg){
font-size:30px;
}
@media (max-width:$screen-xs){
font-size:18px;
}
img{
width:auto;
@media (max-width:$screen-lg){
width:19%;
}
}
}
p{
font-family: $fontmainLight;
//text-transform: uppercase;
font-size:14px;
@media (max-width:$screen-lg){
font-size:30px;
}
@media (max-width:$screen-xs){
font-size:18px;
}
}
div{
&.texte{
margin:60px 0;
p{
text-align:center;
width:75%;
margin:0 auto;
@media (max-width:$screen-lg){
font-size:12px;
}
@media (max-width:$screen-md){
font-size:10px;
}
}
@media (max-width:$screen-xs){
margin:20px 0;
width:100%
}
}
&.site,&.planche,&.photos{
margin:0 0 0px 0;
width:100%;
text-align: center;
@media (max-width:$screen-xs){
margin:0 0 0px 0;
}
a{
}
}
&.planche{
img{
width:100%;
}
}
&.site{
margin:0 0 40px 0;
}
&.bandeaux{
img{
width:auto;
@media (max-width:$screen-md){
width:200px;
}
@media (max-width:$screen-xs){
width:150px;
}
}
}
&.photo{
img{
width:auto;
}
}
&.photos{
margin:0 0 20px 0;
@media (max-width:$screen-md){
margin:0 0 0px 0;
}
a{
cursor:auto;
}
img{
width:auto;
@media (max-width:$screen-lg){
width:100%;
}
}
}
}
img.visuel{
@media (max-width:$screen-lg){
width:100%;
}
}
a{
&.btn-default{
background-color:#FFF;
border-color: #000;
border-radius: 0px;
}
}
}
&#references, &#reference{
div.galerie-wrapper{
margin:0px 0 0 0;
h1{
text-align:center;
}
ul.galerie{
min-width:$screen-lg;
width:50%;
margin:50px auto 0 auto;
@media (max-width:$screen-lg){
min-width:100%;
width:100%;
}
li{
width:25%;
display:inline-block;
margin:0 0px 70px 0px;
padding:0 20px;
vertical-align: middle;
@media (max-width:$screen-lg){
width:100%;
}
a{
padding:10px;
img{
width:auto;
}
}
}
}
}
}
&#reference{
div.last{
margin-bottom:50px;
@media (max-width:$screen-md){
margin-bottom:0px;
}
}
div.bandeaux{
background-position: right center;
background-repeat: no-repeat;
background-size: cover;
@media (max-width:$screen-xs){
background-position: 100%;
}
}
}
}
.aligne-middle {
margin-top: 18%;
margin-bottom: 32%;
@media (max-width:$screen-lg){
margin-top: 10px;
margin-bottom: 10px;
}
}
footer{
position:relative;
}
nav{
&#navfooter{
font-family: $fontmainLight;
margin-bottom: 0px;
ul{
&.social{
margin:0 auto;
width:auto;
// width:208px;
@media (min-width:$screen-md-max){
display:none;
}
@media (max-width:$screen-md){
width:100%;
}
}
li{
float:left;
&.logo{
width:100%;
a{
&:first-child{
@media (max-width:$screen-xs){
width:100%;
}
}
&:last-child{
float:right;
@media (max-width:$screen-xs){
float:none;
text-align: center;
width: 100%;
}
img{
@media (max-width:$screen-xs){
float:none;
}
}
}
img{
height: 39px;
width:auto;
float:left;
@media (max-width:$screen-xs){
width:auto;
height: auto;
}
}
}
div.lieu{
display:inline-block;
padding:7px 0 0 4px;
margin:0;
@media (max-width:$screen-xs){
float:right;
}
p{
color:#FFF;
padding:0px 5px;
background-color:$color_viteff;
margin:0;
width:auto;
float:right;
font-size:1em;
@media (max-width:$screen-xs){
font-size:0.8em;
}
}
}
}
&.alcool{
@media (max-width:1024px){
width:100%;
}
a{
padding:22px 0 0 0;
cursor:auto;
@media (max-width:$screen-md){
display:block;
text-align:center;
}
@media (max-width:$screen-xs){
padding:2px 40px 0 40px;
}
}
}
a{
font-size:11px;
text-transform: uppercase;
color:#000;
display: inline-block;
@media (max-width:$screen-md){
font-size:9px;
}
&.social{
font-size:22px;
padding-top:22px;
color:#000;
display: block;
}
}
}
&.left{
li{
float:left;
}
}
&.social{
width:100%;
li{
text-align: center;
@media (max-width:$screen-md){
//width:auto;
text-align: center;
a{
text-align:center;
}
}
}
}
&.center{
li{
@media (max-width:$screen-md){
width:50%;
&:nth-child(1){
a{
text-align:right;
}
}
&:nth-child(2){
a{
text-align:left;
}
}
}
}
}
&.business{
li{
@media (max-width:$screen-md){
width:100%;
text-align:center;
}
}
}
&:last-child{
@media (max-width:$screen-md-max){
width:100%;
li{
width:100%;
a{
display: block;
text-align: center;
}
}
}
}
}
}
}
ul#menusocial{
display: inline-block;
margin: 0;
padding: 0;
position: absolute;
right: 90px;
top: 28px;
@media (max-width:$screen-md-max){
display:none;
}
li{
display: inline-block;
float:left;
a{
padding:0 15px;
font-size:2em;
&:hover,&:focus,&:visited,&:active{
background-color:rgba(255,255,255,0)
}
}
}
}
.gmap3{
margin: -10px 0 0 0;
z-index:0;
position: relative;
width: 100%;
height:1000px;
}
.gmap3 img {
max-width: none;
}
#inform-and-ask, #cookie-banner{
z-index:999999;
position:fixed;
color:#000;
}