/*
* ..::Tatos::..
* Croisière Bleue
* KNACSS + PluXML
* ----------------
*/
/* ----------------------------- */
/* TK => Pluxml + design  */
/* ----------------------------- */
.up {text-transform: uppercase;}
@media (min-width: 961px) {
  .tiny-visible {
    display: none;
  }
}

@media (max-width: 960px) {
  .tiny-visible {
    display: none;
  }
}

@media (max-width: 640px) {
	.tiny-visible {
    display: block !important; margin: 0 auto;
  }
	.tiny-hidden {
		    display: none !important;
	}
}
/* ---------- Home & Cat ---------- */
#home .bkgtrans {margin-bottom: 0 !important;}
.bigboxart {
  max-width: 100%;
  margin-bottom: 2rem;
}

/* clearfix */
.bigboxart:after {
  content: '';
  display: block;
  clear: both;
}

.box-sizer,
.boxart {
  width: 33%;
}
.boxart {padding: 1rem;}
@media (max-width: 960px) {
  .box-sizer,
  .boxart {
    width: 50%;
  }
}
@media (max-width: 640px) {
  .box-sizer,
  .boxart {
    width: 100%;
  }
}
#owl-blog img {max-height: 250px; overflow: hidden;}
/* ------------------------------------------ */
#filters {text-align: center;}
#filters button,  button.intro {
	background:rgba(25, 25, 25, 0.6) none repeat scroll 0% 0%;
	color: #fff;
	font-family: "Black Ops One",cursive; text-transform: uppercase;
	margin-bottom: .5rem;
}
#filters button:hover, button.intro:hover {
	color: #258fd6;
	background: #FFF;
}

/* ------ Colonnes ------ */
.columns2 {
  margin-top: 2rem;
  -webkit-columns: 2;
     -moz-columns: 2;
          columns: 2;
}
.columns3 {
  margin-top: 2rem;
  -webkit-columns: 3;
     -moz-columns: 3;
          columns: 3;
}
.columns2, .columns3 {
  -webkit-column-rule: 1px dotted #CCC;
  -moz-column-rule: 1px dotted #CCC;
  column-rule: 1px dotted #CCC;
  -webkit-column-gap : 3rem;
  -moz-column-gap : 3rem;
  column-gap : 3rem;
  text-align: justify;
}

@media (max-width: 960px) {
  .columns2, .columns3 {
  -webkit-columns: 1;
  -moz-columns: 1;
  columns: 1;
  -webkit-column-rule: none;
  -moz-column-rule: none;
  column-rule: none;
  -webkit-column-gap : 0;
  -moz-column-gap : 0;
  column-gap : 0;
  text-align: justify;
  }
} 
/* ------------------------------------------ */
#logo {animation-delay: 1.5s;}
#menu li a:hover {animation: flip 1s;}
#pageh1 {animation-delay: 2s; color: #FFF;}
#slogan1 {animation-delay: 2s;}
#slogan2 {animation-delay: 2.5s;}
#balise {animation-delay: 3s;}
.wow:first-child {
  visibility: hidden;
}
.dfheight h1, .dfheight h2, nav {font-family: 'Black Ops One', cursive;}

/* ------- Div Full & Mid height -------- */
/* (combiné à backgroundSmlideshoxw */
/*      pour titre pleine page)     */
html, body {
  padding : 0;
  margin : 0;
  height : 100%;
}
.dfheight {height: 100%}
.dfheight .titre {
  position: absolute;
  width: 100%;
  text-align: center;
  color: #FFF !important;
  top: 40%;
  padding: 10px 20px;
  font-weight: 300;
  text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
}
.dmheight {height: 50%; position: relative;}
.dmheight .titre {
  position: absolute;
  width: 100%;
  text-align: center;
  color: #FFF !important;
  top: 75%;
  padding: 10px 20px;
  font-weight: 300;
  text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
}
.dfheight h1, #pageh1 h1 {text-transform: uppercase; text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.9);}
.dfheight h2 {text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.9);}
@media (max-width: 960px) {
  .dfheight h1, #pageh1 h1 {
  font-size: 2.8rem;
  }
  .dfheight h2 {
  font-size: 2.1rem;
  }
}

@media (max-width: 640px) {
  .dfheight h1, #pageh1 h1 {
  font-size: 2.5rem;
  }
  .dfheight h2 {
  font-size: 1.8rem;
  }
}

@media (max-width: 320px) {
  .dfheight h1, #pageh1 h1 {
  font-size: 2rem;
  }
  .dfheight h2 {
  font-size: 1.3rem;
  }
}


/* ---------- Divers ---------- */
img {height: auto !important;}
a {
  color: #FA832A;
  text-decoration: none;
}
a:active,
a:focus,
a:hover {
  color: #258fd6;
  text-decoration: underline;
}
a img {border: 0;}
/* ---------- Tel ---------- */
a.bultel span{ 
  
  position: absolute;
  color:#fff; 
  background:rgba(0, 0, 0, 0.9); 
  padding:2rem;
  border-radius:.5rem;  
  transform:scale(0) rotate(-180deg);
  transition:all .25s; 
  opacity:0;
}          
a.bultel:hover span, a.bultel:focus span { 
    transform:scale(1) rotate(0);
    opacity:1;
    font-weight: bold;
}         

.tel1 {text-decoration: none; display: none}
.tel2 {text-decoration: none; display: inline-block;}

@media (max-width: 640px) {
  .tel1 {text-decoration: none; display: inline-block; margin: 0; padding: 0}
  .tel2 {display: none}
}

/* ---------- TXTTronk ---------- */
.collapse {cursor: pointer}
.txttronk {padding: 0; z-index: 5;}
.txttronk2 {padding: 0;}

/* ---------- 404 ---------- */
.error-center {
  text-align: center;
}
.error-404 {
  margin: 0;
  font-size: 200px;
  line-height: 200px;
  font-weight: bold;
}
.error-404 span, .error-center h2, .error-center p {
  text-shadow: 1px 5px 7px rgba(0, 0, 0, 1); color: #FFF;}

/* ---------- Haut de page ---------- */
#hdp {
  position: fixed;
  display: none;
  width: 60px;
  right: 20px;
  bottom: 50px;
  cursor: pointer;
  z-index: 1
}

#hdp img {
  opacity: 0.4;
  filter:alpha(opacity=40);
}
#hdp img:hover {
  opacity: 1.0;
  filter:alpha(opacity=100);
}

/* ---------- NAV ---------- */
.nav {
  background: rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%;
  text-align: center;
  padding: 1.1em 0;
  max-height: 5rem;
	z-index: 1;
}
.nav .menu.expanded li:hover {
  border-bottom: 5px groove #FFF;
}
.nav a, .nav a:hover {
  color: #FFF;
}
#hamburger {display: none;}

.menu {
  font-size: 0rem;
  margin: 0;
  padding-left: 0;
}
.menu li {
  display: inline-block;
  font-size: 1.4rem;
  list-style-type: none;
  margin-left: 1rem;
}
.menu li:first-child {
  margin-left: 0;
}
.menu li.active a {
  color: #FFF;
}
.menu.vertical li {
  display: block;
  margin-left: 0;
}
.menu.expanded li {
  margin-left: 0;
}
.menu.expanded li:hover {
  
}
.menu.expanded li a {
  display: block;
  padding: 0 .7rem;
}
.menu.expanded li a:hover {
  text-decoration: none;
}
.menu.breadcrumb li + li:before,
.menu.expanded.breadcrumb > li + li a:before {
  content: "/";
}
.menu.breadcrumb li + li:before,
.menu.expanded.breadcrumb > li + li:before,
.menu.expanded.breadcrumb > li + li a:before {
  margin-right: .7rem;
}
.menu.expanded.breadcrumb > li + li:before {
  content: none;
}
.menu.expanded li.active a,
.menu.expanded li.active:hover {
  background-color: #258fd6;
  color: #fff;
}

@media (max-width: 767px) {
  .menu.expanded {display: none;}
  #hamburger {display: block; text-align: center;}
  .nav {padding: 0;}
  .menuresp {padding-left: 0; background: rgba(0, 0, 0, 0.8) none repeat scroll 0% 0%;}
  .menuresp li {
  display: block;
  font-size: 1.4rem;
  list-style-type: none;
  padding: 1rem 0;
  border-top: 2px solid #FFF;
  text-shadow: 1px 2px 2px #000000;
  }
}

/* ---------- HEADER ---------- */

header a {color: #258FD6;}
header a:hover {color: #333;}
.rel {position: relative;}
.headerAccueil {
  position: absolute;
  width: 100%;
  z-index: 5;
  top: 0;
}
.header {
  width: 100%;
  height: 320px;
  z-index: 5;
  top: 0;
}

#ikones {padding-top: 3rem; float: right;}
@media (max-width: 370px) {
  #ikones {padding-top: 0; float: none; width: 100%; text-align: center;}
  .header {height: 200px;}
}
/* ------------------------------------------ */

/* ---------- FOOTER ---------- */

.footer {
  border-top: 3px solid #444;
  padding: 2rem 0px;
  text-align: center;
  background: #4C4C4C;
  color: #FFF;
}

.footer .collapse h2 {margin-bottom: 0;}
#sign {font-size: .8rem;}
/* ---------- ACCUEIL ---------- */
#accueil h2 {text-transform: uppercase; text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.9); color: #FFF;}
.blanc {background: rgba(255, 255, 255, 1) none repeat scroll 0% 0%; margin-bottom: 3rem !important; padding: 2rem; color: #444;}
.bkgtrans {background: rgba(25, 25, 25, 0.6) none repeat scroll 0% 0%; color: #FFF; margin-bottom: 3rem !important; padding: 2rem;}
.espace {height: 5rem;}
 .TKtitre {
  width: 100%;
  position: absolute;
  top: 40%;
  white-space: nowrap;
  overflow: hidden;
  font-family: 'Black Ops One', cursive;
  font-size: 2em;  
  text-overflow: ellipsis;
  text-shadow: 1px 1px 0 black;
  color: #FFF; text-align: center;
}
#owl-actu p {
	color: #FFF;
}
#owl-actu a:hover {text-decoration: none;}


.customNavigation1{
  position: absolute;
  bottom:50%; 
  cursor: pointer;
}
.customNavigation2{
  position: absolute;
  bottom:50%;
  cursor: pointer;
}
.customNavigation1 {left:-5rem; margin-bottom: -45px;}
.customNavigation2 {right: -5rem; margin-bottom: -45px;}
  @media (max-width: 1370px) {
    .customNavigation1 {left: -1rem;}
    .customNavigation2 {right: -1rem;}
  }

  @media (max-width: 640px) {
    .customNavigation1 {margin-bottom: -22px;}
    .customNavigation2 {margin-bottom: -22px;}
  }

  @media (max-width: 320px) {
  
  }
/* ---------- OWL egalement ---------- */
#owl-egalement {background: rgba(34, 34, 34, 0.8) none repeat scroll 0% 0%;}
/* ---------- PluXML ---------- */
.more {display: none;}
#blog small {position: absolute;bottom: 1rem; width: 100%;}
#blog h1, #kat h1 {font-size: 2.5rem;}
@media (max-width: 960px) {
	#blog h1, #kat h1 {font-size: 2.2rem;}
}

@media (max-width: 640px) {
	#blog h1, #kat h1 {font-size: 2rem;}
}

@media (max-width: 320px) {
  #blog h1, #kat h1 {font-size: 1.8rem;}
}
/* ------------------------------------------ */
#blog h1 a, #blog small a, #kat h1 a {color: #FFF;}
#blog .article {position: relative;}
.artinfos {font-family: "Black Ops One",cursive; text-transform: uppercase; text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.9); text-align: center; color: #FFF; margin-bottom: 1rem;}
.container {
  margin: 0 auto;
  max-width: 1280px;
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
}
.main {
}
.repertory {
  margin-top: 2rem;
}
.article header h1 {
  margin: 2rem 0px 1rem;
}
.article header h1 a {

}
.article header h1 a:hover {

}
#form {
  width: 65%;
  margin: 0 auto;
}
#envoyer {max-width: 19rem; margin: 2rem auto 0;}
@media (min-width: 961px) {
  
}

@media (max-width: 960px) {

}

@media (max-width: 640px) {
#form {width: 100%}
}

@media (max-width: 320px) {
  
}
/* ------------------------------------------ */
#id_name, #id_mail, #id_site, #id_content, #id_rep {color: #444 !important;}
.comment {
  background-image: url('../img/user.png');
  background-repeat: no-repeat;
  margin-bottom: 2rem;
  padding-left: 4rem;
}
.comment blockquote {
  margin: 0;
}
.nbcom {
  background-color: #258fd6;
  color: #fff;
  padding: .2rem .3rem;
}
.nbcom:hover {
  background-color: #3a6c96;
  color: #fff;
  text-decoration: none;
}
.capcha-letter,
.capcha-word {
  font-weight: bold;
}
.capcha-word {
  background: rgba(25, 25, 25, 0.6) none repeat scroll 0% 0%;
  letter-spacing: 0.3em;
  padding: .525rem .7rem;
}
.article,
.pagination {
  margin-bottom: 1rem;
}
.article.static {
  margin-bottom: 0;
}
.pagination a {
  background-color: #258fd6;
  color: #fff;
  padding: .525rem .7rem;
}
.pagination a:hover {
  background-color: #3a6c96;
  color: #fff;
  text-decoration: none;
}
.pagination span:first-letter,
.pagination a:first-letter {
  text-transform: uppercase;
}
.p_first,
.p_prev,
.p_current,
.p_next,
.p_last {
  display: inline-block;
}
.aside {
  padding-left: 3rem;
}
@media (max-width: 768px) {
  .aside {
    margin-top: 2rem;
    padding-left: 1rem;
  }
}
.aside h3 {
  font-size: 1rem;
  font-weight: bold;
  margin-top: 2rem;
  text-transform: uppercase;
}
.aside ul {
  margin: 0;
}
.aside li:first-letter {
  text-transform: uppercase;
}
.aside ul.tag-list {
  list-style-type: none;
  padding-left: 0;
}
.aside ul.tag-list li {
  display: inline;
  margin-right: 1rem;
}
.aside ul.tag-list li.tag-size-1 {
  font-size: 1rem;
}
.aside ul.tag-list li.tag-size-2 {
  font-size: 1.1rem;
}
.aside ul.tag-list li.tag-size-3 {
  font-size: 1.2rem;
}
.aside ul.tag-list li.tag-size-4 {
  font-size: 1.3rem;
}
.aside ul.tag-list li.tag-size-5 {
  font-size: 1.4rem;
}
.aside ul.tag-list li.tag-size-6 {
  font-size: 1.5rem;
}
.aside ul.tag-list li.tag-size-7 {
  font-size: 1.6rem;
}
.aside ul.tag-list li.tag-size-8 {
  font-size: 1.7rem;
}
.aside ul.tag-list li.tag-size-9 {
  font-size: 1.8rem
}
.aside ul.tag-list li.tag-size-10 {
  font-size: 1.9rem;
}
.aside ul.tag-list li.tag-size-max {
  font-size: 2rem;
}

/* FORM
------------------------------ */

form .col {
  margin-bottom: 1rem;
}
form.inline-form button,
form.inline-form input,
form.inline-form label,
form.inline-form select,
form.inline-form textarea {
  display: inline-block;
  width: auto;
}
form .col.label-centered {
  margin-bottom: 0;
}
form .label-centered label {
  padding-top: .3rem;
}
fieldset {
  border: none;
  padding: 0;
}
legend {
  margin-bottom: 1rem;
  padding: 0;
}
label {
  display: block;
  padding-bottom: .3rem;
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
button,
input,
select,
textarea {
  border: 1px solid #bbb;
  outline: none;
  padding: .35rem .4rem;
  width: 100%;
}
textarea {
  height: auto;
  overflow: auto;
}
select {
  padding-left: .2rem;
  padding-right: 0;
}
optgroup {
  font-weight: bold;
}
input:focus,
select:focus,
textarea:focus {
  border: 1px solid #258fd6;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  background-color: #777;
  border-color: transparent;
  color: #fff;
  cursor: pointer;
  padding-left: .7rem;
  padding-right: .7rem;
  width: auto;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  background-color: #616161;
}
button[disabled],
input[disabled],
select[disabled],
textarea[disabled],
button[disabled]:hover,
input[disabled]:hover,
select[disabled]:hover,
textarea[disabled]:hover {
  background-color: #ddd;
  color: #777;
  cursor: not-allowed;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input[type="checkbox"],
input[type="radio"] {
  height: auto;
  padding: 0;
  width: auto;
}
input[type="file"] {
  border: none;
  height: auto;
  padding: 0;
}
button.blue,
input[type="button"].blue,
input[type="reset"].blue,
input[type="submit"].blue {
  background-color: #258fd6;
  color: #eee;
}
button.blue:hover,
input[type="button"].blue:hover,
input[type="reset"].blue:hover,
input[type="submit"].blue:hover {
  background-color: #1f77b1;
}
button.green,
input[type="button"].green,
input[type="reset"].green,
input[type="submit"].green {
  background-color: #239c56;
  color: #eee;
}
button.green:hover,
input[type="button"].green:hover,
input[type="reset"].green:hover,
input[type="submit"].green:hover {
  background-color: #1c7943;
}
button.orange,
input[type="button"].orange,
input[type="reset"].orange,
input[type="submit"].orange {
  background-color: #da7418;
  color: #eee;
}
button.orange:hover,
input[type="button"].orange:hover,
input[type="reset"].orange:hover,
input[type="submit"].orange:hover {
  background-color: #b46014;
}
button.red,
input[type="button"].red,
input[type="reset"].red,
input[type="submit"].red {
  background-color: #e43d29;
  color: #eee;
}
button.red:hover,
input[type="button"].red:hover,
input[type="reset"].red:hover,
input[type="submit"].red:hover {
  background-color: #bc2818;
}