@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Open+Sans:300,400,600,700&display=swap');

/* Responsive Classes */

.ckeditor .PageWidth{
  min-height:1px;
}

.MainWide img, .ckeditor img{
  max-width:100% !important;
}

html{scroll-behavior: smooth;}

.Spacer15{height:15px; width:100%;}
.Spacer35{height:35px; width:100%;}
.Spacer70{height:70px; width:100%;}

.DesktopBox{display:block;}
.MobileBox{display:none;}

.Clear{
  width:100%;
  clear:both;
  height:0px;
  overflow:hidden;
}

.WideDiv0,.WideDiv1,.WideDiv2,.WideDiv3,.WideDiv4{
   width:100%;
   height:auto;
   min-height:20px;
   padding:60px 0;
   position:relative;
}

.Div900, .Div700, .Div600 .Div500{
  width:92%;
  max-width:900px;
  margin:0 auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.Div700{max-width:700px;}
.Div600{max-width:600px;}
.Div500{max-width:500px;}

.Padding0{padding:0;}
.Padding10{padding:10px;}
.Padding20{padding:20px;}
.Padding30{padding:30px;}
.Padding40{padding:40px;}
.Padding50{padding:50px;}
.Padding60{padding:60px;}
.Padding70{padding:70px;}

.Div75{width:75%; float:left; height:auto; min-height:20px;}
.Div50{width:50%; float:left; height:auto; min-height:20px;}
.Div33{width:33.333%; float:left; height:auto; min-height:20px;}
.Div25{width:25%; float:left; height:auto; min-height:20px;}
.Div20{width:20%; float:left; height:auto; min-height:20px;}
.Div16{width:16.666%; float:left; height:auto; min-height:20px;}

.Div75, .Div50, .Div25, .Div33, .Div20, .Div16{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.Box66, .Box50, .Box33, .Box25{
  float:left;
  margin-right:4%;
  min-height:40px;
  margin-top:0;
  margin-bottom:10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.Box66{width:65.32%;}
.Box50{width:48%;}
.Box33{width:30.66%;}
.Box25{width:22%;}

.Box33:nth-child(3n), .Box50:nth-child(2n), .Box25:nth-child(4n){
  margin-right:0;
}

.Box66:last-child, .Box33:last-child{
  margin-right:0;
}

@media screen and (max-width: 750px){
  .Box66, .Box50, .Box33, .Box25, .Div50, .Div33, .Div20{
    width:100%;
    margin-right:0;
    margin-left:0;
  }
}

.Box100-100, .Box100-75, .Box100-60, .Box100-50{
  width:100%;
  overflow:hidden;
  position:relative;
  padding-top:100%;
  height:0;
}

.Box100-75{padding-top:75%;}
.Box100-60{padding-top:60%;}
.Box100-50{padding-top:50%;}

.Box100-Inner{
  position:absolute;
  width:100%;
  top:50%;
  transform:translateY(-50%);
}

.Div50L, .Div50R{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width:100%;
  max-width:600px;
  min-width:300px;
}

.Div50L{float:right; padding-right:8%;}
.Div50R{float:left; padding-left:8%;}

@media screen and (max-width: 1200px){
  .Div50L{
    padding-right:10%;
    padding-left:4%;
  }
  .Div50R{
    padding-right:4%;
    padding-left:10%;
  }
  .Box100-60{padding-top:70%;}
}

@media screen and (max-width: 1000px){
  .Box100-60{padding-top:85%;}
}

@media screen and (max-width: 900px){
  .Box100-60{padding-top:100%;}
}

@media screen and (max-width: 750px){
  .Div50L, .Div50R{
    float:none;
    margin:0 auto;
  }
  .Box100-60{padding-top:80%;}

  .Div50L, .Div50R{
    padding:4%;
  }
}

.HoverGrey{
  background:transparent;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
}

.HoverGrey:hover{
  background:rgba(0,0,0,0.1);
}

.HoverTransp{
   opacity: 1.0;
   filter: alpha(opacity=100);
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  cursor:pointer;
}

.HoverTransp:hover{
   opacity: 0.6;
   filter: alpha(opacity=60);
}

.GreyIcon{
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%);
}

.GreyIcon:hover{
    -webkit-filter: grayscale(50%); 
    filter: grayscale(50%);
}

/* Youtube Container */
.YoutubeContainer{
  position: relative;
  padding-top: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  border:1px solid #AAAAAA;
  margin-bottom:7px;
  border-radius:15px;
}

.YoutubeContainer iframe, .YoutubeContainer object, .YoutubeContainer embed, .YoutubeContainer div, .YoutubeContainer img {
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}

.Circle{border-radius:50%;}

/* ====================== */


.Row {
  display: flex; /* equal height of the children */
}

.Col, .ColLeftHidden, .ColRightHidden{
  flex: 1; /* additionally, equal width */
  min-width:350px;
  min-height:250px;
}

.InnerBox{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* FADE IN ON PAGE LOAD */
@-webkit-keyframes fadeIn{from { opacity:0; opacity: 1\9;} to { opacity:1; }}
@-moz-keyframes fadeIn{from { opacity:0; opacity: 1\9;} to { opacity:1; }}
@keyframes fadeIn{from{ opacity:0; opacity: 1\9;} to { opacity:1; }}

.FadeIn{
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}

.HomeSlider .FadeIn{
  -webkit-animation-delay: 0.9s;
  -moz-animation-delay: 0.9s;
  animation-delay: 0.9s;
}


.SocIcon{
  -moz-transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
}

.SocIcon:hover{
   opacity: 0.7;
   filter: alpha(opacity=70);
}

.GreyScale50{
    -webkit-filter: grayscale(50%); 
    filter: grayscale(50%);
}

.Transparent25{
   opacity: 0.75;
   filter: alpha(opacity=75);
}

.Transparent50{
   opacity: 0.5;
   filter: alpha(opacity=50);
}

.Transparent75{
   opacity: 0.25;
   filter: alpha(opacity=25);
}

.SearchBox{
  display:none;
}