html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } a:hover { border: 0; } body, input, button, textarea,* { font-weight:400;  font-family: 'Google Sans';;} input { -webkit-appearance: none; -moz-appearance: none; appearance: none; } 
body a { color: #fff; text-decoration:none;  transition: all 300ms ease-in-out 0s;}*, *:before, *:after {box-sizing: border-box;} 
body { position:relative; color:#3C40431F;  font-family: 'Google Sans';font-weight:400; background:#fff;}
@font-face {
    font-family: 'Google Sans';
    src: local('../fonts/Google Sans Regular'), local('Google-Sans-Regular'),
        url('../fonts/GoogleSans-Regular.woff2') format('woff2'),
        url('../fonts/GoogleSans-Regular.woff') format('woff'),
        url('../fonts/GoogleSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
  }
@font-face {
    font-family: 'Google Sans';
    src: local('../fonts/Google Sans Medium'), local('Google-Sans-Medium'),
        url('../fonts/GoogleSans-Medium.woff2') format('woff2'),
        url('../fonts/GoogleSans-Medium.woff') format('woff'),
        url('../fonts/GoogleSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
  }   
  .google__meet-cover {display:flex; flex-flow:column;}
  .google__header {padding:16px; background:#fff;}
  .google__header a {display:flex;}
  .google__header a img {vertical-align:bottom; height:40px;}
  .google__meet-body {display: flex; justify-content: center; align-items: center; min-height:calc(100vh - 72px);}
	.google__meet-box {display:flex; align-items:center;     align-items: center;}
		.google__meet-column {position:relative;}
			.google__screen {width:740px; height:415px; background:#202124; border-radius:8px; position:relative; overflow:hidden; display:flex; flex-flow:column;     align-items: center;     justify-content: space-between; }
			.google__dot-cell {position:absolute; right:20px; top:20px; z-index:14; }
			.dots-icon {width:54px; height:54px; min-width:54px;  cursor:pointer; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 3C10.9 3 10 3.9 10 5C10 6.1 10.9 7 12 7C13.1 7 14 6.1 14 5C14 3.9 13.1 3 12 3ZM12 17C10.9 17 10 17.9 10 19C10 20.1 10.9 21 12 21C13.1 21 14 20.1 14 19C14 17.9 13.1 17 12 17ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z'%3E%3C/path%3E%3C/svg%3E") center/25px no-repeat; display:inline-flex;}
			.dropbox {display:flex; flex-flow:column; background:#fff; position:absolute; right:0; top:54px; border-radius:10px; padding:20px; color:#000; min-width:290px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); display:none;}
			.dropbox:before {content: ''; position: absolute; top: -9px;  right:15px; border-width: 0 10px 10px 10px; border-style: solid; border-color: transparent transparent #fff transparent; display: block; width: 0; height: 0;}
				.db__title {font-weight:500; font-size:16px; display:flex; align-items:center; margin-bottom:10px;}
				.db__title:before {content:''; display:inline-flex; width:24px; height:24px; min-width:24px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20 17H22V19H2V17H4V10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10V17ZM18 17V10C18 6.68629 15.3137 4 12 4C8.68629 4 6 6.68629 6 10V17H18ZM9 21H15V23H9V21Z'%3E%3C/path%3E%3C/svg%3E") center/20px no-repeat; margin-right:6px;}
				.db__text {line-height:1.3; font-size:14px;}
				.db__text img {vertical-align:bottom; display:inline-block; max-width:16px; margin-right:5px;}
				.db__text strong {font-weight:600;}
				.db__bottom {margin-top:15px; text-align:center;}
				#fixedBtn {padding:0 14px; line-height:30px; cursor:pointer; border:0; background:none; color:#0b57d0; font-size:15px; font-weight:500;}
				#fixedBtn:focus {outline:none;}
				.transparent:before {content:''; display:inline-block; position:fixed; left:0; top:0; right:0; bottom:0; z-index:11; background:rgba(0,0,0,.8);}
				.transparent .google__screen {opacity:.7;}
			.screen__box {    text-align: center; position:relative; z-index:11; height:100%; display: flex; flex-flow: column; justify-content: center; align-items: center;}
			.screen__box h1 { font-family: "Roboto", sans-serif; font-size:24px; line-height:1.4; color:#fff;  padding-top:60px;}
			#allow {color:#fff;    font-family: 'Google Sans'; font-weight:500; font-size:14px; letter-spacing:1px; padding:0 24px; border-radius:4px; cursor:pointer; background:#1A73E8; line-height:36px; border:0; margin-top:8px;}
			#allow:focus {outline:none;}
			.google__screen:before {content:''; display:inline-block; position:absolute; left:0; top:0; height:80px; width:100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%);}
			.google__screen:after {content:''; display:inline-block; position:absolute; left:0; bottom:0; height:80px; width:100%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%);}
			.screen__bottom {height:80px;  width:100%; justify-content: center; display:flex; position:relative; z-index:11;}
			.screen__bottom button {width:54px; min-width:54px; height:54px; border:1px solid #EA4335; background:#EA4335; padding:0; margin:12px; border-radius:100px; cursor:pointer; position:relative;}
			.screen__bottom button#microfon__off { background:#EA4335 url('../images/microfon__off.svg') center/25px no-repeat;}
			.screen__bottom button#camera__off { background:#EA4335 url('../images/video__off.svg') center/25px no-repeat;}
			.screen__bottom button#avatar { background: url('../images/avatar.svg') center/25px no-repeat; border:1px solid #fff;  position:absolute; right:0px; bottom:0px;}
			.screen__bottom button#avatar:before {display:none;}
			.screen__bottom button:before {content:''; display:inline-block; position:absolute; width:20px; height:20px; background:#fff url('../images/alert.svg') center/contain no-repeat; top:0px; right:-2px; border-radius:50px;}
			.screen__bottom button:focus {outline:none;}
			.meet__bar {display:flex; padding-top:16px;}
			.meet__bar button {padding:9px 11px; border:1px solid #3C40431F; border-radius:50px; display:flex; align-items:center; position:relative; cursor:pointer; margin-right:6px; background:none; color:#3C404361; font-size:14px;  font-family: 'Google Sans'; font-weight:500; }
			.meet__bar button:before {width:18px; height:18px; min-width:18px; margin-right:5px; background:url('../images/microfon.svg') center/13px no-repeat; content:'';}
			.meet__bar button:after {width:18px; height:18px; min-width:18px; margin-left:5px; background:url('../images/arrow.svg') center/9px no-repeat; content:'';}
			.meet__bar button:nth-child(2):before {background:url('../images/audio.svg') center/20px no-repeat;}
			.meet__bar button:nth-child(3):before {background:url('../images/camera.svg') center/19px no-repeat;}
			.meet__bar button:focus {outline:none;}
.ready__column {display:flex; padding-left:105px;}
	.ready__container {display:flex; flex-flow:column;     align-items: center;}
	.ready__container h2 {font-size:28px; line-height:1.3; color:#000000DE; margin-bottom:16px;}
	.ready__container p {font-weight:500; font-size:14px; line-height:1.3; text-align:center; color:#202124; margin:48px 0 15px 0;}
	.devices {color:#1A73E8; font-size:14px; letter-spacing:1px; display:inline-flex; align-items:center; font-weight:500;}
	.devices:before {content:''; width:20px; height:20px; min-width:20px; margin-right:5px; background:url('../images/device.svg') center/19px no-repeat;}
	.ready__action {display:flex;}
	.ready__action button {border:0; cursor:pointer;}
	.ready__action button#present,
	.ready__action button#join__now {line-height:48px; color:#fff; background: #1A73E8; border-radius:60px; letter-spacing:.4px; font-weight:500; font-size:14px; padding:0 25px; box-shadow: 0px 1px 3px 1px #3C404326;box-shadow: 0px 1px 2px 0px #3C40434D; margin-right:8px;}
	.ready__action button#present {color:#1A73E8; box-shadow: 0px 1px 3px 1px #3C404326;box-shadow: 0px 1px 2px 0px #3C40434D; background:#fff; display:inline-flex; align-items:center;}
	.ready__action button#present:before {content:''; display:inline-flex; height:24px; min-width:24px; height:24px; margin-right:5px; background:url('../images/present.svg') center/20px no-repeat;}
	.ready__action button:focus {outline:none;}
.modal__overflow {position:fixed; left:0; top:0; right:0; bottom:0; z-index:15; width:100%; height:100%; background:#00000052; display: none; justify-content: center; align-items: center;}	
.viewModal .modal__overflow {-webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;  -webkit-animation-name: fadeIn; animation-name: fadeIn; display:flex;}
.modal__item {display:inline-flex; border-radius:28px; background:#fff; padding:30px 100px 62px 100px; flex-flow:column;     align-items: center; position:relative;}
.viewModal .modal__item {-webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;  -webkit-animation-name: fadeInUp; animation-name: fadeInUp;}
.close__modal {cursor:pointer; height:40px; width:40px; position:absolute; right:20px; top:20px; background:url('../images/close-large-line.svg') center/25px no-repeat;}
.modal__item img {vertical-align:bottom; max-width:240px;}
.modal__item p {font-size:24px; line-height:1.4; text-align:center; color:#444746; text-align:center; max-width:560px; margin:30px 0;}
.modal__item #meeting {border:0; color:#fff; background:#0B57D0; cursor:pointer; line-height:50px; padding:0 40px; font-size:14px; font-weight:500; border-radius:50px;}
.modal__item #meeting:focus {outline:none;}
   
 /** Animation **/
  
.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; }
@-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }
@-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; }
@-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
.fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; }
@-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
.fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; }
@-webkit-keyframes float { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-50px); transform: translateY(-50px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes float { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-50px); transform: translateY(-50px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } }		
@keyframes bounceIn { 0% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
/** Animation End **/
 
@media screen and (max-width: 1160px) {	
.google__screen {width:100%;}
.ready__column {padding-left:40px;}
.google__meet-box {width:100%;}
.google__meet-column {flex:1; width:100%;}
.google__meet-body {padding-left:15px; padding-right:15px;}
}
 
@media screen and (max-width: 860px) {	
.google__meet-box {flex-flow:column;}
 .google__meet-body {padding:0; flex-flow:column; display:flex;         justify-content: flex-start;}
 .ready__column {padding:30px 0 40px 0;}
 .google__screen {border-radius:0;}
 .meet__bar {display:none;}
 .google__screen:before,
 .google__screen:after {display:none;}
 .screen__bottom button {margin:18px;}
 .screen__bottom {height:auto;}
 .screen__box {padding-left:15px; padding-right:15px;}
 .google__screen {height:auto; padding:50px 0 0 0; background:#202124;}
 .screen__box {margin-bottom:20px;}
 .screen__box h1 {font-size:20px;}
 .modal__item {padding-left:30px; padding-right:30px;}

.modal__item p {max-width:none;}
.modal__item {width:90%; margin-left:5%; margin-right:5%; padding-bottom:20px;}
.modal__item p {font-size:22px;}
}
 

@media screen and (max-width:680px) {	
  .modal__item img {max-width:180px;}
  .modal__item #meeting {display:none;}
}
 
 @media screen and (max-width:480px) {
	 .screen__box h1 {padding:0 45px;}
 }
 @media screen and (max-width:380px) {
	.modal__overflow{ align-items: flex-start;}
}