/*MAIN*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: #fff;
    color: #1f1f1f;
    font-family: 'Ubuntu', sans-serif, 'Arial', 'Verdana';
    font-weight: 300;
    font-size: 20px;;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    height: 100%;
}

body {
    position:relative; 
    min-height: 100vh;
}

#container {
    min-height: 100%;
    overflow: auto;
    position: relative;
}

h1 {
    margin: 0;
    color: #fff;
    font-size: 220%;
    letter-spacing: 1px;
}

h2 {
    text-align: left;
    color: #fff;
}

h3 {
    margin: 0;
    text-align: center;
    color: black;
}

p, ul, ol {
    font-family: 'Ubuntu', sans-serif;
    font-size: 90%;
    line-height: 150%;
    word-spacing: 5px;
    letter-spacing: 0px;
}

.row {
    max-width: 1140px;
    margin: 0 auto;
}

section {
    margin: 50px auto;
}

/*!!!MAIN*/

/*======================================================================================================================================================*/

/*NAVIGATION*/

.nav_back {
    background-color: black;
}

.logo{
    margin-top: 30px;
    margin-bottom: 28px;
    height: 35px;
    width: auto;
    float: left;
}

.main_nav {
    float: right;
    list-style: none;
    margin-top: 30px;
}

.main_nav li {
    display: inline-block;
    margin-left: 35px;
}
    
.main_nav li :link,
.main_nav li :visited{
    font-size: 75%;
    text-decoration: none;
    color: #d8d8d8;
    font-weight: 400;
    letter-spacing: 0px;
}

.main_nav li :hover {
    transition: color 0.4s;
    color:#909090;
    text-decoration: none;
}

.active {
    border-bottom: 2px solid #FECC00;
}

.language {
    float: right;
    margin-left: 35px;
    font-size: 85%;
    font-weight: 400;
    letter-spacing: 0px;
}

.language li {
    margin-left: 35px;
    display: inline-block;
    font-size: 75%;
    font-weight: 400;
    letter-spacing: 0px;
}

.language li :link,
.language li :visited
 {
    color: #d8d8d8;
    text-decoration: none;
}

.language li :hover {
    transition: color 0.4s;
    color:#909090;
}

.what_is_restorfx {
    text-decoration: none;
    padding: 5px 0 3px 0;
    background-color: #2a2a2a;
}

.what_is_restorfx_link {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
}

.youtube_icon {
    padding-left: 10px;
    padding-top: 8px;
    height: 22px;
    
}

.bottom_yellow_line {
    border-bottom: 1px solid #FECC00;
}
/*NAVIGATION*/

/*======================================================================================================================================================*/

/*HEADER*/
#slider { /*положение слайдера*/
    position: relative;
	text-align: center;
}

#slider{ /*центровка слайдера*/
	margin: 0px auto;
}

#slides article{ /*все изображения справа друг от доруга*/
	width: 4.76190%;
	float: left;
}

#slides .image{ /*устанавливает общий размер блока с изображениями*/
	width: 2100%;   
	line-height: 0;
}

#overflow{ /*сркывает все, что находится за пределами этого блока*/
	width: 100%;
	overflow: hidden;
}

article img{ /*размер изображений слайдера*/
	width: 100%;
    height: 100%;
}

#desktop:checked ~ #slider{ /*размер всего слайдера*/
	max-width: 100%; /*максимальнная длинна*/
}

/*настройка переключения и положения для левой стрелки*/
/*если свич1-5 активны, то идет обращение к лейблу из блока с id контролс*/
/*#switch1:checked ~ #controls label:nth-child(3), 
#switch2:checked ~ #controls label:nth-child(1),
#switch3:checked ~ #controls label:nth-child(2) {
	background: url('images/previous.png') no-repeat;
	float: left;
	margin: 0 0 0 0;
	display: block;
	height: 68px;
	width: 68px;
}


#switch1:checked ~ #controls label:nth-child(2), 
#switch2:checked ~ #controls label:nth-child(3),
#switch3:checked ~ #controls label:nth-child(1){
	background: url('../css/images/steps/next.png') no-repeat;
	background-image: url('images/previous.png') no-repeat; 
	float: right;
	margin: 50px 0 0 0;
	display: block;
	height: 68px;
	width: 68px;
}*/

label, a{ /*при наведении на стрелки или переключатели - курсор изменится*/
	cursor: pointer;
}

.all input{ /*скрывает стандартные инпуты (чекбоксы) на странице*/
	display: none;
}

#controls{ /*положение блока всех управляющих элементов*/
	margin: -28% 0 0 0;
	width: 100%;
	height: 50px;
}

#active label{ /*стиль отдельного переключателя*/
	border-radius: 10px; /*скругление углов*/
	display: inline-block; /*расположение в строку*/
    margin-right: 10px;
	width: 15px;
	height: 15px;
	background: #bbb;
/*    margin-top: 20px;*/
}

#active{ /*расположение блока с переключателями*/
	margin: 27% 0 0;
	text-align: center;
}

#active label:hover{ /*поведение чекбокса при наведении*/
	background: #727272;
	border-color: #777 !important; /*выполнение в любом случае*/
}

/*цвет активного лейбла при активации чекбокса*/
#switch1:checked ~ #active label:nth-child(1),
#switch2:checked ~ #active label:nth-child(2),
#switch3:checked ~ #active label:nth-child(3),
#switch4:checked ~ #active label:nth-child(4),
#switch5:checked ~ #active label:nth-child(5),
#switch6:checked ~ #active label:nth-child(6),
#switch7:checked ~ #active label:nth-child(7),
#switch8:checked ~ #active label:nth-child(8),
#switch9:checked ~ #active label:nth-child(9),
#switch10:checked ~ #active label:nth-child(10),
#switch11:checked ~ #active label:nth-child(11),
#switch12:checked ~ #active label:nth-child(12),
#switch13:checked ~ #active label:nth-child(13),
#switch14:checked ~ #active label:nth-child(14),
#switch15:checked ~ #active label:nth-child(15),
#switch16:checked ~ #active label:nth-child(16),
#switch17:checked ~ #active label:nth-child(17),
#switch18:checked ~ #active label:nth-child(18),
#switch19:checked ~ #active label:nth-child(19),
#switch20:checked ~ #active label:nth-child(20),
#switch21:checked ~ #active label:nth-child(21) {
	background: #454545;
    border: 2px solid #FECC00;
}

#slides .image{ /*анимация пролистывания изображений*/
	transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

#controls label:hover{ /*прозрачность стрелок при наведении*/
	opacity: 0.6;
}

#controls label{ /*прозрачность стрелок при отводе курсора*/
	transition: opacity 0.2s ease-out;
}

/*позиция изображения при активации переключателя*/
#switch1:checked ~ #slides .image {
	margin-left: 0;
}

#switch2:checked ~ #slides .image {
	margin-left: -100%;
}

#switch3:checked ~ #slides .image {
	margin-left: -200%;
}
/*=================*/
#switch4:checked ~ #slides .image {
	margin-left: -300%;
}

#switch5:checked ~ #slides .image {
	margin-left: -400%;
}

#switch6:checked ~ #slides .image {
	margin-left: -500%;
}

#switch7:checked ~ #slides .image {
	margin-left: -600%;
}

#switch8:checked ~ #slides .image {
	margin-left: -700%;
}

#switch9:checked ~ #slides .image {
	margin-left: -800%;
}

#switch10:checked ~ #slides .image {
	margin-left: -900%;
}

#switch11:checked ~ #slides .image {
	margin-left: -1000%;
}

#switch12:checked ~ #slides .image {
	margin-left: -1100%;
}

#switch13:checked ~ #slides .image {
	margin-left: -1200%;
}

#switch14:checked ~ #slides .image {
	margin-left: -1300%;
}

#switch15:checked ~ #slides .image {
	margin-left: -1400%;
}

#switch16:checked ~ #slides .image {
	margin-left: -1500%;
}

#switch17:checked ~ #slides .image {
	margin-left: -1600%;
}

#switch18:checked ~ #slides .image {
	margin-left: -1700%;
}

#switch19:checked ~ #slides .image {
	margin-left: -1800%;
}

#switch20:checked ~ #slides .image {
	margin-left: -1900%;
}

#switch21:checked ~ #slides .image {
	margin-left: -2000%;
}

@keyframes slider {
	0% { transform: translateX(0%); }
    25% { transform: translateX(0%); }
    30% { transform: translateX(-100%);}
    55% { transform: translateX(-100%);}
    60% { transform: translateX(-200%);}
    85% { transform: translateX(-200%);}
    90% { transform: translateX(0%);}
}

.move {
	animation-name: slider;
	animation-duration: 15s;
	animation-timing-function: ease-in-out;
	animation-iteration-count:infinite;
}

@keyframes slider-2 {
	0% { transform: translateX(0%); }
    45% { transform: translateX(0%); }
    50% { transform: translateX(-100%);}
    95% { transform: translateX(-100%);}
    100% { transform: translateX(0%);}
}

.move-2 {
	animation-name: slider-2;
	animation-duration: 10s;
	animation-timing-function: ease-in-out;
	animation-iteration-count:infinite;
}
/*HEADER*/

/*======================================================================================================================================================*/

/*SECTION*/

.section_expalanation {
    margin-left: 30px;
    border-left: 3px solid #FECC00;
    padding-left: 30px;
    color: #868686;
}

/*.title {
    font-size: 130%;
    font-weight: 600;
    line-height: 120%;
    word-spacing: 5px;
    text-align: left;
    margin: 0 15px;
    padding-top: 30px;
}

.text {
    margin: 0 15px;
    padding-top: 15px;
    text-align: justify;
    font-size: 90%;
}*/
/*SECTION*/

/*CERTIFIED_SECTION*/

.certified_section {
    border-top: 1px solid #bfbfbf;
    border-bottom: 1px solid #bfbfbf;
    padding: 50px 0;
    background-color: #f2f2f2;
}

.rfx-certified-seal {
    display: block;
    margin: 10px auto;
}

.title_certified {
    padding-top: 15px;
    font-weight: 600;
    line-height: 120%;
    word-spacing: 5px;
    text-align: center;
}

.text_certified {
    padding: 15px 0px;
    text-align: center;
}
/*CERTIFIED_SECTION*/

/*ABOUT_SECTION*/
.title_about {
    margin: 0 0px;
    font-size: 130%;
    font-weight: 600;
    line-height: 120%;
    word-spacing: 5px;
    text-align: left;  
}

.text_about {
    margin: 10px 0px;
    font-size: 80%;
    text-align: justify;
    /*padding-top: 30px 0;*/
}
/*ABOUT_SECTION*/

/*FOOTER*/
footer {
    border-top: 1px solid #868686;
    background-color: #222;
   }

.footer_copyright {
    margin-top: 30px;
    text-align: center;
    color: #868686;
    font-size: 50%;
}

.footer_information {
    margin-top: 30px;
    color: #c2c2c2;
    font-size: 80%;
}

.footer_title {
    font-weight: 600;
}

.footer_nav {
    font-size: 70%;
    float: right;
    list-style: none;
    margin: 30px 0;
    
}

.footer_nav li {
    margin-left: 20px;
    display: inline-block;
    font-size: 75%;
    font-weight: 400;
    letter-spacing: 0px;
}

.footer_nav li :link,
.footer_nav li :visited
 {
    color: #868686;
    text-decoration: none;
}

.footer_nav li :hover {
    transition: color 0.4s;
    color:#b2b2b2;
}
/*FOOTER*/

/*Why RestoreFX Page
=====================================================================================================================================*/

/*Technology*/

.technology_image {
    background-size:auto;
    float: right;
    height: 15vh;
    width: 100%;
    margin-bottom: 15px;
    padding-left: 15px;
}

.technology_ul li {
    margin: 15px 0 30px 30px;
}

.iframe {
    width: 560px;
    height: 315px;
}

/*Technology*/

/*Why RestoreFX Page
=====================================================================================================================================*/

.contact_background {
    background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3)), url(images/krown_centre.jpg);
    background-size: cover;
    background-position: center;
    height: 70vh;
    
}

.contact_us {
    margin: 30px auto;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 5px;
    border: 1px solid red;
}

.contact_page_information {
    padding-bottom: 30px;
    border-bottom: 1px solid #c2c2c2;
    opacity: 1;
}

.contact_input {
    margin: 5px 0px;
    padding-left: 20px;
    color: #000;
    width: 100%;
    height: 30px;
    border: 1px solid #c1c1c1;
    background-color: #fff;
}

.contact_input_marks {
    margin-bottom: -7px;   
}

.red_star {
    color: red;
}

.contact_input_text {
    margin: 5px 0px;
    padding: 5px 20px;
    color: #000;
    width: 100%;
    height: 150px;
    border: 1px solid #c1c1c1;
    background-color: #fff;
}

.button_submit {
    text-align: right;
    float: right;
    border: 0;
    background-color: #FECC00;
    margin-top: 25px;
    padding: 15px 30px;
    font-weight: 600;
    color: #000;
    border-radius: 5px;
}

.sub :hover, 
.sub :active {
    background-color: #ffd83a;
    border: 1px solid #FECC00;
}

.isvalid {
    margin: 5px 0;
    color: green;
    font-size: 80%;
}

.isnotvalid {
    margin: 5px 0;
    color: red;
    font-size: 80%;
}

.tecnology {
   margin-top: 30px;
}

.price_list {
    background-color: #f4f4f4;
}

.price_box {    
    background-color: #fff;
    display: block;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    box-shadow: 10px;
}

.price_text{
    text-align: center;
    padding: 15px 0;
}

.price_img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 250px;
    height: auto;
}