app/template/default/Block/instagram_feed.twig line 1

Open in your IDE?
  1. {% block stylesheet %}
  2. <style>
  3. /**************/
  4. /*** LAYOUT ***/
  5. /**************/
  7. /* Feed container */
  8. #sb_instagram {
  9.   height: auto !important;
  10. }
  11. #sb_instagram {
  12.     width: 100%;
  13.     margin: 0 auto;
  14.     padding: 0;
  15.     -webkit-box-sizing: border-box;
  16.     -moz-box-sizing: border-box;
  17.     box-sizing: border-box;
  18. }
  19. #sb_instagram:after{
  20.     content: "";
  21.     display: table;
  22.     clear: both;
  23. }
  25. /*********************/
  26. /*** STYLE OPTIONS ***/
  27. /*********************/
  28. #sb_instagram.sbi_fixed_height{
  29.     overflow: hidden;
  30.     overflow-y: auto;
  31.     -webkit-box-sizing: border-box;
  32.     -moz-box-sizing: border-box;
  33.     box-sizing: border-box;
  34. }
  35. #sb_instagram #sbi_images{
  36.     width: 100%;
  37.     float: left;
  38.     line-height: 0;
  39.     overflow: hidden;
  41.     -webkit-box-sizing: border-box;
  42.     -moz-box-sizing: border-box;
  43.     box-sizing: border-box;
  44. }
  45. /* Remove header shadow/border */
  46. #sb_instagram .sbi_header_link {
  47.     -webkit-box-shadow: none;
  48.     box-shadow: none;
  49. }
  50. #sb_instagram .sbi_header_link:hover {
  51.     border: none;
  52. }
  54. /* Items */
  55. #sb_instagram #sbi_images .sbi_item{
  56.     display: -moz-inline-stack;
  57.     display: inline-block;
  58.     float: left;
  59.     vertical-align: top;
  60.     zoom: 1;
  61.     *display: inline;
  63.     max-height: 1000px;
  64.     padding: inherit !important;
  65.     margin: 0 !important;
  66.     text-decoration: none;
  67.     opacity: 1;
  68.     overflow: hidden;
  70.     -webkit-box-sizing: border-box;
  71.     -moz-box-sizing: border-box;
  72.     box-sizing: border-box;
  74.     -webkit-transition: all 0.5s ease;
  75.     -moz-transition: all 0.5s ease;
  76.     -o-transition: all 0.5s ease;
  77.     -ms-transition: all 0.5s ease;
  78.     transition: all 0.5s ease;
  79. }
  80. /* Transition items in */
  81. {# #sb_instagram #sbi_images .sbi_item.sbi_transition{
  82.     opacity: 0;
  83.     max-height: 0;
  84. } #}
  86. /* Cols */
  87. #sb_instagram.sbi_col_1 #sbi_images .sbi_item{ width: 100%; }
  88. #sb_instagram.sbi_col_2 #sbi_images .sbi_item{ width: 50%; }
  89. #sb_instagram.sbi_col_3 #sbi_images .sbi_item{ width: 33.33%; }
  90. #sb_instagram.sbi_col_4 #sbi_images .sbi_item{ width: 25%; }
  91. #sb_instagram.sbi_col_5 #sbi_images .sbi_item{ width: 20%; }
  92. #sb_instagram.sbi_col_6 #sbi_images .sbi_item{ width: 16.66%; }
  93. #sb_instagram.sbi_col_7 #sbi_images .sbi_item{ width: 14.28%; }
  94. #sb_instagram.sbi_col_8 #sbi_images .sbi_item{ width: 12.5%; }
  95. #sb_instagram.sbi_col_9 #sbi_images .sbi_item{ width: 11.11%; }
  96. #sb_instagram.sbi_col_10 #sbi_images .sbi_item{ width: 10%; }
  98. /* Disable mobile layout */
  99. #sb_instagram.sbi_col_1.sbi_disable_mobile #sbi_images .sbi_item{ width: 100%; }
  100. #sb_instagram.sbi_col_2.sbi_disable_mobile #sbi_images .sbi_item{ width: 50%; }
  101. #sb_instagram.sbi_col_3.sbi_disable_mobile #sbi_images .sbi_item{ width: 33.33%; }
  102. #sb_instagram.sbi_col_4.sbi_disable_mobile #sbi_images .sbi_item{ width: 25%; }
  103. #sb_instagram.sbi_col_5.sbi_disable_mobile #sbi_images .sbi_item{ width: 20%; }
  104. #sb_instagram.sbi_col_6.sbi_disable_mobile #sbi_images .sbi_item{ width: 16.66%; }
  105. #sb_instagram.sbi_col_7.sbi_disable_mobile #sbi_images .sbi_item{ width: 14.28%; }
  106. #sb_instagram.sbi_col_8.sbi_disable_mobile #sbi_images .sbi_item{ width: 12.5%; }
  107. #sb_instagram.sbi_col_9.sbi_disable_mobile #sbi_images .sbi_item{ width: 11.11%; }
  108. #sb_instagram.sbi_col_10.sbi_disable_mobile #sbi_images .sbi_item{ width: 10%; }
  110. /* Photos */
  111. #sb_instagram .sbi_photo_wrap{
  112.     position: relative;
  113. }
  114. #sb_instagram .sbi_photo{
  115.     display: block;
  116.     text-decoration: none;
  117. }
  118. #sb_instagram .sbi_photo img{
  119.     width: 100%;
  120.     height: auto;
  121. }
  122. #sb_instagram .sbi_no_js img{
  123.     display: none;
  124. }
  125. #sb_instagram a,
  126. #sb_instagram a:hover,
  127. #sb_instagram a:focus,
  128. #sb_instagram a:active{
  129.     outline: none;
  130. }
  131. #sb_instagram img{
  132.     display: block;
  133.     padding: 0 !important;
  134.     margin: 0 !important;
  135.     max-width: 100% !important;
  136.     opacity: 1 !important;
  137. }
  138. #sb_instagram .sbi_link{
  139.     position: absolute;
  140.     bottom: 0;
  141.     right: 0;
  143.     width: 100%;
  144.     padding: 10px 0;
  145.     background: rgba(0,0,0,0.5);
  146.     text-align: center;
  147.     color: #fff;
  148.     font-size: 12px;
  149.     line-height: 1.1;
  150. }
  151. #sb_instagram .sbi_link a{
  152.     padding: 0 6px;
  153.     text-decoration: none;
  154.     color: #fff;
  155.     font-size: 12px;
  156.     line-height: 1.1;
  158.     display: -moz-inline-stack;
  159.     display: inline-block;
  160.     vertical-align: top;
  161.     zoom: 1;
  162.     *display: inline;
  163. }
  164. #sb_instagram .sbi_link .sbi_lightbox_link{
  165.     padding-bottom: 5px;
  166. }
  167. #sb_instagram .sbi_link a:hover,
  168. #sb_instagram .sbi_link a:focus{
  169.     text-decoration: underline;
  170. }
  171. #sb_instagram .sbi_photo_wrap:hover .sbi_link,
  172. #sb_instagram .sbi_photo_wrap:focus .sbi_link{
  173.     display: block;
  174. }
  176. /* Videos */
  177. #sb_instagram svg:not(:root).svg-inline--fa {
  178.     height: 1em;
  179.     display: inline-block;
  180. }
  182. #sb_instagram .sbi_type_video .sbi_playbtn,
  183. #sb_instagram .sbi_type_carousel .sbi_playbtn,
  184. .sbi_type_carousel .fa-clone,
  185. #sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play,
  186. #sb_instagram .sbi_type_video .svg-inline--fa.fa-play{
  187.     display: block !important;
  188.     position: absolute;
  189.     z-index: 1;
  191.     color: #fff;
  192.     color: rgba(255,255,255,0.9);
  193.     font-style: normal !important;
  194.     text-shadow: 0 0 8px rgba(0,0,0,0.8);
  195. }
  196. #sb_instagram .sbi_type_video .sbi_playbtn,
  197. #sb_instagram .sbi_type_carousel .sbi_playbtn {
  198.     z-index: 2;
  199.     top: 50%;
  200.     left: 50%;
  201.     margin-top: -24px;
  202.     margin-left: -19px;
  203.     padding: 0;
  204.     font-size: 48px;
  205. }
  206. #sb_instagram .sbi_type_carousel .fa-clone{
  207.     right: 12px;
  208.     top: 12px;
  209.     font-size: 24px;
  210.     text-shadow: 0 0 8px rgba(0,0,0,0.3);
  211. }
  212. .sbi_type_carousel svg.fa-clone,
  213. #sb_instagram .sbi_type_video .svg-inline--fa.fa-play,
  214. #sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play{
  215.     -webkit-filter: drop-shadow( 0px 0px 2px rgba(0,0,0,.4) );
  216.     filter: drop-shadow( 0px 0px 2px rgba(0,0,0,.4) );
  217. }
  219. /* Loader */
  220. #sb_instagram .sbi_loader{
  221.     width: 20px;
  222.     height: 20px;
  224.     position: relative;
  225.     top: 50%;
  226.     left: 50%;
  227.     margin: -10px 0 0 -10px;
  228.     background-color: #000;
  229.     background-color: rgba(0,0,0,0.5);
  231.     border-radius: 100%;
  232.     -webkit-animation: sbi-sk-scaleout 1.0s infinite ease-in-out;
  233.     animation: sbi-sk-scaleout 1.0s infinite ease-in-out;
  234. }
  235. #sb_instagram br {
  236.     display: none;
  237. }
  238. #sbi_load p {
  239.     display: inline;
  240.     padding: 0;
  241.     margin: 0;
  242. }
  243. /* Loader in button */
  244. #sb_instagram #sbi_load .sbi_loader{
  245.     position: absolute;
  246.     margin-top: -11px;
  247.     background-color: #fff;
  248.     opacity: 1;
  249. }
  250. @-webkit-keyframes sbi-sk-scaleout {
  251.     0% { -webkit-transform: scale(0) }
  252.     100% {
  253.         -webkit-transform: scale(1.0);
  254.         opacity: 0;
  255.     }
  256. }
  257. @keyframes sbi-sk-scaleout {
  258.     0% {
  259.         -webkit-transform: scale(0);
  260.         -ms-transform: scale(0);
  261.         transform: scale(0);
  262.     } 100% {
  263.           -webkit-transform: scale(1.0);
  264.           -ms-transform: scale(1.0);
  265.           transform: scale(1.0);
  266.           opacity: 0;
  267.       }
  268. }
  270. #sb_instagram .fa-spin,
  271. #sbi_lightbox .fa-spin{
  272.     -webkit-animation: fa-spin 2s infinite linear;
  273.     animation: fa-spin 2s infinite linear
  274. }
  276. #sb_instagram .fa-pulse,
  277. #sbi_lightbox .fa-pulse{
  278.     -webkit-animation: fa-spin 1s infinite steps(8);
  279.     animation: fa-spin 1s infinite steps(8)
  280. }
  282. @-webkit-keyframes fa-spin {
  283.     0% {
  284.         -webkit-transform: rotate(0deg);
  285.         transform: rotate(0deg)
  286.     }
  287.     100% {
  288.         -webkit-transform: rotate(359deg);
  289.         transform: rotate(359deg)
  290.     }
  291. }
  293. @keyframes fa-spin {
  294.     0% {
  295.         -webkit-transform: rotate(0deg);
  296.         transform: rotate(0deg)
  297.     }
  298.     100% {
  299.         -webkit-transform: rotate(359deg);
  300.         transform: rotate(359deg)
  301.     }
  302. }
  303. /* Screen reader */
  304. .sbi-screenreader{text-indent: -9999px !important;display: block !important;width: 0 !important;height: 0 !important;line-height: 0 !important;text-align: left !important; }
  306. /* HEADER */
  307. #sb_instagram .sb_instagram_header{
  308.     float: left;
  309.     clear: both;
  310.     margin: 0 0 15px 0;
  311.     padding: 0;
  312.     line-height: 1.2;
  313.     width: 100%;
  314. }
  315. #sb_instagram .sb_instagram_header a{
  316.     float: left;
  317.     display: block;
  318.     /*width: 100%;*/
  319.     min-width: 100%\9;
  320.     text-decoration: none;
  321.     transition: color 0.5s ease;
  322. }
  323. .sbi_no_avatar .sbi_header_img{
  324.     background: transparent;
  325.     color: #333;
  326.     width: 36px;
  327.     height: 36px;
  328. }
  329. .sbi_no_avatar .sbi_header_hashtag_icon {
  330.     display: block;
  331.     color: #333;
  332.     opacity: 1;
  333.     -webkit-transition: background .6s linear,color .6s linear;
  334.     -moz-transition: background .6s linear,color .6s linear;
  335.     -ms-transition: background .6s linear,color .6s linear;
  336.     -o-transition: background .6s linear,color .6s linear;
  337.     transition: background .6s linear,color .6s linear
  338. }
  340. .sbi_no_avatar:hover .sbi_header_hashtag_icon {
  341.     display: block;
  342.     opacity: 1;
  343.     -webkit-transition: background .2s linear,color .2s linear;
  344.     -moz-transition: background .2s linear,color .2s linear;
  345.     -ms-transition: background .2s linear,color .2s linear;
  346.     -o-transition: background .2s linear,color .2s linear;
  347.     transition: background .2s linear,color .2s linear
  348. }
  349. /** Medium Header */
  350. /* Only use medium & large headers on devices above 480px */
  351. @media all and (min-width: 480px){
  352.     #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img {
  353.         width: 36px;
  354.         height: 36px;
  355.     }
  356.     #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img img {
  357.         width: 36px;
  358.         height: 36px;
  359.     }
  360.     #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3 {
  361.         display: none;
  362.     }
  363.     #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info,
  364.     #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio{
  365.         display: none;
  366.     }
  367.     #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3,
  368.     #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info,
  369.     #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio{
  370.         display: none;
  371.     }
  372. }
  374. /* Header profile pic */
  375. #sb_instagram .sb_instagram_header .sbi_header_img{
  376.   width: 36px;
  377.   overflow: hidden;
  378. }
  379. #sb_instagram .sb_instagram_header .sbi_header_img img{
  380.     border-radius: 0;
  381. }
  382. /* Profile pic hover */
  383. /* Profile pic hover */
  384. #sb_instagram .sb_instagram_header .sbi_header_img_hover{
  385.     opacity: .8;
  386. }
  388. #sb_instagram .sb_instagram_header .sbi_header_img_hover .sbi_new_logo,
  389. #sb_instagram .sb_instagram_header .sbi_header_hashtag_icon .sbi_new_logo{
  390.     margin: 0;
  391.     width: 36px;
  392.     height: 36px;
  393.     font-size: 36px;
  394. }
  395. #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_hashtag_icon .sbi_new_logo,
  396. .sb_instagram_header.sbi_medium .sbi_header_hashtag_icon .sbi_new_logo{
  397.     margin: 0;
  398.     width: 36px;
  399.     height: 36px;
  400.     font-size: 36px
  401. }
  403. #sb_instagram .sb_instagram_header.sbi_large .sbi_header_hashtag_icon .sbi_new_logo,
  404. .sb_instagram_header.sbi_large .sbi_header_hashtag_icon .sbi_new_logo {
  405.     margin: 0;
  406.     width: 36px;
  407.     height: 36px;
  408.     font-size: 36px
  409. }
  410. #sb_instagram .sb_instagram_header .sbi_header_img_hover i {
  411.     overflow: hidden;
  412.     background: url('../img/small-logo.png') no-repeat 0 0;
  413. }
  414. #sb_instagram .sb_instagram_header .sbi_header_img_hover{
  415.     z-index: 2;
  416.     transition: opacity 0.4s ease-in-out;
  417. }
  418. #sb_instagram .sb_instagram_header .sbi_fade_in{
  419.     opacity: 1;
  420.     transition: opacity 0.2s ease-in-out;
  421. }
  422. #sb_instagram .sb_instagram_header .sbi_header_img_hover{
  423.     position: absolute;
  424.     width: 100%;
  425.     top: 0;
  426.     bottom: 0;
  427.     left: 0;
  428.     text-align: center;
  429.     color: #333;
  430.     background: rgba(0,0,0,0.75);
  432.     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  433.     filter: alpha(opacity=0);
  434.     -moz-opacity: 0;
  435.     -khtml-opacity: 0;
  436.     opacity: 0;
  437.     border-radius: 0;
  438.     transition: opacity 0.2s;
  439. }
  440. /* Fade the Instagram icon in when hovering on the header */
  441. #sb_instagram .sb_instagram_header a:hover .sbi_header_img_hover,
  442. #sb_instagram .sb_instagram_header a:focus .sbi_header_img_hover{
  443.     opacity: 1;
  444. }
  445. /* Header text */
  446. #sb_instagram .sb_instagram_header .sbi_header_text {
  447.   display: none;
  448.     /*float: left;
  449.     width: 100%;
  450.     padding-top: 5px;*/
  451. }
  452. #sb_instagram .sb_instagram_header a{
  453.     text-decoration: none;
  454. }
  455. #sb_instagram .sb_instagram_header .sbi_header_text .sbi_bio,
  456. #sb_instagram .sb_instagram_header .sbi_header_text h3{
  457.   display: none;
  458.     /* float: left;
  459.     clear: both;
  460.     width: auto;
  461.     margin: 0 0 0 60px !important;
  462.     padding: 0 !important; */
  463. }
  464. #sb_instagram .sb_instagram_header h3{
  465.     font-size: 16px;
  466.     line-height: 1.3;
  467. }
  468. #sb_instagram .sb_instagram_header p{
  469.     font-size: 13px;
  470.     line-height: 1.3;
  471.     margin: 0;
  472.     padding: 0;
  473. }
  474. #sb_instagram p:empty { display: none; }
  475. #sb_instagram .sb_instagram_header .sbi_header_text img.emoji{
  476.     margin-right: 3px !important;
  477. }
  479. /* No bio */
  480. #sb_instagram .sb_instagram_header .sbi_header_text.sbi_no_bio h3{
  481.     padding-top: 9px !important;
  482. }
  483. #sb_instagram .sb_instagram_header .sbi_header_text.sbi_no_bio .sbi_bio_info{
  484.     clear: both;
  485. }
  488. /* Buttons */
  489. #sb_instagram #sbi_load{
  490.     float: left;
  491.     clear: both;
  492.     width: 100%;
  493.     text-align: center;
  494. }
  495. #sb_instagram #sbi_load .fa-spinner{
  496.     display: none;
  497.     position: absolute;
  498.     top: 50%;
  499.     left: 50%;
  500.     margin: -8px 0 0 -7px;
  501.     font-size: 15px;
  502. }
  503. #sb_instagram #sbi_load{
  504.     opacity: 1;
  505.     transition: all 0.5s ease-in;
  506. }
  507. #sb_instagram .sbi_load_btn .sbi_btn_text, #sb_instagram .sbi_load_btn .sbi_loader{
  508.     opacity: 1;
  509.     transition: all 0.1s ease-in;
  510. }
  511. #sb_instagram .sbi_hidden{
  512.     opacity: 0 !important;
  513. }
  514. #sb_instagram #sbi_load .sbi_load_btn,
  515. #sb_instagram .sbi_follow_btn a{
  516.     display: -moz-inline-stack;
  517.     display: inline-block;
  518.     vertical-align: top;
  519.     zoom: 1;
  520.     *display: inline;
  522.     padding: 7px 14px;
  523.     margin: 5px auto 0 auto;
  524.     background: #333;
  525.     color: #eee;
  526.     border: none;
  527.     color: #fff;
  528.     text-decoration: none;
  529.     font-size: 13px;
  530.     line-height: 1.5;
  532.     -moz-border-radius: 4px;
  533.     -webkit-border-radius: 4px;
  534.     border-radius: 4px;
  536.     -webkit-box-sizing: border-box;
  537.     -moz-box-sizing: border-box;
  538.     box-sizing: border-box;
  539. }
  540. #sb_instagram #sbi_load .sbi_load_btn {
  541.     position: relative;
  542. }
  543. /* Follow button */
  544. #sb_instagram .sbi_follow_btn{
  545.     display: -moz-inline-stack;
  546.     display: inline-block;
  547.     vertical-align: top;
  548.     zoom: 1;
  549.     *display: inline;
  550.     text-align: center;
  551. }
  552. #sb_instagram .sbi_follow_btn.sbi_top{
  553.     display: block;
  554.     margin-bottom: 5px;
  555. }
  556. #sb_instagram .sbi_follow_btn a{
  557.     background: #408bd1;
  558.     color: #fff;
  559. }
  560. #sb_instagram .sbi_follow_btn a,
  561. #sb_instagram .sbi_follow_btn a,
  562. #sb_instagram #sbi_load .sbi_load_btn{
  563.     transition: all 0.1s ease-in;
  564. }
  565. /* Hover state for default colors */
  566. #sb_instagram #sbi_load .sbi_load_btn:hover{
  567.     outline: none;
  568.     box-shadow: inset 0 0 20px 20px rgba(255,255,255,0.25);
  569. }
  570. #sb_instagram .sbi_follow_btn a:hover,
  571. #sb_instagram .sbi_follow_btn a:focus{
  572.     outline: none;
  573.     box-shadow: inset 0 0 10px 20px #359dff;
  574. }
  575. /* If a custom color is applied then just use opacity for the hover effect */
  576. #sb_instagram .sbi_follow_btn.sbi_custom a:hover,
  577. #sb_instagram .sbi_follow_btn.sbi_custom a:focus,
  578. #sb_instagram #sbi_load .sbi_load_btn.sbi_custom:hover{
  579.     box-shadow: inset 0 0 20px 20px rgba(255,255,255,0.15);
  580. }
  581. /* Active state */
  582. #sb_instagram .sbi_follow_btn a:active,
  583. #sb_instagram #sbi_load .sbi_load_btn:active{
  584.     box-shadow: inset 0 0 10px 20px rgba(0,0,0,0.3);
  585. }
  587. #sb_instagram .sbi_follow_btn .fa,
  588. #sb_instagram .sbi_follow_btn svg{
  589.     margin-bottom: -1px;
  590.     margin-right: 7px;
  591.     font-size: 15px;
  592. }
  593. #sb_instagram .sbi_follow_btn svg{
  594.     vertical-align: -.125em;
  595. }
  596. #sb_instagram #sbi_load .sbi_follow_btn{
  597.     margin-left: 5px;
  598. }
  600. /* Error messages */
  601. #sb_instagram .sb_instagram_error{
  602.     width: 100%;
  603.     text-align: center;
  604.     line-height: 1.4;
  605. }
  607. /* Mod only error msgs */
  608. #sbi_mod_error{
  609.     display: none;
  610.     border: 1px solid #ddd;
  611.     background: #eee;
  612.     color: #333;
  613.     margin: 10px 0 0;
  614.     padding: 10px 15px;
  615.     font-size: 13px;
  616.     text-align: center;
  617.     clear: both;
  619.     -moz-border-radius: 4px;
  620.     -webkit-border-radius: 4px;
  621.     border-radius: 4px;
  622. }
  623. #sbi_mod_error br {
  624.     display: initial !important;
  625. }
  626. #sbi_mod_error p{
  627.     padding: 5px 0 !important;
  628.     margin: 0 !important;
  629.     line-height: 1.3 !important;
  630. }
  631. #sbi_mod_error ol,
  632. #sbi_mod_error ul{
  633.     padding: 5px 0 5px 20px !important;
  634.     margin: 0 !important;
  635. }
  636. #sbi_mod_error li{
  637.     padding: 1px 0 !important;
  638.     margin: 0 !important;
  639. }
  640. #sbi_mod_error span{
  641.     font-size: 12px;
  642. }
  644. /* Medium */
  645. #sb_instagram.sbi_medium .sbi_playbtn,
  646. #sb_instagram.sbi_medium .sbi_photo_wrap .svg-inline--fa.fa-play{
  647.     margin-top: -12px;
  648.     margin-left: -9px;
  649.     font-size: 23px;
  650. }
  651. #sb_instagram.sbi_medium .sbi_type_carousel .sbi_photo_wrap .fa-clone{
  652.     right: 8px;
  653.     top: 8px;
  654.     font-size: 18px;
  655. }
  656. /* Small */
  657. #sb_instagram.sbi_small .sbi_playbtn,
  658. #sb_instagram.sbi_small .sbi_photo_wrap .svg-inline--fa.fa-play{
  659.     margin-top: -9px;
  660.     margin-left: -7px;
  661.     font-size: 18px;
  662. }
  663. #sb_instagram.sbi_small .sbi_type_carousel .sbi_photo_wrap .fa-clone{
  664.     right: 5px;
  665.     top: 5px;
  666.     font-size: 12px;
  667. }
  669. /* Media queries */
  670. @media all and (max-width: 640px){
  671.     /* Make 3-6 cols into 2 col */
  672.     #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
  673.     #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
  674.     #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
  675.     #sb_instagram.sbi_col_6 #sbi_images .sbi_item{
  676.         width: 50%;
  677.     }
  678.     /* Make 7-10 cols into 4 col */
  679.     #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
  680.     #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
  681.     #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
  682.     #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
  683.         width: 25%;
  684.     }
  685.     /* On mobile make the min-width 100% */
  686.     #sb_instagram.sbi_width_resp{
  687.         width: 100% !important;
  688.     }
  689. }
  690. @media all and (max-width: 480px){
  691.     /* Make all cols into 1 col */
  692.     #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
  693.     #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
  694.     #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
  695.     #sb_instagram.sbi_col_6 #sbi_images .sbi_item,
  696.     #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
  697.     #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
  698.     #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
  699.     #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
  700.         width: 33.333%;
  701.     }
  702. }
  704. /* NO JS */
  705. #sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap{
  706.     box-sizing: border-box;
  707.     position: relative;
  708.     overflow: hidden;
  709. }
  710. #sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap:before {
  711.     content: "";
  712.     display: block;
  713.     padding-top: 100%;
  714.     z-index: -300;
  715. }
  716. #sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo {
  717.     position:  absolute;
  718.     top: 0;
  719.     left: 0;
  720.     bottom: 0;
  721.     right: 0;
  722. }
  723. #sb_instagram.sbi_no_js #sbi_images .sbi_item.sbi_transition {
  724.     opacity: 1;
  725.     max-height: 640px;
  726. }
  727. #sb_instagram.sbi_no_js .sbi_photo img,
  728. #sb_instagram.sbi_no_js .sbi_load_btn{
  729.     display: none;
  730. }
  731. #sb_instagram #sbi_images .sbi_js_load_disabled .sbi_imgLiquid_ready.sbi_photo {
  732.     padding-bottom: 0 !important;
  733. }
  734. #sb_instagram #sbi_mod_error .sb_frontend_btn {
  735.     display: inline-block;
  736.     padding: 6px 10px;
  737.     background: #ddd;
  738.     background: rgba(0,0,0,.1);
  739.     text-decoration: none;
  740.     border-radius: 5px;
  741.     margin-top: 10px;
  742.     color: #444
  743. }
  745. #sb_instagram #sbi_mod_error .sb_frontend_btn:hover {
  746.     background: #ccc;
  747.     background: rgba(0,0,0,.15)
  748. }
  750. #sb_instagram #sbi_mod_error .sb_frontend_btn .fa {
  751.     margin-right: 2px
  752. }
  753. </style>
  754. {% endblock %}
  756. {% block javascript %}
  757. <script src="{{ asset('assets/sbi-js/sbi-scripts.js') }}"></script>
  758. {% endblock %}
  759. <section class="ec-top-instagram">
  760.     <div class="ec-secHeading">
  761.         <span class="ec-secHeading__en">Instagram</span>
  762.         {#<span class="ec-secHeading__line"></span>
  763.         <span class="ec-secHeading__ja">インスタグラム</span>#}
  764.     </div>
  765.     <div class="ec-top-instagram__inner">
  766.         {{ instagram() }}
  767.     </div>
  768. </section>