/*
Theme Name: Aprozes
Theme URI: https://aprozes.com
Description: Theme for Aprozes 2019 
Author: Shashank Tripathi
Author URI: https://shanx.com/
*/

/* ========================================================================
   Component: Base
   GREY: #303030
   BLUE:        #266DB7  (Estonia Flag Blue -- heavy blue) 
   Light BLUE:  #EBF6FB  ....OLD: #DFE8F2
   GOLD :       #D4AF37	
   SILVER:      #C0C0C0	
                    ....additional Blue: #266DB7   (Estonia Flag Blue -- balanced)
 ========================================================================== */

html, input {
    font-family:  forma-djr-text,-apple-system,BlinkMacSystemFont,Roboto,'Segoe UI',Oxygen,Ubuntu,sans-serif; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    background: #F2F5EB ; 
    font-size: 1.025em; 
    letter-spacing: -0.55px; 
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    color: #555;

}

input { 
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0 !important; 
}

body, h3, h2, h4, h5, h6, form, input  {
    font-family: forma-djr-text,-apple-system,BlinkMacSystemFont,Roboto,'Segoe UI',Oxygen,Ubuntu,sans-serif; 
}
h1  {
    font-family: forma-djr-text,-apple-system,BlinkMacSystemFont,Roboto,'Segoe UI',Oxygen,Ubuntu,sans-serif; 
    line-height: 1.2; 
    letter-spacing: 1px; 
}
.uk-section-secondary { background: #8E5A5D }
.opa5 { opacity: 0.5 }

#fader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    pointer-events: none;
    background: white;
    animation-duration: 100ms;
    animation-timing-function: ease-in-out;
}

@keyframes fade-out {
    from { opacity: 1 }
      to { opacity: 0 }
}

@keyframes fade-in {
    from { opacity: 0 }
      to { opacity: 1 }
}

#fader.fade-out {
    opacity: 0;
    animation-name: fade-out;
}

#fader.fade-in {
    opacity: 1;
    animation-name: fade-in;
}


.bg { background: #F2F5EB ;  }
.uk-text-italic p, em { font-style: italic; font-weight: inherit; color: inherit !important; }
.uk-text-upper { text-transform: uppercase }

/*.uk-flexs-middle  [class^="uk-width-"]  { padding-top: 0.3em; padding-bottom: 0.3em }*/
.noborder { border: 0 !important }
a { color: #80AAD5;  color: #587402;text-decoration: none; font-weight: 700; border-bottom: #ddd solid 1px; transition: 0.2s all ease-in; }
a:hover {  color: #333; text-decoration: none; border-bottom: #000 solid 1px; transition: 0.2s all ease-out; }

.main-content a { color: #266DB7;  }
.main-content a:hover { color: #000;  }

/*
.fullwidth { 
  width: 100vw;
  margin-left: -50vw;
  left: 50%;
  margin-top: 1.5em; 
  margin-bottom: 1.5em; 
  position: relative; 
  clear: both; 
  display: block; 
}
*/
.fullwidth {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
.uk-card-hover { transition: 0.2s all ease-in !important; }
.uk-box-shadow-small:hover img  { transform: scale(1.15) !important;  }

.t1, .t2, h1, .sh1 { font-weight: 200; }
.t7, h4 { font-weight: 700 }
.hero  { font-weight: 100 !important; font-size: 6rem; color: #C4C4C4; margin: 0; padding: 0 }



h4 a { color:#80AAD5 !important; border: 0 }
.uk-width-60 { width: 20px !important }
h2, h3, .sh2, .sh3 { font-weight: 200; line-height: 1.2 }


.uk-card:hover { 
  box-shadow: 0 14px 25px rgba(0,0,0,0.16);
}

@-webkit-keyframes hvr-pop {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}
@keyframes hvr-pop {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}
.hvr-pop {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
  -webkit-animation-name: hvr-pop;
  animation-name: hvr-pop;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

.hvr-pop:hover img { 
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

/* Links
 ========================================================================== */

.uk-link {
  color: #06263F;
  text-decoration: none;
  cursor: pointer;
}
.uk-link:hover {
  color: #000000;
  text-decoration: none;
}

/* TO REMOVE THE UGLY BLUE OUTLINE */
*:focus {outline:none !important}
::selection {
  background: #D5E3F1;
  color: #222;
}
::-moz-selection {
  background: #D5E3F1;
  color: #222;
}


.uk-button-menu, .uk-dropdown { 
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); 
    width: 250px; 
}



.shade { 
    box-shadow:0 2px 15px rgba(0,0,0,.08);
    transition:.2s all ease-in; 
}
.shade:hover { 
    box-shadow:0 7px 25px rgba(0,0,0,.25);
    transition:.2s all ease-out; 
    /*transform: scale(1.009); */
}


a img { border: 0} 

.uk-text-bold, strong { font-weight: 700; }
.apart { letter-spacing: 0.17em}

a.redd { color: #520909 !important; opacity: 0.5 !important; transition: 0.3s all ease-out; border: 0 }
a.redd:hover { color: #000 !important; transition: 0.3s all ease-in; opacity: 1 !important; ; border: 0}


/*

.underl, a.curr {
  position: relative;
  text-decoration: none; 
  line-height: 1.35 !important; 
}
a.curr { 
  color: #000 !important; 
  opacity: 1 !important; 
}
.underl, .underl:hover, a.curr:hover {
  text-decoration: none;
}

.underl:after, a.curr:after{
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  display: block;
  right: 0;
  background: #80AAD5;
  transition: width .2s ease;
  -webkit-transition: width .2s ease;
}

.underl:hover:after, a.curr:after {
  width: 100%;
  left: 0;
  top: 1;
}



.uk-section-primary { background-color: #266DB7 }
.uk-section-secondary { background-color: #000 }

.estmenu a { opacity: 0.7;  line-height: 1.9rem; font-size: 18px; font-weight: 300; text-transform: uppercase; color: #000; display: inline-block; margin-right: 1.6rem; letter-spacing: 0.2px; border: 0 ;}
.estmenu a:hover { color: #000; text-decoration: none; opacity: 1; transition: all ease-in 0.3s; }
.estmenu a.curr2 {  margin-top: 5px; line-height: 1.35rem; font-weight: 500; color: #000; border-bottom: 4.2px solid #000; opacity: 1; }
.estmenu a.uk-button { opacity: 0.8; background: transparent  !important;  }
.estmenu a.uk-button:hover { opacity: 1; color: #000  !important; }
.estmenu .uk-button:hover { background: #fff !important; color: #000 !important }
.estmenu .searchbutton  { line-height: 2 }


 ul.estmenu li a { font-size: 1.35rem;  font-weight: 200; letter-spacing: 1px;   padding-top: 1rem !important; padding-bottom: 1rem !important; color: #fff }
 ul.estmenu a span { line-height: 1.5 }
 ul.estmenu li a:active, ul.estmenu li a:hover, ul.estmenu li a.curr  { background: transparent; opacity: 1; color: #fff;   background: rgba(0,0,0,.1);  }
 ul.estmenu li, ul.estmenu li a {  width: 100% }
 ul.estmenu li.curr {  color: #fff; }


#container-social, #container-search-mobile { text-align: center } 

#container-search-mobile .uk-inline { width: 90% !important; margin: auto ; padding: 2px}
#container-search-mobile input[type=text] { height: 60px; font-size: 1.5em; font-weight: 300; letter-spacing: 0.3px; background-color: #000;  border: 0 !important; color: #999 !important  } 
#container-search-mobile input[type=text]:focus {  color: #fff !important ; background: #111; transition: 0.3s ease all } 
.uk-form-icon, #container-search-mobile input[type=text]::placeholder { color: #ccc !important ; } 

#container-social a {  background: #bbb !important; color: #eee !Important; padding: 1rem; border-radius: 50%;  }
#container-social a:hover, #container-social a:active {  background: #000 !important; color: #fff !Important; transition: 0.3s all ease }
#container-social a .uk-icon { width: 100px; height: auto; }
*/

/* Hvr effects - bounce to right */

/*
@-webkit-keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}
@keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}
.hvr-ripple-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.hvr-ripple-out:before {
  content: '';
  position: absolute;
  border: #e1e1e1 solid 6px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
.hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before {
  -webkit-animation-name: hvr-ripple-out;
  animation-name: hvr-ripple-out;
}




.hvr-bounce-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.hvr-bounce-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #266DB7;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active {
  color: white;
}
.hvr-bounce-to-right:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}



.underl2 {
   position: relative;
  text-decoration: none;
}
.underl2:hover {
}

.underl2:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 4.2px;
  bottom: 0;
  top: 10; 
  left: 0;
  display: block; 
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;
}
.underl2:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.underl2-light:before {
  background-color: #fff;
}
*/


/*
.overl, .overcurr {
   position: relative;
   text-decoration: none;

}
.overcurr { font-weight: 500 !important; opacity: 1 !important }
.overl:before, .overcurr:before {
  content: '';
  position: absolute;
  width: 0;
  height: 4.2px;
  bottom: 0;
  top: 0; 
  left: 0;
  display: block; 
  background-color: #266DB7;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;
}

.overcurr:before { 
  width: 100%; 
  background-color: #000; 
  visibility: visible; 
}
.overl:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  width: 100%; 
  transition: all 0.2s ease-out 0s;
}




  .hamburger { padding: 0; transform: scale(0.8); }
  .hamburger:hover { transform: scale(0.85); }

.bigimg { width: 200px; height: auto; padding: 5% !important}


span.wpcf7-list-item { display: block; }


input[type=text], input[type=email], textarea { border: 1px #ccc solid; width: 100%;  }
input[type=text]:focus, textarea:focus { 
    border: 1px #666 solid !important; 
    background: #fff 
  }
.uk-form-large:focus { 
  background: rgba(255,255,255,.0) !important;
  color: rgba(255,255,255,.9); 
  transition: 0.2s ease-in all; 
}

.uk-button-large, input[type=submit],input[type=button] { 
    background: #266DB7 !important; 
    cursor: pointer; 
    letter-spacing: 0.15rem;  
    font-weight: 500; 
    color: #ddd; 
  }
.uk-button-large:hover, input[type=submit]:hover,input[type=button]:hover { 
    transition: all 0.3s ease; 
    background: #333 !important; 
    color:#fff !important;
}
.uk-button-disabled { 
  background: #eee;
  color: #999;  
}
.ghostbutton { 

    background: #fff !important; 
    color: #266DB7; 
    border: 1px #266DB7 solid; 

}

.sponsorslist img { 
   transform: scale(1); 
   transition: 0.3s ease-out all; 
}
.sponsorslist img:hover { 
   transform: scale(1.25); 
   transition: 0.2s ease-in all; 
}
*/

/* Initial state: Image hidden (because to hide alt text) */
.lazy {
  transition-property: opacity, transform;
  transition-duration: 1s, 0.7s;
}
.lazy:not([src]) {
  visibility: hidden;
}
/* Placeholder state: Image is not loaded, yet */
.lazy[src^='data:image'] {
  visibility: visible;
  opacity: 0;
}
/* End state: Image shown (Placeholder is replaced) */
.lazy[src]:not([src^='data:image']) {
  visibility: visible;
  opacity: 1;
}
.section-img {
  position: absolute;
  top: 0;
  left: 40px;
  bottom: 0;
  background-color: red;
  width: calc(50vw - 20px);
}


/*****  HAMBURGER  ******/

/* 


 .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after and modify its height.


 */
button.hamburger.is-active .hamburger-inner,
button.hamburger.is-active .hamburger-inner::before,
button.hamburger.is-active .hamburger-inner::after {
  background-color: #fff;
}
.stickyactive { box-shadow: 0 5px 15px rgba(0,0,0,0.08);  }
.stickyactive button.hamburger.is-active .hamburger-inner,
.stickyactive button.hamburger.is-active .hamburger-inner::before,
.stickyactive button.hamburger.is-active .hamburger-inner::after {
  background-color: #000;
}

.top-section {
  min-height: 600px;
  height: 600px;
  transition: min-height 0.3s cubic-bezier(0.16, 0.75, 0.47, 1);
}


/***** 
      Z-INDEX FOR HAMBURGER 
*****/
.top-section .top-content { z-index: 3; }
.top-section::after { z-index: 1; }
button.hamburger   { z-index: 950; }



/* ========================================================================
   Sticky bar when active
 ========================================================================== */

.stickyactive  { 
        background-color: rgba(255, 255, 255, 0.8); 
        -webkit-backdrop-filter: saturate(180%) blur(3px);
        backdrop-filter: saturate(180%) blur(3px);
/*        height: 4.2rem;  */
   }


blockquote { margin: 3.5em 0 2em 0; padding: 10px }
blockquote:before {
  content: '\201C';
  width: 1rem;
  height: 6rem;
  font-size: 100px; 
  top: 5px;
  left: 0em;
  float: left; 
  transform: translate(-50%, -50%);
  font-style: normal; 
  color: #555; 
}
blockquote p { font-style: normal; font-size: 18px; line-height: 26px !important; color: #555}
blockquote p  { padding-left: 60px; }
blockquote span { text-transform: uppercase; font-size: 14px; line-height: 0.5 }
blockquote span.who   { font-weight: 500; color: #000; margin: 0; margin-top: 30px !important; padding: 0 }
blockquote span.title { font-weight: 300; color: #333; margin: 0; padding: 0 }

/* ======================================================
              MEDIA QUERIES
    https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862
=======================================================*/

/* Phone landscape and smaller */
@media (max-width: 399px) {

        .top-section, .top-content { min-height: 500px; height: 90vh; padding-left: 25px; padding-right: 25px; }
        .logo { width: 120px !important }
        h2, .sh2 { font-size: 28px; line-height: 38px; font-weight: 700 }
        h4 { font-weight: 400 }
        p { font-size: 18px; line-height: 22px; font-weight: 400; letter-spacing: 0.6px }
        .uk-text-small { font-size: 14px; line-height: 18px; font-weight: 400; letter-spacing: 0.6px; color: #333 }

}


@media (max-width: 599px) {

        .top-section, .top-content { min-height: 500px; height: 90vh; padding-left: 25px; padding-right: 25px; }
        .logo { width: 120px !important }
        h2, .sh2 { font-size: 42px; line-height: 50px; font-weight: 700 }
        h4 { font-weight: 400 }
        p { font-size: 18px; line-height: 22px; font-weight: 400; letter-spacing: 0.6px }
        .uk-text-small { font-size: 14px; line-height: 18px; font-weight: 400; letter-spacing: 0.6px; color: #333 }


} /* End of phone landscape and smaller */


/* Tablet and bigger */
@media (min-width: 600px) {

        .top-section, .top-content { min-height: 620px; height: 90vh }
        .logo { width: 130px !important }
        h2, .sh2 { font-size: 50px; line-height: 60px; font-weight: 700 }
        h4 { font-weight: 400 }
        p { font-size: 19px; line-height: 24px; font-weight: 400; letter-spacing: 0.6px }
        .uk-text-small { font-size: 14px; line-height: 22px; font-weight: 400; letter-spacing: 0.6px; color: #333 }

} /* End of tablet landscap and bigger */




/* Tablet landscape */
@media (min-width: 960px) {

        .top-section, .top-content { min-height: 580px; height: 90vh }
        h2, .sh2 { font-size: 56px; line-height: 68px; font-weight: 700 }
        h4 { font-weight: 400 }
        p { font-size: 19.25px; line-height: 26px; font-weight: 400; letter-spacing: 0.6px }
        .uk-text-small { font-size: 15px; line-height: 22px; font-weight: 400; letter-spacing: 0.6px; color: #333 }

} /* End of tablet landscap and bigger */


/* Desktop and bigger */
@media (min-width: 1200px) {

} /* End of Desktop and bigger */


/* Large desktops */
@media (min-width: 1599px) {


        h2, .sh2 { font-size: 80px; line-height: 90px; font-weight: 700 }
        h4 { font-weight: 400 }
        p { font-size: 22px; line-height: 29px; font-weight: 400; letter-spacing: 0.6px }
        .uk-text-small { font-size: 18px; line-height: 23px; font-weight: 400; letter-spacing: 0.6px; color: #333 }


}