<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="prop"> <div id="cardcontainer1"> <div class="circle1"> <i class="fa fa-credit-card"></i> </div> <h2>BEZAHLUNG</h2> <div class="cardtext1"> Die Bezahlung ist per <b>PayPal</b> und <b>Bankberweisung</b> mglich. </div> </div> </div>

/*! CSS Used from: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css */ b { font-weight: 700; } } h2 { orphans: 3; widows: 3; } h2 { page-break-after: avoid; } } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } :before,:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } h2 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; margin-top: 20px; margin-bottom: 10px; } h2 { font-size: 30px; } /*! CSS Used from: Embedded */ .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-credit-card:before { content: "\f09d"; } #prop { margin: 0 0 15px 10px; } .cardcontainerWrapper h2 { text-align: center; font-size: 20px; padding-top: 25px; color: #fff; font-weight: 400; overflow: hidden; margin: 0 0 15px 10px; } #cardcontainer1 { max-width: 240px; min-height: 170px; background-color: #e67e22; padding-left: 20px; padding-right: 20px; border-radius: 10px; color: #333; } .cardtext1 { color: #fff; margin: 0 0 0 10px; padding: 0 0 20px 0; } .circle1 { border-radius: 100%; float: left; width: 80px; height: 80px; background-color: #fff; position: relative; margin-top: -30px; margin-left: -50px; text-align: center; } .circle1 i { font-size: 25px; line-height: 80px; color: #e67e22; } @media only screen and (max-width:1120px),only screen and (max-width:1120px) and (-moz-min-device-pixel-ratio:3),only screen and (max-width:1120px) and (-o-min-device-pixel-ratio:3/2),only screen and (max-width:1120px) and (-webkit-min-device-pixel-ratio:3),only screen and (max-width:1120px) and (min-device-pixel-ratio:3),only screen and (max-width:1120px) and (-moz-min-device-pixel-ratio:2),only screen and (max-width:1120px) and (-o-min-device-pixel-ratio:2/1),only screen and (max-width:1120px) and (-webkit-min-device-pixel-ratio:2),only screen and (max-width:1120px) and (min-device-pixel-ratio:2),only screen and (max-width:1120px) and (-moz-min-device-pixel-ratio:3),only screen and (max-width:1120px) and (-o-min-device-pixel-ratio:3),only screen and (max-width:1120px) and (-webkit-min-device-pixel-ratio:3),only screen and (max-width:1120px) and (min-device-pixel-ratio:3),only screen and (max-width:1120px) and (-webkit-min-device-pixel-ratio:1.5) { #cardcontainer1 { display: inline-block; vertical-align: top; margin: 0 20px; } } @media only screen and (max-width:1024px),only screen and (max-width:1024px) and (-moz-min-device-pixel-ratio:3),only screen and (max-width:1024px) and (-o-min-device-pixel-ratio:3/2),only screen and (max-width:1024px) and (-webkit-min-device-pixel-ratio:3),only screen and (max-width:1024px) and (min-device-pixel-ratio:3),only screen and (max-width:1024px) and (-moz-min-device-pixel-ratio:2),only screen and (max-width:1024px) and (-o-min-device-pixel-ratio:2/1),only screen and (max-width:1024px) and (-webkit-min-device-pixel-ratio:2),only screen and (max-width:1024px) and (min-device-pixel-ratio:2),only screen and (max-width:1024px) and (-moz-min-device-pixel-ratio:3),only screen and (max-width:1024px) and (-o-min-device-pixel-ratio:3),only screen and (max-width:1024px) and (-webkit-min-device-pixel-ratio:3),only screen and (max-width:1024px) and (min-device-pixel-ratio:3),only screen and (max-width:1024px) and (-webkit-min-device-pixel-ratio:1.5) { #cardcontainer1 h2 { text-align: center; margin-left: 0; } #cardcontainer1 { float: none; display: inline-block; vertical-align: top; margin-top: 0; text-align: left; } #cardcontainer1 { min-height: 300px; width: 40%; padding-left: 30px; padding-top: 20px; margin: 0 20px 0 0; } .circle1 { float: none; background-color: #e67e22; position: relative; top: 0; left: 0; margin: 0 auto; border: 4px solid #fff; } .circle1 i { color: #fff; } } @media only screen and (max-width:660px) { #cardcontainer1 { display: block; margin: 20px auto; } } @media only screen and (max-width:480px),only screen and (max-width:480px) and (-moz-min-device-pixel-ratio:3),only screen and (max-width:480px) and (-o-min-device-pixel-ratio:3/2),only screen and (max-width:480px) and (-webkit-min-device-pixel-ratio:3),only screen and (max-width:480px) and (min-device-pixel-ratio:3),only screen and (max-width:480px) and (-moz-min-device-pixel-ratio:2),only screen and (max-width:480px) and (-o-min-device-pixel-ratio:2/1),only screen and (max-width:480px) and (-webkit-min-device-pixel-ratio:2),only screen and (max-width:480px) and (min-device-pixel-ratio:2),only screen and (max-width:480px) and (-moz-min-device-pixel-ratio:3),only screen and (max-width:480px) and (-o-min-device-pixel-ratio:3),only screen and (max-width:480px) and (-webkit-min-device-pixel-ratio:3),only screen and (max-width:480px) and (min-device-pixel-ratio:3),only screen and (max-width:480px) and (device-aspect-ratio:9/16),only screen and (device-width:480px) and (device-height:480px) and (-webkit-device-pixel-ratio:3),only screen and (max-width:480px) and (-webkit-min-device-pixel-ratio:1.5) { #cardcontainer1 { margin: 20px auto 20px auto; float: none; width: auto; padding-bottom: 20px; min-height: 300px; display: block; } #cardcontainer1 h2 { text-align: center; } .cardtext1 { margin-top: 20px; text-align: center; font-size: 15px; } } /*! CSS Used fontfaces */ @font-face { font-family:FontAwesome;src:url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/fontawesome-webfont.eot?v=4.7.0);src:url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/fontawesome-webfont.eot#iefix&v=4.7.0) format('embedded-opentype'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/fontawesome-webfont.woff2?v=4.7.0) format('woff2'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/fontawesome-webfont.woff?v=4.7.0) format('woff'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/fontawesome-webfont.ttf?v=4.7.0) format('truetype'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular) format('svg');font-weight:400;font-style:normal; }