body { height: 100vh; padding: 0px; margin: 0px; width: 100%; background-image: url(images/in_p_bg.jpg); background-position: left center; background-repeat: no-repeat; background-size: contain; background-color: #f6f6f6; } .left { height: 100vh; float: left; width:18%; background-image: url(images/in_logo_2.png); background-position:center center; background-repeat:no-repeat; background-size:auto 100%; } .top { position: fixed; top: -30px; left: 20px; width: 40%; height: 200px; background-image: url(images/in_logo_3.png); background-position: left center; background-repeat: no-repeat; background-size:contain; } .right { height: 100vh; float: left; width: 100%; } .right .plane { height: 49vh; width: 100%; float: left; position:relative; margin-bottom:2vh; } .right .bg { height: 100%; width: auto; float: right; } .btn { width: 280px; float: right; margin-right:-40px; margin-top:10%; height: 180px; text-align: center; } .btn a { width: 60px; height: 60px; border: 2px solid #45a4d9; border-radius: 50%; display: block; margin: 0px auto; background-color: #1279b3; margin-bottom: 10px; position: relative; } .btn a i { display: block; width: 100%; height: 100%; background-image: url(images/in_arrow_2.png); background-position:center center; background-repeat:no-repeat; background-size:50px auto; } .btn label{ width:100%; text-align:center; display:block; } .btn label i, .btn label b { width: 100%; text-align: center; display: block; font-size: 25px; font-style: normal; font-weight: bold; color: #2e75b6; } .btn label i { font-size: 28px; } .btn:hover label i, .btn:hover label b { color: #880000; } /* Moema */ .button--moema { padding: 10px; color: #fff; -webkit-transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s; } .button--moema::before { content: ''; position: absolute; top: -20px; left: -20px; bottom: -20px; right: -20px; background: inherit; border-radius:50%; z-index: -1; opacity: 0; -webkit-transform: scale3d(0.8, 0.5, 1); transform: scale3d(0.8, 0.5, 1); } .button--moema:hover { -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s; transition: background-color 0.1s 0.3s, color 0.1s 0.3s; color: #ECEFF1; background-color: #880000; -webkit-animation: anim-moema-1 0.3s forwards; animation: anim-moema-1 0.3s forwards; border: 4px solid #b73333; margin-bottom: 6px; } .button--moema:hover i { background-size: 50px auto; } .button--moema:hover::before { opacity: 0.4; -webkit-animation: anim-moema-2 0.3s 0.3s forwards; animation: anim-moema-2 0.3s 0.3s forwards; } @-webkit-keyframes anim-moema-1 { 60% { -webkit-transform: scale3d(0.8, 0.8, 1); transform: scale3d(0.8, 0.8, 1); } 85% { -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes anim-moema-1 { 60% { -webkit-transform: scale3d(0.8, 0.8, 1); transform: scale3d(0.8, 0.8, 1); } 85% { -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes anim-moema-2 { to { opacity: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes anim-moema-2 { to { opacity: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }