@import url(http://fonts.googleapis.com/css?family=Oxygen:400,300);

@font-face {
      font-family: 'fontello';
      src: url('../font/fontello.eot?38762308');
      src: url('../font/fontello.eot?38762308#iefix') format('embedded-opentype'),
           url('../font/fontello.woff?38762308') format('woff'),
           url('../font/fontello.ttf?38762308') format('truetype'),
           url('../font/fontello.svg?38762308#fontello') format('svg');
      font-weight: normal;
      font-style: normal;
    }


html,body{  height:100%; margin:0px; padding:0px; font-family: 'Oxygen', sans-serif;  }
a { color:#696969;}
blockquote {  background: #f9f9f9;  border-left: 10px solid #323232;  margin: 1.5em 20px;  width:70%; margin-left:auto; margin-right:auto; margin-top:3em; margin-bottom:3em; padding: 0.5em 10px;  quotes: "\201C""\201D""\2018""\2019"; }
blockquote:before {  color: #323232;  content: open-quote;  font-size: 1.90em;  line-height: 0.1em;  margin-right: 0.25em;  vertical-align: -0.4em;}
blockquote p {  display: inline; font-style:italic; font-weight:bold; color:#323232; font-size:22px; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased;}

/* TABLEAUX */
/*
table { border: 1px solid #c4c4c4; width:100%; padding:5px; margin:0px; font-size:12px; }
tr td { border: 1px solid #c4c4c4; text-align:center; vertical-align:middle;}
table tbody tr:nth-child(even) {  background: #e7e7e7; }
table tbody tr:hover { background-color:#323232; color:#ffffff;}
*/

.clear {clear:both;}

/* Publi HVA  --------------------------------------------------------------------------------------------------------------------------------------   */

.HVAContainer { max-width:1200px;   display:block; align-content:center; text-align:center; margin-left:auto; margin-right:auto; }
.HVAProductBox { width:300px; height:440px; background-color:#ebedec; text-align:center; align-content:center; padding:10px; margin:20px; float:left; }
.HVAProductBox img { max-width:250px; height:auto; }
.HVAProductBox h2 { font-size:16px; font-weight:bold; color:#1b1b1a; text-align:left; }
.HVAProductBoxTitle { font-size:14px; font-weight:normal; color:#1b1b1a; text-align:left; }
.HVAContainer a { text-decoration:none;  color:#1b1b1a; }


/* Bouton 3AS  --------------------------------------------------------------------------------------------------------------------------------------   */
.btn3AS {
  background: #00a3ef;
  background-image: -webkit-linear-gradient(top, #00a3ef, #00577a);
  background-image: -moz-linear-gradient(top, #00a3ef, #00577a);
  background-image: -ms-linear-gradient(top, #00a3ef, #00577a);
  background-image: -o-linear-gradient(top, #00a3ef, #00577a);
  background-image: linear-gradient(to bottom, #00a3ef, #00577a);
  -webkit-border-radius: 15;
  -moz-border-radius: 15;
  border-radius: 15px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn3AS:hover {
  background: #f97f0d;
  background-image: -webkit-linear-gradient(top, #f97f0d, #f97f0d);
  background-image: -moz-linear-gradient(top, #f97f0d, #f97f0d);
  background-image: -ms-linear-gradient(top, #f97f0d, #f97f0d);
  background-image: -o-linear-gradient(top, #f97f0d, #f97f0d);
  background-image: linear-gradient(to bottom, #f97f0d, #f97f0d);
  text-decoration: none;
}
/* Bouton 3AS  --------------------------------------------------------------------------------------------------------------------------------------   */


.arrow-icon
{
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* You can be more comfortable with increased icons size */
   font-size: 100px; 
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.banner-728x90 { margin-bottom:40px; margin-top:40px; max-width:728px; margin-left:auto; margin-right:auto;   }
.mega-banner img {max-width: 100%; height: auto; }

 /** ####### PRELOADER #################################################################################### **/
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../img/Preloader_1.gif) center no-repeat #fff;
}

 /** ####### NAVBAR #################################################################################### **/
.navbar { background:#323232; width:100%; height:3em; z-index:10000; opacity: 1; filter: alpha(opacity=100); box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);}
.navbarfix { position:fixed; }
.navbar-container { width:100%; left:50%; max-width:1300px; padding-left:5%; padding-right:5%; margin-left:auto; margin-right:auto; display:block;  }
.menu a {text-decoration:none; font-size: 15px; font-weight: 700; line-height: 50px; text-transform:uppercase; }
.navbar .menu { float:left;}
.navbar .menu ul { list-style-type:none; line-height:50px; margin:0px; padding:0px; }
.navbar .menu li { display:inline-block; padding:0px; margin-left:10px; }
.navbar .menu li a { color:#FFFFFF;}
.navbar .menu li a:hover { color:#9a9a9a;}
.navbar .logo-container { padding-top:9px; padding-right:20px; float:left; }

 /** ####### HEADER #################################################################################### **/
.header-container {height: 100%; overflow:hidden;}
.bg-img {background: no-repeat center fixed; -webkit-background-size: cover;  background-size: cover; height: 100%; } 
.logo { position:absolute; z-index:100; max-width:150px; left:50%; margin-left:-75px; top:1em; text-align:center;  } 
.logo img { max-width:100%; }
.call2read { z-index:100; padding:10px; border:solid 1px #fff; color:#000000; display:inline-block; text-transform:uppercase; font-family: 'Open Sans Condensed', sans-serif; font-weight:400; font-size:1.5em;}
.call2read a { text-decoration:none; color:#fff; margin-top:20px;}
.h1-container { background:rgba(0,0,0,0.50); margin-bottom:20px; padding-top:15px; }
.titre-container { position:absolute; z-index:100; width:100%; padding:0px; margin:0px; text-align:center; height:40%; bottom:0px; }
.titre-container h1 {  position:relative; font-family: 'Open Sans Condensed', sans-serif; font-weight:700; line-height:1em; font-size:4em; text-align:center; text-transform:uppercase; color:#ffffff; display:inline-block; padding:10px; padding-left:15px; padding-right:15px; margin:0px; }
.titre-container h1, .call2read {
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


.subline { font-style:italic; font-size:2em; text-align:center; margin:0px; padding:0px; margin-top:40px;}
.copyrights { font-style:italic; color:#4c4c4c; text-align:center; font-size:1em;}
.gradient {opacity: 0.9; filter: alpha(opacity=90); height:50%; background-image:url(../img/gradient.png); background-position:top; background-repeat:repeat-x; }
.dust01 { position:absolute; width:100%; height:100%; /* background-image:url(../img/dust01.png); */ background-position:top left; background-repeat:repeat; background-size:auto; }
.dust02 { position:absolute; width:100%; height:100%;  /* background-image:url(../img/dust02.png); */ background-position:center; background-repeat:repeat; background-size:auto; }
.dotted { position:absolute; width:100%; height:100%; z-index:30; background-image:url(../img/dotted.png); background-position:top; background-repeat:repeat; background-size:auto; }
.screen { position:absolute; width:100%; height:100%; z-index:30; background-image:url(../img/screen.png); background-position:top; background-repeat:repeat; background-size:auto; }
.lifestyle {position:absolute; z-index:50; top:5%; left:5%;}
.lifestyle img { max-width:350px;}
.social-container { text-align:center; margin:auto; margin-top:20px;}
.social { float:left;}

/** ####### HEADER IMAGE VERTICALE #################################################################################### **/
.header-container .col1 { width:50%; height:100%; float:left;}
.header-container .col2 { width:50%; height:100%; float:left; text-align:center; padding-top:10%; color:rgba(0,0,0,1.00); vertical-align:middle; text-transform:uppercase;}
.header-container .col2 h1 {font-family: 'Open Sans Condensed', sans-serif; font-weight:700; line-height:1em; font-size:4em; }
.header-container .col2 .logo2 { text-align:center;}
.header-container a { text-decoration:none;}
 
/** ####### CONTENT TEXT #################################################################################### **/
.content-text { width:90%; left:50%; max-width:1300px; padding-left:5%; padding-right:5%; margin-left:auto; margin-right:auto; display:block; color:#696969; font-family: 'Oxygen', sans-serif;  font-style:normal; font-size:1.2em; font-weight:300;}
.content-text1 { margin-top:20px;}
.content-text1 > div:first-child { font-size: 1.3em; }
.content-text1 > p:first-child { font-size:1.3em;}
.content-video { width:100%; left:50%; max-width:1300px; margin-left:auto; margin-right:auto; display:block; color:#696969; font-family: 'Oxygen', sans-serif;  font-style:normal; font-size:1.2em; font-weight:300;}
/*
.content-text table { border: 1px solid #c4c4c4; width:100%; padding:5px; margin:0px; font-size:12px; }
.content-text tr td { border: 1px solid #c4c4c4; text-align:center; vertical-align:middle;}
.content-text table tbody tr:nth-child(even) {  background: #e7e7e7; }
.content-text table tbody tr:hover { background-color:#323232; color:#ffffff;}
*/
.content-text img { max-width:100%; height:auto; margin-top:10px; margin-bottom:10px;}


 /** ####### IMAGE 2 PARALLAX #################################################################################### **/
.image2-container { width:100%; height:50em; margin-bottom:50px; margin-top:50px; overflow:hidden; background: no-repeat center fixed;  -webkit-background-size: cover;  background-size: cover;    
    -webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
    -moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
    box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8); }
.image2-caption { font-weight:bold; color:#ffffff; background:#000000; padding:10px; font-family: 'Oxygen', sans-serif; text-align:center; font-style:italic; font-size:1.5em; -webkit-font-smoothing: antialiased; width:100%; display:block;}

 /** ####### VIDEO #################################################################################### **/
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin-bottom:2em; margin-top:2em; } 
.video-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  }
.titre-video {padding:5px; padding-left:10px; padding-right:10px; margin-top:20px; font-size:0.8em; text-transform:uppercase; font-weight:bold; color:#FFFFFF; background-color:#d61216; display:inline-block; }

 /** ####### IMAGE GALERIE #################################################################################### **/
#image-galerie { margin-top:20px; margin-bottom:20px; position:relative;}
#image-galerie .mask2 { position:absolute; opacity: 0; filter: alpha(opacity=0); background-color:#323232; z-index:10; width:100%; height:100%; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;}
#image-galerie .mask { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;
	position:absolute; opacity: 0; filter: alpha(opacity=0);
    z-index:10; width:100%; height:100%;
    background: -webkit-linear-gradient(top, rgba(50,50,50,0), rgba(0,0,0,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, rgba(50,50,50,0), rgba(0,0,0,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom, rgba(50,50,50,0), rgba(0,0,0,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(0,0,0,1)); /* Standard syntax (must be last) */
}
#image-galerie .mask-caption { position:absolute; z-index:15; color:#ffffff; width:90%; padding:20px; bottom:0px; opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -ms-transition: all 0.4s linear; transition: all 0.4s linear; }
#image-galerie2 img { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;}
#image-galerie2:hover .mask { opacity: 1; filter: alpha(opacity=100); }
#image-galerie .mask-icon { position:absolute; z-index:20; text-align:center; width:100%; height:100%; background-image:url(/sites/all/themes/grandangle/img/zoom.png); background-repeat:no-repeat; background-position:center; background-size:auto; opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -ms-transition: all 0.4s linear; transition: all 0.4s linear;}
#image-galerie2:hover #main-img { -webkit-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -ms-transform: scale(1.1,1.1); transform: scale(1.1,1.1); }
#image-galerie2:hover .mask-caption {  opacity: 1; filter: alpha(opacity=100); }
#image-galerie2:hover .mask-icon {  opacity: 1; filter: alpha(opacity=100); }

 /** ####### PDF #################################################################################### **/
.pdf-container { margin-bottom:20px; margin-top:20px;}
.pdf-container .adobe-dl { margin-left:20px;}
.pdf-container .file { color:#000000;}
.pdf-container .file:hover { text-decoration:none;}


 /** ####### ANIMATION 360 #################################################################################### **/
.description-360 { color:#AAAAAA; font-size:0.8em; margin-bottom:10px; margin-top:5px; font-style:italic;}

 /** ####### CALL 2 ACTION #################################################################################### **/
.btn-call2action { margin-top:20px; margin-bottom:20px; text-align:center; }

 /** ####### TAGS #################################################################################### **/
.tags .field-label { display:none;}
.tags div { display:inline-block; margin-bottom:9px; margin-top:10px; }
.tags a {font-size:14px; line-height:10px;  font-weight:lighter; border:solid 1px #c4c4c4; padding:3px; color:#c4c4c4; margin-right:5px; text-decoration:none; text-transform:capitalize;  -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;}
.tags a:hover { color:#ffffff; background-color:#c4c4c4;  }

/** ####### AFFICHAGE COMMENTAIRES ################################################################################ **/

#edit-comment-body-und-0-format, #edit-subject { display:none;}

.link-wrapper { margin-left:10px; margin-top:20px; margin-bottom:20px;}
.link-wrapper a { color:#1e1e1e; text-decoration:none; font-weight:bold;}
.link-wrapper a:hover { color:#d61216;}
.comment-wrapper h3, .comment-wrapper .permalink, .comment-wrapper .new, .comment-wrapper .comment-reply  { display:none;}
.comment ul.links.inline { display:none;}
.comment-wrapper h2  { font-size:14px; font-weight:bold; text-transform:uppercase; background-color:#d61216; color:#ffffff; padding:3px; display:inline-block; padding-left:5px; padding-right:5px; margin-bottom:10px;}
.comment-wrapper .comment { padding-bottom:25px; padding-top:25px; border-bottom:solid 1px #000000;}
.comment-wrapper .user-picture { float:left; margin-right:10px;  }
.comment-wrapper .user-picture img { max-height:20px; max-width:20px;  }
.comment-wrapper .submitted { border-left:solid 0px #000000; margin-bottom:5px; font-size:16px; color:#636363; }
.comment-wrapper .content { border-left:solid 0px #000000; padding-left:0px;  }
.comment-wrapper .field-items p { margin:0px;}

.comment-form .text-format-wrapper .form-wrapper, .comment-form .form-type-item, label { display:none;}
.comment-form .form-submit {
  -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;
  background: #ffffff;
  text-transform:uppercase;
  font-weight:bold;
  border: solid 0px #d31219;
  color: #d61216;
  font-size: 16px;
  padding: 5px 5px 5px 5px;
  margin-top:10px;
  text-decoration: none;
  cursor:pointer;
}

.comment-form .form-submit:hover {
  background: #d31219;
  color:#ffffff;
  text-decoration: none;
}

/** ####### DERNIERES ACTU GRAND ANGLE ################################################################################ **/
.related-news { background-color:#323232; margin-top:40px; margin-bottom:0px; padding-bottom:10px; overflow:hidden; padding:0px; display:block; width:100%;}
.related-news .views-row .views-field-title { position:absolute; z-index:10; bottom:40px; left:40px; padding:5px; background-color:#d61216; font-size:0.8em; font-weight:400; line-height:0.8em; text-transform:uppercase;}
.related-news .views-row .views-field-title a { color:#fff; text-decoration:none;}
.related-news .views-row img {border:solid 1px #323232;}
.related-news .views-row img:hover {border:solid 1px #c4c4c4;}
.related-news-titre { margin-top:20px; margin-bottom:10px; color:#fff; font-size:1.3em; font-weight:600; text-transform:uppercase;  }
#owl-demo .item { padding: 0px 0px; margin: 20px; color: #FFF; overflow:hidden; }

/** ####### FOOTER ################################################################################ **/
.footer { position:relative; width:100%; padding:0px; margin:0px; color:#fff; text-align:center; overflow:hidden;
    -webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
    -moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
    box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
	}
.slogan { text-transform:uppercase; font-size:1.5em; color:rgba(0,0,0,1.00); margin-top:20px; margin-bottom:10px; width:100%; text-align:center; }	
.slogan2 { font-size:1.2em; color:rgba(0,0,0,1.00);  width:100%; text-align:center; margin-bottom:20px; }	
.footer-logo { text-align:center;  }
.footer-logo img { max-width:30%; margin-top:40px; height: auto;}
.couv { margin-bottom:30px; text-align:center;}
.couv img {height: auto; max-width:35%}
.footer .background { position:absolute; z-index:-1; background-color:#e2e2e2; width:100%; height:100%;}
.footer .background img {	max-width: 100%; height: auto;}
.footer .store-icons img { max-width:170px;}

.footer .footer-lifestyle { margin:0px; padding:0px; position:relative; }
.footer .footer-lifestyle .bg-footer img { width:100%; height:auto; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;}
.footer .footer-lifestyle .title { position:absolute; z-index:9; left:50%; margin-left:-250px; top:25%;  }
.footer .footer-lifestyle .title .lifestyle-icon {max-width:500px; }
.footer .footer-lifestyle .mask-blanc { width:100%; height:100%; z-index:2; position:absolute; background-color:rgba(255,255,255,0.80); -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;}
.footer .footer-lifestyle:hover .mask-blanc {background-color:rgba(255,255,255,0.10);  }
.footer .footer-lifestyle:hover .bg-footer img { transform:scale(1.1,1.1); -webkit-transition: all 4s linear; -moz-transition: all 4s linear; -o-transition: all 4s linear; -ms-transition: all 4s linear; transition: all 4s linear;}
.plus-btn { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;}
.plus-btn:hover { transform:scale(0.8,0.8); }


@media screen and (max-width: 800px) {
	.mega-banner { display:none;  }
	.titre-container h1 {   font-size:2em;}

}

@media screen and (min-width: 1001px) {
	.menu-btn { display:none;  }
	.menu-mobile .menu  { display:none;  }
	.navbar .menu { display:block;  }
}

@media screen and (max-width: 1000px) {
	.menu-btn { display:block;  }
	.navbar .menu { display:none;  }
}
