body{
font-family: 'Roboto', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 15px;
color: #787878;
line-height: 1.6;
background-color: #F2F2F2;
}
body a{
color: #000;
outline: none!important;
}
body a:hover,
body a:focus,
body a:active,
body a:visited{
text-decoration: none;
}
img{
width: auto;
max-width: 100%;
}
li {
list-style-type: none;
}
* {
    margin: 0;
    padding: 0;
    list-style: none;
    outline: none;
}

.demo-version {
margin-top: 15px;	
}
.demo-version2 {
margin-top: 15px;	
}


.style-h .demo-img:hover{
border: 1px solid #DFDFDF;
}
.content .title h1{
position:relative;
display:inline-block;
margin-bottom:0;
}
.content .title h2{
position:relative;
display:block;
margin-bottom:20px;
}
.title h1{
font-family: 'Josefin Sans';
font-weight: 400;
color: #474747;
font-size: 24px;
}

.title h2{
font-family: 'Josefin Sans';
font-weight: 400;
color: #787878;
font-size: 19px;
}
h1, h2, h3 {
    margin-top: 10px;

}

.title h3{
margin-top: 10px;
}
.style-h{
margin-bottom: 40px;
}
.demo-vaiant{
text-align: center;
}
.device-info{
position: relative;
z-index:2;
width:1360px;
margin:0 auto;
margin-top:-400px;
}
.device-info img{
margin-left:20px;
}

.title{
text-align: center;
font-family: 'Josefin Sans';
}


.st {
content: '';
display: block;
position: absolute;
border-radius: 3px;
top: 5px;
line-height: 15px;
font-size: 9px;
text-transform: uppercase;
padding: 0 4px;
z-index: 1;
right: 70px;
}

.st::after {
    content: '';
    display: block;
    position: absolute;
    top: 5px;
    right: 8px;
    width: 10px;
    height: 10px;
    transform: rotate(110deg) skewX(50deg);
    z-index: -1;
}
.st::after, .st {
    background: #f84147;
    color: #ffffff;
}

.style-h .demo-img{
height: 400px;
overflow: hidden;
border: 1px solid #ddd;
}
.style-h .demo-img img{
transition: all 0.5s ease-in-out;
}
.style-h .demo-img:hover img{
transform: translateY(-100%);
margin-top: 400px;
transition: all 5s ease;
}
.style-h .demo-img a {
cursor: pointer;
}
.style-h.new-item .demo-img{
position: relative;
}

.demo-vaiant{
text-align: center;
}
.demo-vaiant .view-demo{
display: table;
margin: auto;
text-transform: uppercase;
background-color: #efefef;
color: #222;
padding: 0 20px;
line-height: 30px;
border-radius: 15px;
-webkit-border-radius: 15px;
transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
}
.demo-vaiant h3{
font-family: 'Josefin Sans';
font-weight: 400;
font-size: 16px;
margin:25px 0 18px;
}
.demo-version li{
display: inline-block;
margin:0 5px;
}
.demo-version2 li{
display: inline-block;
margin:0 5px;
}
.demo-version li a{
background-color: #efefef;
padding: 0 15px;
display: block;
line-height: 30px;
border-radius: 15px;
-webkit-border-radius: 15px;
transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
}
.demo-version2 li a{
background-color: #efefef;
padding: 0 15px;
display: block;
line-height: 30px;
border-radius: 15px;
-webkit-border-radius: 15px;
transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
}
.demo-version li a:hover{
color: #fff;
background-color: #ff3c20;
}
.demo-version2 li a:hover{
color: #fff;
background-color: #ff3c20;
}
.demo-version a{

line-height: 100%;
border-radius: 10px;
background: #009E44;

border: 0 none;
display: inline-block;
border: 0 none;
font-size: 15px;
color: #fff;
text-shadow: 0.5px 0.5px #40730b;
padding: 10px 17px;

}
.demo-version2 a{
background: #fff;
color: #787878;
font-size: 13px;
border: 1px solid #e5e5e5;
padding: 6px 17px;
line-height: 100%;
border-radius: 10px;
transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
margin: 0 5px;
}
.demo-version a:hover, .style-h:hover .demo-version a {
color: #fff;
background-color: #00BA51;
}
.demo-version2 a:hover{
color: #fff;
background-color: #00BA51;
text-shadow: 0.5px 0.5px #40730b;
}
.login {
    color: #787878;
 font-size: 13px;
    margin-top: 10px;
}


.demo-vaiant .view-demo:hover{
color: #fff;
background-color: #ff3c20;
}
@media (min-width: 1445px) and (max-width: 1920px) {
.container {
	width: 80%;
	}
}





@media (max-width: 767px) {
.demo-img {
    text-align: center;
    display: inline-block;
}
.style-h {
    text-align: center;
}
}