/* POOL CSS */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700); /*---------------------------------------------------------------- RESET STYLES ----------------------------------------------------------------*/ 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; } 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; } strong { font-weight: 300; } i, em { font-style: italic; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } /*---------------------------------------------------------------- DEFAULTS ----------------------------------------------------------------*/ * { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { height: 100%; } html, body, table, select, input, button, textarea, a { font: 13px 'Open Sans', Arial, Verdana, Tahoma; color: #414043; letter-spacing: 0; } body { overflow-x: hidden; background-color: #fff; } p { margin: 5px 0; padding: 5px 0; } em, em a { font-style: italic; } img { border: 0; vertical-align: middle; } table { width: 100%; border-spacing: 0; border-collapse: collapse; } td { padding: 2px 0; vertical-align: top; } select { width: 250px; padding: 5px; margin: 0 0 5px 0; border: solid 1px #DDD; font-size: 15px; } input[type="text"], input[type="email"], input[type="password"], textarea { width: 255px; padding: 10px; border: solid 1px #dbdbdb; border-radius: 5px; background-color: #f0f0f0; } .h1 { display: block; margin: 0; font-family: 'Open Sans', Arial; } .h1, .h1 a { font-size: 32px; line-height: 34px; font-weight: 300; color: #fff; letter-spacing: -2px; } .h2 { display: block; margin: 0; font-family: 'Open Sans', Arial; } .h2, .h2 a { font-size: 29px; font-weight: 300; line-height: 31px; color: #ca0f12; letter-spacing: -2px; } a { outline: none; cursor: pointer; color: #414043; text-decoration: none; } a:hover { text-decoration: underline; } /*---------------------------------------------------------------- LAYOUT KLASSEN ----------------------------------------------------------------*/ #site { } /* header */ #site #header { background-color: #fff; box-shadow: 0 0 20px #001034; } #site #header > div { min-height: 70px; } #site #header > div .logo { display: block; } #site #header > div .logo > img { height: 60px; } /* rankings */ #site #rankings { position: relative; background: #395e63 url('images/slider-background.jpg') center 0 no-repeat; background-size: cover; color: #fff; } /* winner */ #site #rankings .winner { position: relative; padding: 10px; border-radius: 10px; background-color: #fff; box-shadow: 0 0 10px #131313; } #site #rankings .winner > img { float: left; width: 60px; margin-right: 10px; } #site #rankings .winner > .txt { float: left; } #site #rankings .winner > .txt > span { display: block; margin-top: 5px; font-size: 14px; color: #143cda; } #site #rankings .winner > .txt > strong { display: block; font-size: 24px; font-weight: 700; color: #143cda; } #site #rankings .winner > .txt > strong span { font-size: 17px; font-weight: normal; } /* all people */ #site #rankings .rankingslist { margin-top: 10px; margin-bottom: 20px; } #site #rankings .rankingslist ul { } #site #rankings .rankingslist ul li { margin: 5px 0 0; } #site #rankings .rankingslist ul li > .ranking { float: left; display: block; width: 19px; height: 19px; line-height: 16px; margin-top: 2px; padding: 1px 0 0; border: solid 1px #fff; border-radius: 10px; background-color: #44b177; font-size: 11px; text-align: center; } #site #rankings .rankingslist ul li > .ranking.ranking-empty { border-color: transparent; background-color: transparent; } #site #rankings .rankingslist ul li > a { float: left; display: block; margin: 0 10px; font-size: 16px; color: #fff; } #site #rankings .rankingslist ul li > .points { float: right; display: inline-block; margin-top: 2px; } #site #rankings .rankingslist ul li > .change { float: right; display: inline-block; margin-top: 3px; padding-right: 15px; font-size: 80%; } #site #rankings .rankingslist ul li > .change.change-up { color: #2ff12f; } #site #rankings .rankingslist ul li > .change.change-down { color: #ff0101; } #site #rankings .lastupdate { margin: 20px 0 0; font-size: 11px; } /* products */ #site #rankings #carousel { position: relative; } #site #rankings #carousel > #slides { position: relative; width: 400px; height: 549px; background: url("images/mask-ipad.png") no-repeat 0 0; } #site #rankings #carousel > #slides > div { position: absolute; top: 57px; left: 39px; width: 319px; height: 428px; overflow: hidden; } #site #rankings #carousel > #slides ul { } #site #rankings #carousel > #slides ul li { } #site #rankings #carousel > #slides ul li a { } #site #rankings #carousel > #slides ul li a img { } #site #rankings #carousel > #pager { position: absolute; width: 80px; left: 160px; bottom: 25px; z-index: 999; } #site #rankings #carousel > #pager a { display: inline-block; width: 12px; height: 12px; background-color: #ca0f12; border-radius: 6px; } #site #rankings #carousel > #pager a.selected { background-color: #143cda; } #site #rankings #carousel > #pager a span { display: none; } /* about */ #site #about { } #site #about > div { padding-top: 30px; padding-bottom: 30px; } /* products */ #site #about #products { } #site #about #products li { clear: both; } #site #about #products li img { float: left; margin-right: 10px; margin-top: -10px; margin-bottom: 15px; } #site #about #products li strong { display: block; font-size: 16px; font-weight: 500; padding-bottom: 5px; } #site #about #products li span { display: block; } /* social */ #site #about #social { } #site #about #social li { float: left; margin: 0 10px 0 0; } /* mascot */ #site #about #mascot { margin: 20px 0 10px; } #site #about #mascot img { width: 100%; border: solid 1px #d8dfea; border-radius: 10px; } /* facebook */ #site #about #likebox { border: solid 1px #d8dfea; border-radius: 10px; } /* footer */ #site footer { background-color: #333; } #site footer > div { padding-top: 30px; padding-bottom: 30px; color: #777; } #poster, #poster2 { width: 1920px; height: 1080px; background-image: url('images/slider-background.jpg'); /*background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35)), url('images/slider-background.jpg')*/;} #poster2 .container, #poster .container { width: 1650px !important; } #site #poster #rankings .rankingslist ul li, #site #poster2 #rankings .rankingslist ul li {margin: 12px 0 0;} #poster h3, #poster2 h3 { font-size:20px; text-align: left; margin-top: 120px; color: #693170; } #poster h3 span, #poster2 h3 span { font-size: 33px; text-decoration: underline;} #site #poster #rankings h1 {font-size: 38px; } #site #poster #rankings .text-small {font-size: 16px; } #site #poster #rankings .rankingslist ul li a, #site #poster #rankings .rankingslist ul li { font-size: 22px; margin: 0 0 10px; } #site #poster #rankings .rankingslist ul li { margin: 12px 0 0 !important; } #site #poster #rankings .rankingslist ul li a { padding: 0 0 0 15px; } #site #poster #rankings .rankingslist ul li > .ranking { margin-top: 4px; } #site #poster #rankings .rankingslist ul li > .points { margin-top: 4px; } #site #poster2 #rankings .rankingslist ul li a, #site #poster2 #rankings .rankingslist ul li { font-size: 20px; margin: 0; } #site #poster2 #rankings .rankingslist ul li { margin: 6px 0 0 !important; } #site #poster2 #rankings .rankingslist ul li a { padding: 0 0 0 15px; } #site #poster2 #rankings .rankingslist ul li > .ranking { margin-top: 4px; } #poster2 h3 { margin-top: 70px; } #poster2 .completelist { margin-top: 20px; color: #fff; font-weight: bold; font-size: 20px; } #site #poster2 #rankings .winner > .txt > strong { font-size: 28px; } #site #poster2 .rankingslist small { display: block; } /*---------------------------------------------------------------- UTILITY KLASSEN ----------------------------------------------------------------*/ .clearer { clear: both; visibility: hidden; height: 0; } .cropper { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; } .btn-join { display: inline-block; padding: 7px 15px; border: solid 1px #143cda; border-radius: 10px; background-color: #143cda; font-size: 16px; font-weight: bold; color: #fff; text-align: right; } .text-center { text-align: center; } .text-right { text-align: right; } .text-small { font-size: 11px; } /*---------------------------------------------------------------- RESPONSIVE ----------------------------------------------------------------*/ @media only screen and (min-width : 1140px) and (max-width : 1199px), only screen and (min-width : 1350px) { } /*medium + large devices*/ @media only screen and (min-width : 991px) { } /*medium devices*/ @media only screen and (min-width : 991px) and (max-width : 1199px) { #site #rankings .rankingslist ul li > a { max-width: 82%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } /*small + extra small devices*/ @media only screen and (max-width : 991px) { #site #rankings .rankingslist ul li > a { max-width: 82%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } /*small devices (portrait)*/ @media only screen and (min-width : 768px) and (max-width : 991px) and (orientation : portrait) { } /*extra small devices*/ @media only screen and (max-width : 767px) { .h1, .h1 a { font-size: 28px; line-height: 30px; } .h2, .h2 a { font-size: 25px; } #site #header > div .logo img { display: block; margin-left: auto; margin-right: auto; } #site #rankings .winner > img { width: 50px; } #site #rankings .winner > .txt > strong { font-size: 17px; } #site #rankings .winner > .txt > strong span { font-size: 15px; } .btn-join { display: block; font-size: 14px; text-align: center; } .text-xs-left { text-align: left; } .text-xs-center { text-align: center; } .text-xs-right { text-align: right; } } /*---------------------------------------------------------------- BOOTSTRAP ----------------------------------------------------------------*/ .container,.container-fluid{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media (min-width:768px){.container{width:auto}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.row{margin-left:-15px;margin-right:-15px}.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{position:relative;min-height:1px;padding-left:15px;padding-right:15px}.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:auto}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:auto}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media (min-width:768px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}@media (max-width:767px){.hidden-xs{display:none!important}}@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none!important}}@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none!important}}@media (min-width:1200px){.hidden-lg{display:none!important}} .row-no-gutter { margin-left: 0; margin-right: 0; } .row-no-gutter .col { padding-left: 0; padding-right: 0; } .row-small-gutter { margin-left: -7px; margin-right: -8px; } .row-small-gutter .col { padding-left: 7px; padding-right: 8px; } .float-right { float: right; } .invisible { visibility: hidden; } .margin-top-5 { margin-top: 5px; } .margin-top-10 { margin-top: 10px; } .margin-top-15 { margin-top: 15px; } .margin-top-20 { margin-top: 20px; } .margin-top-30 { margin-top: 30px; } .margin-top-40 { margin-top: 40px; } .margin-top-50 { margin-top: 50px; } .margin-top-60 { margin-top: 60px; } .margin-bottom-5 { margin-bottom: 5px; } .margin-bottom-10 { margin-bottom: 10px; } .margin-bottom-15 { margin-bottom: 15px; } .margin-bottom-20 { margin-bottom: 20px; } .margin-bottom-30 { margin-bottom: 30px; } .margin-bottom-40 { margin-bottom: 40px; } .margin-bottom-50 { margin-bottom: 50px; } .margin-bottom-60 { margin-bottom: 60px; } @media only screen and (max-width : 767px) { .row .col.col-xs-no-padding { margin-left: -15px; margin-right: -15px; } .margin-xs-top-0 { margin-top: 0; } .margin-xs-top-5 { margin-top: 5px; } .margin-xs-top-10 { margin-top: 10px; } .margin-xs-top-15 { margin-top: 15px; } .margin-xs-top-20 { margin-top: 20px; } .margin-xs-top-30 { margin-top: 30px; } .margin-xs-bottom-0 { margin-bottom: 0; } .margin-xs-bottom-5 { margin-bottom: 5px; } .margin-xs-bottom-10 { margin-bottom: 10px; } .margin-xs-bottom-15 { margin-bottom: 15px; } .margin-xs-bottom-20 { margin-bottom: 20px; } .margin-xs-bottom-30 { margin-bottom: 30px; } } @media only screen and (min-width : 768px) and (max-width : 991px) { .row .col.col-sm-no-padding { margin-left: -15px; margin-right: -15px; } .margin-sm-top-0 { margin-top: 0; } .margin-sm-top-5 { margin-top: 5px; } .margin-sm-top-10 { margin-top: 10px; } .margin-sm-top-15 { margin-top: 15px; } .margin-sm-top-20 { margin-top: 20px; } .margin-sm-top-30 { margin-top: 30px; } .margin-sm-bottom-0 { margin-bottom: 0; } .margin-sm-bottom-5 { margin-bottom: 5px; } .margin-sm-bottom-10 { margin-bottom: 10px; } .margin-sm-bottom-15 { margin-bottom: 15px; } .margin-sm-bottom-20 { margin-bottom: 20px; } .margin-sm-bottom-30 { margin-bottom: 30px; } } @media only screen and (min-width : 992px) and (max-width : 1199px) { .margin-md-top-0 { margin-top: 0; } .margin-md-top-5 { margin-top: 5px; } .margin-md-top-10 { margin-top: 10px; } .margin-md-top-15 { margin-top: 15px; } .margin-md-top-20 { margin-top: 20px; } .margin-md-top-30 { margin-top: 30px; } .margin-md-bottom-0 { margin-bottom: 0; } .margin-md-bottom-5 { margin-bottom: 5px; } .margin-md-bottom-10 { margin-bottom: 10px; } .margin-md-bottom-15 { margin-bottom: 15px; } .margin-md-bottom-20 { margin-bottom: 20px; } .margin-md-bottom-30 { margin-bottom: 30px; } } @media only screen and (min-width : 1200px) { .margin-lg-top-0 { margin-top: 0; } .margin-lg-top-5 { margin-top: 5px; } .margin-lg-top-10 { margin-top: 10px; } .margin-lg-top-15 { margin-top: 15px; } .margin-lg-top-20 { margin-top: 20px; } .margin-lg-top-30 { margin-top: 30px; } .margin-lg-bottom-0 { margin-bottom: 0; } .margin-lg-bottom-5 { margin-bottom: 5px; } .margin-lg-bottom-10 { margin-bottom: 10px; } .margin-lg-bottom-15 { margin-bottom: 15px; } .margin-lg-bottom-20 { margin-bottom: 20px; } .margin-lg-bottom-30 { margin-bottom: 30px; } } /*aspect ratio*/ @media (max-width:767px) { .hidden-xs { display: none !important; } .aspect-ratio.ratio-xs-1-1:before { padding-top: 100%; } .aspect-ratio.ratio-xs-2-1:before { padding-top: 50%; } .aspect-ratio.ratio-xs-3-2:before { padding-top: 66.66666667%; } .aspect-ratio.ratio-xs-4-3:before { padding-top: 75%; } .aspect-ratio.ratio-xs-16-9:before { padding-top: 56.25%; } .aspect-ratio.ratio-xs-16-7:before { padding-top: 43.75%; } .aspect-ratio.ratio-xs-3-1:before {padding-top: 33.33333333%;}} @media only screen and (min-width : 768px) and (max-width : 991px) { .aspect-ratio.ratio-sm-1-1:before{padding-top:100%}.aspect-ratio.ratio-sm-2-1:before{padding-top:50%}.aspect-ratio.ratio-sm-3-2:before{padding-top:66.66666667%}.aspect-ratio.ratio-sm-4-3:before{padding-top:75%}.aspect-ratio.ratio-sm-16-9:before{padding-top:56.25%}.aspect-ratio.ratio-sm-16-7:before{padding-top:43.75%}.aspect-ratio.ratio-sm-3-1:before{padding-top:33.33333333%}}