@font-face {
    font-family: 'BentonSansCond Medium';
    src: url('./assets/fonts/BentonSansCond-Medium.woff2') format('woff2'),
        url('./assets/fonts/BentonSansCond-Medium.woff') format('woff'),
        url('./assets/fonts/BentonSansCond-Medium.svg#BentonSansCond-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BentonSansCond Regular';
    src: url('./assets/fonts/BentonSansCond-Regular.woff2') format('woff2'),
        url('./assets/fonts/BentonSansCond-Regular.woff') format('woff'),
        url('./assets/fonts/BentonSansCond-Regular.svg#BentonSansCond-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BentonSansCond Bold';
    src: url('./assets/fonts/BentonSansCond-Bold.woff2') format('woff2'),
        url('./assets/fonts/BentonSansCond-Bold.woff') format('woff'),
        url('./assets/fonts/BentonSansCond-Bold.svg#BentonSansCond-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sindelar RegularA';
    src: url('./assets/fonts/Sindelar-RegularA.woff2') format('woff2'),
        url('./assets/fonts/Sindelar-RegularA.woff') format('woff'),
        url('./assets/fonts/Sindelar-RegularA.svg#Sindelar-RegularA') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



@font-face {
    font-family: 'Sindelar Medium';
    src: url('./assets/fonts/Sindelar-Medium.woff2') format('woff2'),
        url('./assets/fonts/Sindelar-Medium.woff') format('woff'),
        url('./assets/fonts/Sindelar-Medium.svg#Sindelar-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: 'Lohit_Gujarati Regular';
  src: url('./assets/fonts/Lohit_Gujarati.ttf') format('ttf'),
      url('./assets/fonts/Lohit_Gujarati.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lohit_Gujarati Medium';
  src: url('./assets/fonts/Lohit_Gujarati.ttf') format('ttf'),
      url('./assets/fonts/Lohit_Gujarati.ttf') format('ttf');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Lohit_Gujarati Bold';
  src: url('./assets/fonts/Lohit_Gujarati.ttf') format('ttf'),
      url('./assets/fonts/Lohit_Gujarati.ttf') format('ttf');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: 'Sindelar Semibold';
    src: url('./assets/fonts/Sindelar-Semibold.woff2') format('woff2'),
        url('./assets/fonts/Sindelar-Semibold.woff') format('woff'),
        url('./assets/fonts/Sindelar-Semibold.svg#Sindelar-Semibold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
 // Define the breakpoints
 $breakpoint-small: 767px;
 $breakpoint-med-small: 768px;
 $breakpoint-med: 1024px;


@font-face {
  font-family: 'icomoon';
  src:  url('./assets/fonts/icomoon.eot?f4wjas');
  src:  url('./assets/fonts/icomoon.eot?f4wjas#iefix') format('embedded-opentype'),
    url('./assets/fonts/icomoon.ttf?f4wjas') format('truetype'),
    url('./assets/fonts/icomoon.woff?f4wjas') format('woff'),
    url('./assets/fonts/icomoon.svg?f4wjas#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-like:before {
  content: "\e917";
}
.icon-reply:before {
  content: "\e919";
}
.icon-flag:before {
  content: "\e91a";
}
.icon-stockmarket-up:before {
  content: "\e91b";
}
.icon-stockmarket-down:before {
  content: "\e91c";
}
.icon-progress-bar-cancel:before {
  content: "\e918";
}
.icon-progress-bar-check:before {
  content: "\e916";
}
.icon-time-stamp-09:before {
  content: "\e911";
}
.icon-share-12:before {
  content: "\e912";
}
.icon-go-to-top-13:before {
  content: "\e914";
}
.icon-audio:before {
  content: "\e910";
}
.icon-marker:before {
  content: "\e913";
}
.icon-text:before {
  content: "\e915";
}
.icon-star-default:before {
  content: "\e90d";
}
.icon-camera-icon:before {
  content: "\e90e";
}
.icon-play-icon:before {
  content: "\e90f";
}
.icon-apple:before {
  content: "\e908";
}
.icon-android-logo:before {
  content: "\e909";
}
.icon-instagram:before {
  content: "\e90a";
}
.icon-youtube:before {
  content: "\e90b";
}
.icon-facebook-logo:before {
  content: "\e900";
}
.icon-left-arrow:before {
  content: "\e901";
}
.icon-menu:before {
  content: "\e90c";
}
.icon-right-arrow:before {
  content: "\e902";
}
.icon-save:before {
  content: "\e903";
}
.icon-search:before {
  content: "\e904";
}
.icon-telegram:before {
  content: "\e905";
}
.icon-twitter:before {
  content: "\e906";
}
.icon-whatsapp:before {
  content: "\e907";
}
.icon-comments:before {
  content: "\e91d";
}

// Setup the function in your functions or helpers files, wherever you keep these bits.
@function headings($from:1, $to:6) {
    @if $from == $to {
        @return 'h#{$from}';
    } @else {
        @return 'h#{$from},' + headings($from+1, $to);
    }
}

//@include transition(all,2s,ease-out); 
@mixin transition($what: all, $time: 0.2s, $how: ease-in-out) {
    -webkit-transition: $what $time $how;
    -moz-transition:    $what $time $how;
    -ms-transition:     $what $time $how;
    -o-transition:      $what $time $how;
    transition:         $what $time $how;
}



//use@include screen(large) {width: 20%;}
@mixin screen($size, $type: max, $pixels: $breakpoint-small) {
  @if $size == 'small' {
    @media screen and ($type + -width: $breakpoint-small) {
        @content;
    }
  }
  @else if $size == 'med-small' {
    @media screen and ($type + -width: $breakpoint-med-small) {
        @content;
    }
  }
  @else if $size == 'med' {
    @media screen and ($type + -width: $breakpoint-med) {
        @content;
    }
  }
 @else if $size == 'large' {
    @media screen and ($type + -width: $breakpoint-med) {
        @content;
    }
  }
  @else if $size == 'custom' {
    @media screen and ($type + -width: $pixels + px) {
     @content;
    }
  }
  @else {
    @content;
  }
}

// Define vertical, horizontal, or both position
@mixin center($position) {
  position: absolute;
  
  @if $position == 'vertical' {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  @else if $position == 'horizontal' {
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translate(-50%);
  }
  @else if $position == 'both' {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}


//ratina images user: @include image-2x("logo2x.png", 100px, 25px);
@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    background-image: url($image);
    background-size: $width $height;
  }
}

//$start-color, $end-color, $orientation - vertical/horizontal/radial @include background-gradient(red, black, 'vertical');
@mixin background-gradient($start-color, $end-color, $orientation) { 
    background: $start-color;

    @if $orientation == 'vertical' {
      background: -webkit-linear-gradient(top, $start-color, $end-color);
      background: linear-gradient(to bottom, $start-color, $end-color);
    } @else if $orientation == 'horizontal' {
      background: -webkit-linear-gradient(left, $start-color, $end-color);
      background: linear-gradient(to right, $start-color, $end-color);
    } @else {
      background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color);
      background: radial-gradient(ellipse at center, $start-color, $end-color);
    }
}

//Padding mixin 
@mixin padding($top, $right, $bottom, $left) {
  padding-top: $top;
  padding-right: $right;
  padding-bottom: $bottom;
  padding-left: $left;
}
//Margin mixin @include padding(top, right, bottom, left);
@mixin margin($top, $right, $bottom, $left) {
  margin-top: $top;
  margin-right: $right;
  margin-bottom: $bottom;
  margin-left: $left;
}

// opecity @include opacity(0.8);
@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}



@mixin tooltip(
  $tooltip-background-color: #fff,
  $tooltip-arrow-base: 2em,
  $tooltip-arrow-length: 1em,
  $tooltip-border-width: 0,
  $tooltip-border-color: transparent,
  $tooltip-transition-out-duration: .3s
) {
// Sizing and positioning
box-sizing: border-box;
position: absolute;
left: 50%;
bottom: 100%; // displayed on top
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
font-size: 14px;
font-weight: 300;
width: 234px;
height: auto;
border-radius: 5px;
margin-bottom: $tooltip-arrow-length;

// Text and color properties.
background-color: $tooltip-background-color;
text-align: center;

// Animated properties.
visibility: hidden;
opacity: 0;
transform: translate(-50%, $tooltip-arrow-length);
transition:
  visibility 0s linear $tooltip-transition-out-duration,
  opacity $tooltip-transition-out-duration ease-in 0s,
  transform $tooltip-transition-out-duration ease-in 0s;

// Disable events.
pointer-events: none;

&::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  width: 0; height: 0;
  // Draw a triangle.
  border-top: ($tooltip-arrow-length - $tooltip-border-width) solid $tooltip-background-color;
  border-left: ($tooltip-arrow-base / 2 - $tooltip-border-width) solid transparent;
  border-right: ($tooltip-arrow-base / 2 - $tooltip-border-width) solid transparent;
  // Center the triangle.
  margin-left: ($tooltip-border-width - $tooltip-arrow-base / 2);
}

// Specific styles when the tooltip has a border
@if $tooltip-border-width {
  border: $tooltip-border-width solid $tooltip-border-color;

  &::before {
      content: "";
      position: absolute;
      top: 100%; left: 50%;
      width: 0; height: 0;
      // Draw another triangle to simulate a border.
      border-top: $tooltip-arrow-length solid $tooltip-border-color;
      border-left: ($tooltip-arrow-base / 2) solid transparent;
      border-right: ($tooltip-arrow-base / 2) solid transparent;
      // Center the triangle.
      margin-left: ($tooltip-arrow-base / -2);
  }
}
}

@mixin has-tooltip($tooltip-transition-in-duration: .3s) {
position: relative;
// Prevent the tooltip from being clipped by its container.
overflow: visible;

// Display the tooltip on hover and on focus.
&:hover, &:focus {
  .tooltip {
      visibility: visible;
      opacity: 1;
      transform: translate(-50%, 0); // horizontally centered
      transition:
          visibility 0s linear 0s,
          opacity $tooltip-transition-in-duration ease-out 0s,
          transform $tooltip-transition-in-duration ease-out 0s;
  }
}
}

.has-tooltip {
  @include has-tooltip($tooltip-transition-in-duration: .3s);
}

.tooltip {
 font-family: 'Source Sans Pro', sans-serif;
  text-align: center;
  font-size: 14px;
  min-width: 10em;
  @include padding(10px,10px,10px,10px);
  box-shadow: 0 .05em .15em rgba(#fff, .1);
}

.tooltip-with-border {
  @include tooltip(
      $tooltip-background-color: white,
      $tooltip-arrow-base: 1.5em,
      $tooltip-arrow-length: .75em,
      $tooltip-border-width: .05em,
      $tooltip-border-color: #999,
      $tooltip-transition-out-duration: .2s
  );
  color: #333;
}

.tooltip-without-border {
  @include tooltip(
      $tooltip-background-color:#fff,
      $tooltip-arrow-base: 1em,
      $tooltip-arrow-length: .5em,
      $tooltip-transition-out-duration: .2s
  );
  color:#fff;
}

h2{
	font-size: 28px;
	font-family: 'BentonSansCond Bold';
	color: #245093;
	line-height: 1;
}

.btn-addto-round{
	border-radius: 18px;
	color: #2755A5;
	border: 1px solid #2755A5;
	display: inline-block;
	font-family: 'BentonSansCond Medium';
	font-size: 12px;
	text-align: center;
	line-height: 1;
	padding: 11px 16px;
	vertical-align: super;
	@include screen(small){
		padding: 11px 7px;
		font-size: 11px;
	}
	
	&.red-color{
		border: 1px solid #AF1055;
		&:hover{
			border: 1px solid #000;
			color: #000 !important;
		}
	}
	&.color-white{
		border: 1px solid #fff;
		&:hover{
			border: 1px solid #000;
			color: #000 !important;
		}
	}
	&:hover{
		border: 1px solid #000;
		color: #000;
	}
}
img{
	max-width: 100%;
	height: auto;
}