/* fonts .ttf */

@font-face {
    font-family: Roboto-Regular;
    src: url("../fonts/roboto/Roboto-Regular.ttf");
}

@font-face {
    font-family: Roboto-LightItalic;
    src: url("../fonts/roboto/Roboto-LightItalic.ttf");
}

@font-face {
    font-family: Roboto-Light;
    src: url("../fonts/roboto/Roboto-Light.ttf");
}

@font-face {
    font-family: Roboto-Italic;
    src: url("../fonts/roboto/Roboto-Italic.ttf");
}

@font-face {
    font-family: RobotoCondensed-Regular;
    src: url("../fonts/roboto/RobotoCondensed-Regular.ttf");
}

@font-face {
    font-family: RobotoCondensed-Italic;
    src: url("../fonts/roboto/RobotoCondensed-Italic.ttf");
}

@font-face {
    font-family: RobotoCondensed-BoldItalic;
    src: url("../fonts/roboto/RobotoCondensed-BoldItalic.ttf");
}

@font-face {
    font-family: RobotoCondensed-Bold;
    src: url("../fonts/roboto/RobotoCondensed-Bold.ttf");
}

@font-face {
    font-family: Roboto-BoldItalic;
    src: url("../fonts/roboto/Roboto-BoldItalic.ttf");
}

@font-face {
    font-family: Roboto-Bold;
    src: url("../fonts/roboto/Roboto-Bold.ttf");
}

@font-face {
    font-family: Roboto-BlackItalic;
    src: url("../fonts/roboto/Roboto-BlackItalic.ttf");
}

@font-face {
    font-family: Roboto-Black;
    src: url("../fonts/roboto/Roboto-Black.ttf");
}


/* fonts .eot */

@font-face {
    font-family: Roboto-Regular;
    src: url("../fonts/roboto/Roboto-Regular.eot");
}

@font-face {
    font-family: Roboto-LightItalic;
    src: url("../fonts/roboto/Roboto-LightItalic.eot");
}

@font-face {
    font-family: Roboto-Light;
    src: url("../fonts/roboto/Roboto-Light.eot");
}

@font-face {
    font-family: Roboto-Italic;
    src: url("../fonts/roboto/Roboto-Italic.eot");
}

@font-face {
    font-family: RobotoCondensed-Regular;
    src: url("../fonts/roboto/RobotoCondensed-Regular.eot");
}

@font-face {
    font-family: RobotoCondensed-Italic;
    src: url("../fonts/roboto/RobotoCondensed-Italic.eot");
}

@font-face {
    font-family: RobotoCondensed-BoldItalic;
    src: url("../fonts/roboto/RobotoCondensed-BoldItalic.eot");
}

@font-face {
    font-family: RobotoCondensed-Bold;
    src: url("../fonts/roboto/RobotoCondensed-Bold.eot");
}

@font-face {
    font-family: Roboto-BoldItalic;
    src: url("../fonts/roboto/Roboto-BoldItalic.eot");
}

@font-face {
    font-family: Roboto-Bold;
    src: url("../fonts/roboto/Roboto-Bold.eot");
}

@font-face {
    font-family: Roboto-BlackItalic;
    src: url("../fonts/roboto/Roboto-BlackItalic.eot");
}

@font-face {
    font-family: Roboto-Black;
    src: url("../fonts/roboto/Roboto-Black.eot");
}

/* contact */

body{
    background-color:black!important;
    min-width:767px;
}


#content .breadcrumbs, #back-top, header, a.post-edit-link{
    display:none!important;
}

p, a, span, h1, h2, h3, h4, h5, h6, div{
	color:white;
	font-family:Roboto-Light;
}

.mBottom0{margin-bottom:0px;}

.mTop40{margin-top:40px;}

.mLNe36{margin-left:-36px;}


/* video */
.fullscreen-bg{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
    object-fit: cover;
} 

video{
	vertical-align:top!important;
    object-fit: cover;
}

.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
}


/* form */
.container.leForm{ 
    width: 350px;
    margin: 16px auto 0;
    display: block;
    padding: 10px 14px 50px;
    text-align: center;
}

.checkStyle{	
   float: left;
   margin-top: -20px;
   margin-left: 82px;
   color: rgba(255,255,255,0.7);
}

.leForm * { box-sizing:border-box; }

/* basic stylings ------------------------------------------ */

.container.leForm{ 
    width:795px;
    margin: 16px auto 0;
    display: block;
    padding: 10px 14px 50px;
    text-align: center;
}


/* form starting stylings ------------------------------- */

.leForm .group{ 
	position:relative; 
	margin-bottom:45px; 
}

.leForm input,
.leForm textarea{
	font-size:13px;
	padding:10px 10px 10px 5px;
	display:block;
	width:500px;
	border:none;
	border-bottom:1px solid #757575;
}

.leForm input:focus,
.leForm textarea:focus{ 
	outline:none; 
}

/* LABEL ======================================= */

.leForm label{
  color:#fff; 
  font-size:11px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}



/* active state */

.leForm input:focus ~ label, .leForm input:valid ~ label,
.leForm textarea:focus ~ label, .leForm textarea:valid ~ label{
  top:-20px;
  font-size:10px;
  color:#01a8a8;
  font-weight:900;
}

.leForm input:focus, .leForm input,
.leForm textarea:focus, .leForm textarea{
	color:#f1f1f1;
	padding-left:10px!important;
}

.leForm textarea{
    height: 240px;
    resize: none;
    margin-bottom:10px;
}


/* BOTTOM BARS ================================= */

.leForm .bar 	{ 
	position:relative; 
	display:block; 
	width:500px; 
}

.leForm .bar:before, .leForm .bar:after {
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#01a8a8;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

.leForm .bar:before {
  left:50%;
}

.leForm .bar:after {
  right:50%; 
}


/* active state */
.leForm input:focus ~ .bar:before, .leForm input:focus ~ .bar:after,
.leForm textarea:focus ~ .bar:before, .leForm textarea:focus ~ .bar:after  {
  width:50%;
}


/* HIGHLIGHTER ================================== */

.leForm .highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */

.leForm input:focus ~ .highlight,
.leForm textarea:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

.contact input, .contact textarea {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background-color: transparent;
}

.contact textarea{
  background-color: transparent;
}

@media (max-width : 320px){
	.container.leForm {
      max-width: 100%;
      margin-left:0px;
  }
}

/* form messages */

div.wpcf7-response-output.wpcf7-mail-sent-ok{
    display: block;
    margin-top: -138px;
    width: 46%;
    text-align: center;
    margin-left: 25%;
    border: 2px solid rgba(1, 168, 168, 0.4);
    color:#f1f1f1;
}

.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors{
    display: block;
    margin-top: -156px;
    width: 46%;
    text-align: center;
    margin-left: 25%;
    border: 2px solid rgba(255, 0, 0, 0.4);
    color:#f1f1f1;
}

.wpcf7-not-valid-tip{
	text-align: right;
    margin-right:25%;
    text-transform: uppercase;
    font-size: 10px!important;
    font-weight: 900;
    color:rgba(255, 0, 0, 0.6)!important;
}

.noBorder{
	border-bottom:none!important;
}


/* form style */

input[type="text"], input[type="email"]{
    background: transparent url('.././medias/input9.png') repeat center center;
    border: none;
    border-left-image: url('.././medias/border.png');
}

textarea {
    background: transparent url('.././medias/input9.png')repeat center center;
}

input[type="submit"]{
    background-color: rgba(1,202,203,0.03);
    padding: 9px 0px;	
}

input[type="submit"]:hover{
   background-color: rgba(1,202,203,0.06);
}

.allignForm{
	padding-top: 143px;
    padding-left: 109px;
}

.container.leForm{
	background-image: url(".././medias/total-form10.png");
	background-repeat:no-repeat;
	height: 862px;
}

.footer{
	background-image:none;
	background:black;
	padding:10px 0;
	display:none;
}

.footer p{
	color:white;
	text-transform:capitalize!important;
	vertical-align:baseline!important;
}

.footer:before {
    background:none;
}


/* volume slider *********************************/

/*base css*/
input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}


/*style thumb***********************************************/

/* Special styling for WebKit/Blink */

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 4px solid rgba(0,0,0,0.7);
  height: 20px;
  width: 20px;
  border-radius: 50px;
  background:rgba(100,118,120, 0.6);
  cursor: pointer;
  margin-top: -9px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}

/* All the same stuff for Firefox */

input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 4px solid rgba(0,0,0,0.7);
  height: 20px;
  width: 20px;
  border-radius: 50px;
  background:rgba(100,118,120, 0.6);
  cursor: pointer;
}

/* All the same stuff for IE */

/* Special styling for WebKit/Blink */

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 4px solid rgba(0,0,0,0.7);
  height: 20px;
  width: 20px;
  border-radius: 50px;
  background:rgba(100,118,120, 0.6);
  cursor: pointer;
  margin-top: -9px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}


/* All the same stuff for Firefox */

input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 4px solid rgba(0,0,0,0.7);
  height: 20px;
  width: 20px;
  border-radius: 50px;
  background:rgba(100,118,120, 0.6);
  cursor: pointer;
}

/* All the same stuff for IE */

input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 4px solid rgba(0,0,0,0.7);
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background:rgba(100,0,0, 0.6);
  cursor: pointer;
}

@-webkit-keyframes theFlash {
    0%   {background:rgba(100,118,120, 0.6)!important;}
    99% {background:rgba(231,0,0, 0.6)!important;}
    100% {display:none;}
}

/* Standard syntax */

@keyframes theFlash {
    0%   {background:rgba(100,118,120, 0.6)!important;}
    99% {background:rgba(231,0,0, 0.6)!important;}
    100% {display:none;}
}

.noneInput{
	-webkit-animation: theFlash 5s infinite; /* Chrome, Safari, Opera */ 
    animation: theFlash 5s infinite;
}

/*** Styling the track ***********************************************************************************/

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: rgba(1,202,203,0.7);
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: (255,255,255,0.9);
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: rgba(1,202,203,0.7);
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: rgba(1,202,203,0.7);
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: rgba(1,202,203,0.7);
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]:focus::-ms-fill-lower {
  background: rgba(1,202,203,0.7);
}

input[type=range]::-ms-fill-upper {
  background: rgba(1,202,203,0.7);
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]:focus::-ms-fill-upper {

  background: rgba(1,202,203,0.7);

}

input[type=range]::-webkit-scrollbar { 
    display: none; 
}

::-webkit-scrollbar { 
    display: none; 
}

input[type=range]:focus{
	border:none!important;
}

input[type=range]{
    -webkit-appearance: none;
    width: 26%;
    background: transparent;
    float: right;
    margin-right: 14.5%;
    margin-top: 13px;
}

.contact{
	margin-top:6%;
}


/* Alert */

.myAlert{
    border: 1px solid #757575;
    margin-left: 21px;
    width: 86%;
    margin-top: 53px;
}

.myAlert2{
    border: 1px solid rgba(255,0,0,1);
    margin-left: 21px;
    width: 86%;
    margin-top: 53px;
}


/* Media Queries*/

@media (max-width : 1199px) {
	.videoNone video{
		display:none;
	}

	.contactMain .wpb_raw_code input[type=range] {
       top: 10%;
       margin-left: 61%;
   }
}

@media (min-width:768px) and (max-width:1199px) {
	.myImg{
     background: url(".././medias/bg1-web.jpg")no-repeat!important;
     background-size:cover;
 }
}

@media(max-width : 768px) {
	.myImg{
     background: url(".././medias/bg3-web.jpg")no-repeat!important;
     background-size:cover;
 }
 /*
 .allignForm {
    padding-top: 27px!important;
}*/
/*
.container.leForm {
    height:650px;
}*/
}



@media (max-width : 991px) {
	.contactMain .wpb_raw_code input[type=range] {
       top: 9%;
       margin-left: 77%;
   }
}
/*
@media (max-width : 750px) {
	.container.leForm{
		background-image:none!important;
	}
	.allignForm {
		padding-top: 73px;
	}
}

@media (max-width : 700px) {
	.container.leForm{
		background-image:none;
	}
	.leForm input:focus ~ .bar:before, .leForm input:focus ~ .bar:after,
	.leForm textarea:focus ~ .bar:before, .leForm textarea:focus ~ .bar:after {
		width:0%;
	}
	.allignForm {
       padding-left: 0px;
   }
}

@media (max-width : 650px) {
	.contactMain .wpb_raw_code input[type=range] {
       top: 9%;
       width: 29%;
       margin-left: 58%;
   }
}
*/
/* Media Queries devices */

@media only screen and (max-device-width : 1024px)  { 
	input#vol-control, audio#audio{
		display:none;
	}
	input[type="submit"] {
       background-color: rgba(1,202,203,0.09);
       padding: 9px 0px;
   }
   input[type="submit"]:hover {
       background-color: rgba(1,202,203,0.15);
       padding: 9px 0px;
   }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) 
and (orientation : portrait) {
	.allignForm{
		margin-top:80px
	}
	.container.leForm {
       height:1000px;
   }
   form{
      margin-bottom:80px!important;
  }
}

/*
@media only screen and (max-device-width : 768px) 
and (orientation : landscape) {
	div.wpcf7-response-output.wpcf7-mail-sent-ok {
       margin-top: -90px;
       width: 79%;
       margin-left: 2%;
   }
}

@media only screen and (max-device-width : 768px) 
and (orientation : portrait) {
	div.wpcf7-response-output.wpcf7-mail-sent-ok {
       margin-top: -90px;
       width: 91%;
       margin-left: 4%;
   }
}
*/