.pizza_modal_card { display: block; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 100; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ .dialog { @media (max-width:760px) { height: 533px; width: 400px; margin: 0 auto; } @media (min-width:780px) { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 533px; width: 900px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); } /* Modal Content */ .content { background-color: #fefefe; margin: auto; @media (max-width:760px) { .svg{ fill:black; } .close{ position: fixed; top: 13px; right: 20px; cursor: pointer; display: inline-block; vertical-align: top; text-align: center; font-size: 0px; line-height: 0; font-style: normal; } } @media (min-width:780px) { border-radius: 20px; height: auto; max-height: 100%; .svg{ fill:white; } .close{ position: absolute; top: 13px; right: -38px; cursor: pointer; display: inline-block; vertical-align: top; text-align: center; font-size: 0px; line-height: 0; font-style: normal; } .close:hover { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); } } /*border: 1px solid #888;*/ .body{ height: 100%; flex-wrap: wrap; display: flex; .left{ margin: 0 auto; float: left; position: static; display: flex; justify-content: center; /*Центрирование по горизонтали*/ align-items: center; /*Центрирование по вертикали */ width: 400px; .img{ text-align: center; height: 100%; display: grid;; justify-content: center; /*Центрирование по горизонтали*/ align-items: center; /*Центрирование по вертикали */ } } .right{ background: #F7F7F7; display: flex; flex-flow: column; height: 100%; @media (max-width:760px) { width: 100vw; } @media (min-width:780px) { border-radius: 20px; width: 400px; } .box_header{ letter-spacing: 0.02em; flex: 0 1 auto; .title{ font-size: 20px; line-height: 24px; color: #252A48; margin: 10px 10px 10px 15px; } .feature{ font-size: 13px; line-height: 15px; margin: 10px 10px 10px 15px; color: #8E8E93; } .description{ font-size: 13px; line-height: 15px; color: #252A48; margin: 10px 10px 10px 15px; } /* Блок переключения размеров пиццы */ @import 'block_selector'; } .box_body { max-height: 45%; @import 'ingredients'; } .box_footer{ // display: table; padding: 10px; margin: 0 auto; } } } } } /* The Close Button */ .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } } .position_product{ padding-top: 100px; /* padding-top: 100px; right: 0; left: unset !important; position: absolute;*/ } @media (max-width: 940px) { .pizza_modal_card { height: 100vh; width: 100vw; } }