body {font-family: 'Doppio One', sans-serif;}

/* MENU CSS */

.menu-transparent {background: #ff000000 !important;}

/* COLORS */

.g-c-ingas1 {color: #303c49;}

.g-c-ingas-red {color: #d11f3d !important;}

.g-c-ingas-blue {color: #0f91b8 !important;}

.g-c-ingas-yellow {color: #d7b528 !important;}

/* BACKGROUND */

.g-bg-ingas1 {background: #303c49;}

.g-bg-ingas-yellow {background: #d7b528 !important;}

/* BUTTONS */

.g-button-ingas {background: white !important; border-color: rgba(48, 60, 73, 0.19) !important; color:#303c49;}

.g-button-ingas:hover {background: #6f7885 !important; border-color: #6f7885 !important;}

.g-button-ingas-red {background: #d11f3d !important;}

.g-button-ingas-red:hover {border-color: red !important; background: red !important;}

.g-button-ingas-blue {background: #0f91b8 !important;} 

.g-button-ingas-blue:hover {border-color: #0fb0e0 !important; background: #0fb0e0 !important;}                 

.g-button-ingas-yellow {background: #d7b528 !important;}

.g-button-ingas-yellow:hover {border-color: #f5c912 !important; background: #f5c912 !important;}

.svg-hover-yellow:hover + path {fill:  #f5c912  !important;}

.svg-hover-blue:hover {fill: #0fb0e0 !important;}

.svg-hover-red:hover {fill: red !important;}

.svg-hover1:hover a{color: yellow !important;}
/* BORDERS */

g-c-border-yellow {border-top: 6px solid rgb(205, 179, 59);}

g-c-border-blue {border-top: 6px solid rgb(15, 145, 184);}

g-c {border-top: 6px solid rgb(209, 31, 61) !important;}

.hover_underline:hover {text-decoration: underline !important;}

.custom-padding-left {padding-left: 70px !important;}

/* WIDTH */

.g-w-80 {width: 80%;}

.g-w-100 {width: 100%;}

.fa-square {width: 3% !important;}


/*  SVG size */
@media screen and (max-width:991px) {
    .detail--icon {
        width:100% !important;
    }
}

/* MEDIA QUERIES */

@media only screen 
and (min-device-width : 0px) 
and (max-device-width : 736px) {.xs-hidden {display: none;} .custom-padding{padding-left: 14% !important;} }

@media only screen 
and (min-device-width : 0px) 
and (max-device-width : 1023px)  { .md-xs-hidden {display: none;} .text-left--md-xs {text-align: left !important;} .svg-right-xs{right: 0 !important;}}
        

/* FONT */

@font-face {
    font-family: workoholix-font;
    src: url("/DoppioOne-Regular.ttf");
}

.dopio-font {font-family: 'Doppio One', sans-serif;}

.arial-font {font-family: 'Arial', sans-serif;}




/* SCROLL DOWN */
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);

#section10 { background: url(https://www.nxworld.net/example/css-scroll-down-button/bg10.jpg) center center / cover no-repeat;}

.demo a {
  position: absolute;
  bottom: 20px;
  left: 49.5%;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  color: #303c49;
  font : normal 400 20px/1 'Josefin Sans', sans-serif;
  letter-spacing: .1em;
  text-decoration: none;
  transition: opacity .3s;
}
.demo a:hover {
  opacity: .5;
}


#section10 a {
  padding-top: 60px;
}
#section10 a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  height: 50px;
  margin-left: -15px;
  border: 2px solid #303c49;
  border-radius: 50px;
  box-sizing: border-box;
}
#section10 a span::before {
  position: absolute;
  top: 10px;
  left: 50%;
  content: '';
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: #303c49;
  border-radius: 100%;
  -webkit-animation: sdb10 2s infinite;
  animation: sdb10 2s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb10 {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb10 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

::selection {
  background: #303c49; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #303c49; /* Gecko Browsers */          
}                                                                                                                       
                                                                                          


@media only screen 
and (max-device-width : 736px) { .mobile-logo {width: 50% !important; height: 10% !important;}}

@media only screen 
and (min-device-width : 737px)
and (orientation : landscape) { .landscape-margin-top {margin-top: -13% !important; }}

@media only screen 
and (max-device-width : 736px) 
and (orientation : landscape) {.landscape-margin-top {margin-top: 5% !important;} .demo {display: none !important;}}

@media only screen 
and (max-device-width : 320px)  {.demo {display: none !important;}}