/* Указываем box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

/* Убираем внутренние отступы */
ul[class],
ol[class] {
  padding: 0;
}

/* Убираем внешние отступы */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  background: #fff;
}

ul[class],
ol[class] {
  list-style: none;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img {
  max-width: 100%;
  display: block;
}


a[href^=tel] {
   text-decoration:inherit;
   color: inherit;
}



.mega {
	display: flex;
	max-width: 1920px;
	height: 100vh;

}

		
.intro-container {
	margin: 0 auto;
	position: relative;
	background-image: url('bg-wide.jpg');
	background-size: cover; 
	background-repeat: no-repeat;
	width: 100%;
	height: 100vh;

	
}

.container {
	max-width: 1024px;
	margin: 0 auto;

}



.img-fluid {
	width: 100%;
}



.logo {
	position: absolute;
	right: 100px;
	top: 60px;
	max-width: 300px;
}


.buy-block	{
	position: absolute;
	color: #fff;
	bottom: 0px;
	right: 0px;
	padding-right: 50px;
}





.logo-wb {
	margin: 30px;
	width: 200px;	

}

.logo-ozon {
	padding: 30px;
	width: 200px;
		}


.footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto
	font-size: 12px;
	text-align: center;
	padding: 20px;
	color: rgba(255, 255, 255, .8);
}



/* CARD */

.card {
	
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .1875rem;
}

.card-img-actions {
    position: relative;
}
.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
    text-align: center;
}

.card-img{

    width: 100%;
}

.star{
        color: red;
}

.bg-cart {
    background-color:orange;
    color:#fff;
}

.bg-cart:hover {
    
    color:#fff;
}

.bg-buy {
    background-color:green;
    color:#fff;
    padding-right: 29px;
}
.bg-buy:hover {
    
    color:#fff;
}


.name {
    font-size: 2rem;
}


.gradient {
margin: 5px;
background: linear-gradient(90deg, #4786E4 0%, #4E24A8 47.76%, #FF21F6 98.61%);
opacity: 0.9;
box-shadow: 0px 2.70423px 2.70423px rgba(0, 0, 0, 0.25);
border-radius: 13.5211px;
}


.gradient-ozon {
margin: 5px;
background: linear-gradient(90deg, #2986DF 0%, #799FC3 47.76%, #0D5192 98.61%);
opacity: 0.9;
box-shadow: 0px 2.70423px 2.70423px rgba(0, 0, 0, 0.25);
border-radius: 13.5211px;
}













/* FKN IPad */


/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

.mega {
	position: relative;
	display: flex;
	max-width: 1920px;
	height: 100vh;

}

		
.intro-container {
	margin: 0 auto;
	position: relative;
	background-image: url('bg-tablet-p.jpg');
	background-size: cover; 
	background-repeat: no-repeat;
		
}


.logo {
	position: absolute;
	right: 20px;
	top: 0px;
	max-width: 300px;
}


.buy-block	{
	position: absolute;
	color: #fff;
	bottom: 0px;
	right: 0px;
	padding-right: 50px;
}


.logo-wb {
	margin: 0 0 20px 0;
	width: 300px;


}

.logo-ozon {
	width: 300px;
	padding: 0;
	margin-bottom: 80px;

		}






}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {


  	.logo {
	position: absolute;
	right: 30px;
	top: 0px;
	max-width: 300px;
}



}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

  	.intro-container {
	margin: 0 auto;
	position: relative;
	background-image: url('bg-tablet-l.jpg');
	background-size: cover; 
	background-repeat: no-repeat;
		
}

}






/* MOBILE */


@media (max-width: 414.98px) {





.logo {
	position: absolute;
	top: 0px;
	left: 0;
	right: 30px;

}



.intro-container {
height: 100vh;
background-image: url(bg-mob.jpg);
background-size: cover;
padding: 0 1rem;
}


.intro-container {
  width: 100%;
  height: 100%;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}


.buy-block	{
	position: absolute;
	text-align: right;
	color: #fff;
	bottom: 70px;
	right: 0px;
	padding-right: 10px;
}



.logo-wb {
	margin: 0 0 20px 0;
	width: 200px;


}

.logo-ozon {
	width: 200px;
	padding: 0;
	margin-bottom: 20px;

		}


.footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto
	font-size: 12px;
	text-align: center;
	padding: 10px;
	color: rgba(255, 255, 255, .8);
}



}

/* 6*7*8 */

@media (max-width: 375.98px) {



.logo {
	position: absolute;
	top: 0px;
	max-width: 200px;
	left: 0;
	right: 0;
	margin: auto;
}



.intro-container {
height: 100vh;
background-image: url(bg-mob-sm.jpg);
background-size: cover;
padding: 0 1rem;
}


.intro-container {
  width: 100%;
  height: 100%;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}





}