<section id="{{:: shortcode.$id }}" class="section mask-{{ shortcode.options.mask }} {{ shortcode.options.visibility }} {{ shortcode.options.class }}" ng-class="{dark: shortcode.options.dark == 'true', 'has-mask': shortcode.options.mask,'has-parallax' : shortcode.options.parallax, 'uxb-sticky-section': shortcode.options.sticky == 'true', 'has-hover': shortcode.options.borderHover}">
      <div class="bg section-bg bg-fill fill" data-parallax-container=".section"
        ng-attr-data-parallax="-{{ shortcode.options.parallax }}" data-parallax-background wp-attachment="shortcode.options.bg" wp-attachment-size="shortcode.options.bgSize">

            <div ng-if="shortcode.options.videoMp4" class="video-overlay fill"></div>

            <video ng-if="shortcode.options.videoMp4"
                class="video-bg no-click {{shortcode.options.videoVisibility}}"
                preload="auto" autoplay="true" loop="loop" muted="muted">
                <source ng-if="shortcode.options.videoMp4" ng-src="{{shortcode.options.videoMp4}}" type="video/mp4">
                <source ng-if="shortcode.options.videoOgg" ng-src="{{shortcode.options.videoOgg}}" type="video/ogg">
                <source ng-if="shortcode.options.videoWebm" ng-src="{{shortcode.options.videoWebm}}" type="video/webm">
            </video>

            <div ng-if="shortcode.options.bgOverlay" class="section-bg-overlay fill"></div>

            <div ng-if="shortcode.options.effect" class="effect-{{shortcode.options.effect}} bg-effect fill no-click"></div>

            <div ng-if="shortcode.options.border" class="is-border is-{{shortcode.options.borderStyle}}"
            ng-class="{['hover-'+shortcode.options.borderHover ] : shortcode.options.borderHover}"
            ng-style="{
              'borderRadius': shortcode.options.borderRadius+'px',
              'borderWidth': shortcode.options.border,
              'margin': shortcode.options.borderMargin,
              'borderColor': shortcode.options.borderColor,
              }"
            ></div>

            <button ng-if="shortcode.options.scrollForMore" class="scroll-for-more icon absolute bottom h-center z-5">
                <i class="icon-angle-down" style="font-size:42px;"></i>
            </button>
      </div>

      <div ng-if="shortcode.options.dividerTop" class="ux-shape-divider ux-shape-divider--top ux-shape-divider--style-{{shortcode.options.dividerTop}}" ng-class="{'ux-shape-divider--flip': shortcode.options.dividerTopFlip == 'true','ux-shape-divider--to-front': shortcode.options.dividerTopToFront == 'true'}">
        <ng-include ng-if="$ctrl.store.flatsomeUrl" src="$ctrl.store.flatsomeUrl + '/assets/img/dividers/' + shortcode.options.dividerTop + '.svg'"></ng-include>
      </div>
      <div ng-if="shortcode.options.divider" class="ux-shape-divider ux-shape-divider--bottom ux-shape-divider--style-{{shortcode.options.divider}}" ng-class="{'ux-shape-divider--flip': shortcode.options.dividerFlip == 'true','ux-shape-divider--to-front': shortcode.options.dividerToFront == 'true'}">
        <ng-include ng-if="$ctrl.store.flatsomeUrl" src="$ctrl.store.flatsomeUrl + '/assets/img/dividers/' + shortcode.options.divider + '.svg'"></ng-include>
      </div>

      <div class="section-content relative">
        	<content></content>
      </div>

     <style>
        #{{:: shortcode.$id }} {min-height: {{ shortcode.options.height }};}
       	#{{:: shortcode.$id }} {background-color: {{ shortcode.options.bgColor }}!important;}
      	#{{:: shortcode.$id }} {padding-top: {{ shortcode.options.padding }}; padding-bottom: {{ shortcode.options.padding }};}
      	#{{:: shortcode.$id }} {margin-bottom: {{ shortcode.options.margin }};}
        #{{:: shortcode.$id }} .section-bg-overlay {background-color: {{ shortcode.options.bgOverlay }} }
        #{{:: shortcode.$id }} .section-bg{background-position: {{ shortcode.options.bgPos }} }
        #{{:: shortcode.$id }} .ux-shape-divider--top svg {height: {{ shortcode.options.dividerTopHeight }}; width: calc({{ shortcode.options.dividerTopWidth }}% + 2px); }
        #{{:: shortcode.$id }} .ux-shape-divider--top .ux-shape-fill {fill: {{ shortcode.options.dividerTopFill }}; }
        #{{:: shortcode.$id }} .ux-shape-divider--bottom svg {height: {{ shortcode.options.dividerHeight}}; width: calc({{ shortcode.options.dividerWidth }}% + 2px); }
        #{{:: shortcode.$id }} .ux-shape-divider--bottom .ux-shape-fill {fill: {{ shortcode.options.dividerFill }}; }
     </style>
</section>