/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 28.10.2016, 13:54:21
    Author     : Filatov.Konstantin
*/
body {
    font-family: Tahoma,Verdana,Arial;
    margin: 0 auto;
}
.sms-wrap {
    position: relative;
    /*border: 1px solid #ccc;*/
    max-width: 1478px;
    min-width: 320px;
}
.sms-wrap img {
    max-width: 100%;
}
.sms-top {
    display: none;
    background: url(images/top-bg.png) no-repeat top center #fff;
    background-size: cover;
    height: 245px;
}
.sms-data{
    position: relative;
    background: url(images/data-bg6.jpg?v=1) no-repeat top center;
    /*background-size: cover;*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 50px 5% 0;
    height: 473px;
}
.sms-form {
    text-align: center;
}
.sms-form input {
    color:#fff;
    background: -webkit-linear-gradient(left, #2e3192,#00b1f0,#2e3192);
    background: linear-gradient(to right, #2e3192,#00b1f0,#2e3192);
    background-size: cover;
    border:1px solid #000;
    padding: 20px;
    margin: 15px 0;
    font-size: 170%;
    text-align: center;
}
#sms-form {
    z-index: 3;
    position: relative;
}
.sms-present {
    text-align: center;
    margin: 50px 0 -65px 15%;
}
.sms-flag {
    position: absolute;
    top: 50%; margin-top: -70px; left: 0;
    background: url(images/present-bg.png) no-repeat top right;
    text-transform: uppercase;
    font-size: 500%;
    font-weight: bold;
    color: #fff;
    width: 40%;
    min-width: 550px;
    padding: 20px 5%;
}
.sms-bottom {
    background: url(images/bottom-bg.jpg) repeat-y top center;
    color: #fff;
    text-align: justify;
    font-size: 120%;
    padding: 90px 5% 30px;
}

.sms-bottom {padding-top: 30px}

.sms-bottom a {text-decoration: none !important; border-bottom: dashed 1px white; color: white !important;}

.sms-bottom b /*, .red_highlight*/ {
	color: #cc1515;
	text-shadow: 0 0 1px white, 0 0 5px white, 0 0 10px white, 0 0 25px white;	
}

.underline {
    text-decoration: underline;
}

@media screen and (max-width: 1260px) {
    .sms-flag {
        font-size:350%;
        min-width: 440px; /*400px;*/
        padding: 15px 5%;
    }
}

@media (min-width: 1260px) and (max-width: 1477px) {
    .sms-data {
        background-position: -165px 0
    }
}
@media (min-width: 960px) and (max-width: 1259px) {

    .sms-data{
        /* background-image: url("data-bg3-notebook.jpg");
        height: 418px; */
		/*background-position: 0 0;*/
        background-position: -93px 0;
		background-size: auto 335px;
		height: 335px;
    }
}

@media (max-width: 1259px) and (min-width: 768px){
    .sms-present {
        margin-bottom: -50px
    }
    .sms-data{
        /* height: 418px; */
    }
}
@media (min-width: 768px) and (max-width: 959px) {
    /* .sms-data{
        background-image: url("data-bg3-notebook.jpg");
        background-position: -72px 0;
    } */
	
    .sms-data{
        /* background-image: url("data-bg3-notebook.jpg");
    height: 418px; */
        /*background-position: 0 0;*/
        background-position: -103px 0;
        background-size: auto 298px;
        height: 298px;
    }

}



@media (max-width: 767px){
    /*
	.sms-data{
		background-position: center top;
		background-image: url("data-bg3-notebook.jpg");
		background-size: 767px auto;
		height: 344px
	}
	*/
	/* .sms-data{
		background-image: url("data-bg4-mobile.jpg");
		background-size: 100% auto;
	}
	 */
	 
	 .sms-data{
		display: block;
		background-image: none;
		padding: 0;
		height: auto;
	}
	
	

    .sms-data img.visible-xs {display: block !important;}
}

@media (max-width: 460px){
   /*  .sms-data{
        background-image: none;
        padding: 0;
        height: auto;
    } */

    /* .sms-data img.visible-xs {display: block !important;} */
}

@media (min-width: 461px) and (max-width: 634px){
    /* .sms-data{
        background-position: -60px top;
        background-image: url("data-bg3-notebook.jpg");
        background-size: 767px auto;
        height: 344px
    } */

    .sms-header a {width: 138px !important; height: 46px !important; background-size: 138px 46px !important;}
}

@media (min-width: 635px) and (max-width: 767px){
    /* .sms-data{
        background-position: center top;
        background-image: url("data-bg3-notebook.jpg");
        background-size: 767px auto;
        height: 344px
    } */
	
/* 	.sms-data{
		background-image: url("data-bg4-mobile.jpg");
		background-size: 100% auto;
	} */
}

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

}

@media (min-width: 750px) and (max-width: 959px) {
    .alert {margin-top: -51px}
}


@media screen and (max-width: 750px) {
    .sms-data {
        display: block;
        /*padding: 50px 5%;*/
    }
    .sms-form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
            justify-content: space-around;
    } 
    .sms-form input {        
        font-size: 160%;
        padding: 10px;
        margin: 8px 0;
    } 
    /*.sms-present{
        margin: 20px 0;
    }*/

    .sms-flag {
        font-size: 281%;
        min-width: 100%;
        /*bottom: -45px;*/
    }

    .sms-wrap img {
        /*max-height: 400px;*/
    }

}

.sms-header {
    /*padding: 4px 1.2% 14px;*/
    padding: 14px 1.2% 4px;
    text-align: center; -moz-text-align-last: justify; text-align-last: justify;
    padding-bottom: 0px;
    margin-bottom: -5px;
}

.sms-header a
{
    margin-bottom: 0
}

.sms-header a {display: inline-block; width: 150px; height: 50px;
    transition:  background 0.3s ease;
    -webkit-transition: background 0.3s ease;
    -moz-transition: background 0.3s ease;
    -o-transition: background 0.3s ease;
}
.sms-header a.acc {background: url(images/acc.jpg)}
.sms-header a.acc:hover {background: url(images/acc2.jpg)}
.sms-header a.season {background: url(images/season.jpg?q=1)}
.sms-header a.season:hover {background: url(images/season2.jpg?q=1)}
.sms-header a.action {background: url(images/action.jpg?q=1)}
.sms-header a.action:hover {background: url(images/action2.jpg?q=1)}
.sms-header a.filter {background: url(images/filter.jpg)}
.sms-header a.filter:hover {background: url(images/filter2.jpg)}
.sms-header a.lamp {background: url(images/lamp.jpg)}
.sms-header a.lamp:hover {background: url(images/lamp2.jpg)}
.sms-header a.oil {background: url(images/oil.jpg)}
.sms-header a.oil:hover {background: url(images/oil2.jpg)}
.sms-header a.spark {background: url(images/spark.jpg)}
.sms-header a.spark:hover {background: url(images/spark2.jpg)}
.sms-header a.wiper {background: url(images/wiper.jpg)}
.sms-header a.wiper:hover {background: url(images/wiper2.jpg)}

@media (min-width: 1260px) and (max-width: 1477px) {
    .sms-header {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: -6px;
    }
}

@media (min-width: 960px) and (max-width: 1259px)
{
    .sms-header {
        text-align: center;
        -moz-text-align-last: center;
        text-align-last: center;
        padding-bottom: 0px;
        margin-bottom: -2px;
    }

    .sms-header a{
        margin: 5px 7px
    }

    .sms-header a:nth-child(n+6)
    {
        margin-bottom: 0
    }

    .sms-flag
    {
        margin-top: -50px;
    }


}

@media (min-width: 768px) and (max-width: 959px)
{
    .sms-header {
        text-align: center;
        -moz-text-align-last: center;
        text-align-last: center;
        padding-bottom: 3px;
    }
    .sms-header a {
        margin: 5px 7px;
    }

    .sms-header a:nth-child(n+5)
    {
        margin-bottom: 0
    }

    .sms-flag
    {
        margin-top: -50px;
    }
}

@media (max-width: 767px){
    .sms-header {
        text-align: center;
        -moz-text-align-last: center;
        text-align-last: center;
        padding-bottom: 0px;
        padding-left:4px;
        padding-right: 4px
    }
    .sms-header a {
        margin: 3px 5px;
    }

    .sms-flag {
        top: 82px;
    }

    .sms-bottom {
        padding-top: 30px;
    }
}