html {
height: 100%;
-webkit-overflow-scrolling: touch
}

body{
font-family: 'RobotoLight';
font-weight:300;
background: #2c3e50;
color: #ffffff;
}

/*--------------------Модальное окно-----------------------*/


.modal-content{
width: auto;
cursor: default;
border-radius: 2px;
background: #2c3e50;
margin:5% auto;
}

.mobile{
display: none;    
}

.cls, .cls:active, .cls:visited {
font-weight: 100;
color: #ffffff;
position: absolute;
top: 1px;
right: 5px;
transition: all ease-in-out 300ms;
opacity: 1;
font-size: 1.5em;
cursor: pointer;
display: block;
}

.cls:hover, .cls:focus {
opacity: 0.5;
}

.btn{
transition: all ease-in-out 300ms;
margin-top: 20px;
cursor: pointer;
}

.label-warning {
  background-color: #42586e;
}

.label {
font-family: "RobotoLight";
font-weight: 100;
font-size: 80%;
border-radius: 3px;
padding: 0px 5px;
}

.restore-pass-anounce, .restore-pass-label{
font-family: "RobotoLight";
font-weight: 100;
font-size: 1.5em;
color: white;
display: block;
margin-bottom: 10px;
}    

.logo, .title{
font-family: 'RobotoLight';
font-weight:100;
display: inline-block;
text-shadow: 0 0 8px lightblue;
font-size: 2.5em;

}

.logo{
padding-top: 20px;
}

.logo img {
	width:173px;
}

@media (max-width: 320px) {
	.logo img {
		width:290px;
	}
}

.title{
margin-top: 20px;
padding-bottom: 20px;
line-height: 1.2em;
}

.restore-pass-label{
font-family: "RobotoRegular";
font-size: 1.5em;
}

.restore-pass-form{
margin-top: 20px;
margin-bottom: 20px;
}

.restore-pass-form{
margin:0 auto;
max-width: 90%;
}    
    

.next, .next:visited{
font-family: "RobotoLight";
color: #ffffff;
padding: 10px 20px;
transition: all ease-in-out 300ms;
margin-top: 20px;
margin-bottom: 0px;
outline: transparent;
 background-color:#ff9d55;
}

.next:hover, .next:active, .next:focus{
font-family: "RobotoLight";
background-color: #ff862d;
color:#ffffff;
outline: transparent;
transition: all ease-in-out 300ms;
-webkit-tap-highlight-color:#ff862d;
} 

.next2, .next2:visited{
font-family: "RobotoLight";
color: #ffffff;
padding: 10px 20px;
transition: all ease-in-out 300ms;
margin-top: 20px;
margin-right: 10px;
margin-bottom: 0px;
outline: transparent;
background-color:#e45988;
}

.next2:hover, .next2:active, .next2:focus{
font-family: "RobotoLight";
background-color: #d9326a;
color:#ffffff;
outline: transparent;
transition: all ease-in-out 300ms;
-webkit-tap-highlight-color:#d9326a;
} 

 .form-control {
display: block;
width: 100%;
height: 36px;
padding: 6px 12px 6px 12px;
font-size: 1.5em;
border-radius: 3px;
}

.input-group-addon{
 font-size: 1.5em;   
}

footer{
padding-top: 20px;    
}

.alert{
position: absolute;
top: 40%;
background-color: #607d8b;
color: #ffffff;
padding-top: 0;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
cursor: default;
}

.cls, .cls:active, .cls:visited {
font-weight: 100;
color: #ffffff;
position: absolute;
top: 1px;
right: 15px;
transition: all ease-in-out 300ms;
opacity: 1;
font-size: 1.5em;
cursor: pointer;
}

.cls:hover, .cls:focus {
opacity: 0.5;
}

.wrapper{
/*margin-top: 20px;*/
margin-top: 110px;
}

/*.wrapper{
margin-bottom: 50px;
}*/

.copyr{
color: darkgray;
}


.h4, .h4:visited{
font-family: 'Roboto',sans-serif;
font-weight:300;  
color:#48b3ef;
}

.h4:hover{
transition: all ease-in-out 300ms;
color:white;
font-family: 'Roboto',sans-serif;
font-weight:300;
text-decoration:none;
text-shadow: 0 0 8px lightblue;
cursor: pointer;
}

h1, h3, h4, h5, .btn{
font-family: 'Roboto',sans-serif;
font-weight: 300;
color: white;
}

:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder {color: transparent}
:focus:-moz-placeholder {color: transparent}
:focus:-ms-input-placeholder {color: transparent}


/* -----------------------------------Медиа запросы--------------------------------------*/

/* -----------------------------------Медиа запросы--------------------------------------*/

@media screen and (max-width:767px){

    .service{
    font-size: 1.5em;
    }
    .back-link{
    font-size: 1em;
    }
  
    .next-tarif-caption, .next-tarif-caption2{
    background: #34495e;
    }
    
    .next-tarif-caption2{
    font-size: 1.5em;
    }
    
    .next-tarif-tiles-anounce, .service-tiles-anounce{
    padding: 10px 15px;
    margin: 0;
    text-align: left;
    }
    
    .next-tarif-tiles{
     height: 60px;
    }

    .place3{
    padding: 0;
    margin: 0;
    }
    
    h1, h2, h3, h4, h5{
    font-family: 'RobotoLight';
    font-weight: 100;
    }

    .lk-title p{
    text-align: left;
    }

    .lk-title{
    margin-top: 0;
    padding-top: 0;
    }

    .wrapper{
    /*margin-top: 10px;*/
    margin-top: 80px;
    padding: 0 5px 0 5px;
    }

    .user{
    display: block;
    padding:10px 0;
    }

    .h4, .h4:visited{
    font-family: 'RobotoLight';
    font-weight:100;  
    color:#48b3ef;
    }

    a, a:visited, a:focus, a:active, .h4:hover{
    transition: all ease-in-out 300ms;
    color:white;
    font-family: 'RobotoLight';
    font-weight:100;
    text-decoration:none;
    }
    
    img{
    height: 80px;
    }
    
    .title{
    font-size: 1.5em;    
    }
    .restore-pass-anounce{
        font-size: 1.2em;
    }

}

/* iPhone 5s*/
@media only screen and (max-width: 400px) and (orientation: portrait){
    img{
        height: 80px;
    }
    .title{
    font-size: 1.5em;    
    }
    .restore-pass-anounce{
        font-size: 1.2em;
    }
    .mobile{
display: block;
}
    .desktop{
        display: none;
    }

        .modal-content{
    margin: 0 auto;
    padding: 0;
    }
}

/* iPhone 5s, HTC One, Nokia Lumia 920*/
@media only screen and (max-width: 768px) and (min-aspect-ratio: 13/9){
.mobile{
display: none;
}
    .desktop{
        display: block;
    }
        .modal-content{
    margin: 0 auto;
    padding: 0;
    }

}

/* iPad ориентация экрана портрет*/
@media only screen and (min-width: 768px) and (orientation: portrait) {


}
/* iPad 1024 px ориентация экрана альбомная*/
@media only screen and (min-width: 968px)  and (max-width:1024px) and (min-aspect-ratio: 13/9) {
  .mobile{
display: none;
}
    .desktop{
        display: block;
    }
    
}
/* Nexus 7 966 px ориентация экрана альбомная*/
@media only screen and (min-width: 900px)  and (max-width:967px) and (min-aspect-ratio: 13/9) {
.mobile{
display: none;
}
    .desktop{
        display: block;
    }
}

/*Планшеты от 600 px ориентация экрана портрет (Google Nexus 7) */
@media only screen and (min-width: 600px) and (max-width:767px) and (orientation: portrait){
 
}

@media only screen and (min-width: 1360px) {
  .container-fluid {
    width: 1349px;
    }

}
    
@media only screen and (min-width: 1500px) {
  .container-fluid {
  width: 1500px;
}

}