/* Theme Name: The Project - Responsive Website Template
Author:HtmlCoder
Author URI:http://www.htmlcoder.me
Author e-mail:htmlcoder.me@gmail.com
Version:1.4.0
Created:December 2014
License URI:http://support.wrapbootstrap.com/
File Description: Place here your custom CSS styles
*/


.navbar-custom { background-color: red !important; }


.fullscreen-col {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.fullscreen-base {
  background: url("/web/images/black_50x50.jpg") 50% 0px no-repeat;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


.form-entry {
    background-color: #e0e0e0;
}

.modal-ios {
    position: absolute;
    overflow: visible;
}

.modal-open {
  overflow-y: auto;
  overflow-x: hidden;
}


.editor-overlay {
  position: absolute;
  z-index: 10000;
  top: 0px;
  padding: 15px;
  bottom: 0px;
  left: 0px;
  right: 0px;
//  background-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(0, 0, 0, 0.7);
  overflow: hidden;
//  color: #000000;
  color: #ffffff;
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
}


.editor-overlay-2 {
  position: absolute;
  z-index: 10000;
  top: 0px;
  padding: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
//  background-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(0, 0, 0, 0.7);
  overflow: hidden;
//  color: #000000;
  color: #ffffff;
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
}

.old-editor-overlay {
  position: absolute;
  z-index: 10000;
  top: 0px;
  padding: 15px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: rgba(255, 255, 255, 1.0);
  overflow: hidden;
  color: #000000;
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  border:solid 2px black;
}


.mid-editor-overlay {
  position: absolute;
  z-index: 10000;
  top: 0px;
  padding: 15px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: rgba(255, 255, 255, 0.4);
  overflow: hidden;
  color: #000000;
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  border:solid 2px black;
}


.counter-box {
  background-color: rgba(220, 220, 255, 1.0);
}

.controller {
  background-color: rgba(220, 220, 255, 1.0);
}



.small-corner {
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  border:solid 2px black;
}

.tsmall-corner {
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  border:solid 0px #808080;
}


.bigger-corner {
  -webkit-border-radius: 20px 20px 20px 20px;
  -moz-border-radius: 20px 20px 20px 20px;
  border-radius: 20px 20px 20px 20px;
}

.smaller-corner {
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
}

.smaller-corner2 {
  -webkit-border-radius: 0px 10px 10px 10px;
  -moz-border-radius: 0px 10px 10px 10px;
  border-radius: 0px 10px 10px 10px;
}

.smaller-corner-top {
  -webkit-border-radius: 10px 10px 0px 0px;
  -moz-border-radius: 10px 10px 0px 0px;
  border-radius: 10px 10px 0px 0px;
}

.smaller-corner-bottom {
  -webkit-border-radius: 0px 0px 10px 10px;
  -moz-border-radius: 0px 0px 10px 10px;
  border-radius: 0px 0px 10px 10px;
}

.banner.banner-med-height {
  min-height: 350px;
  padding-top: 60px;
  padding-bottom: 20px;
}


.my-circle {
  -webkit-border-radius: 50% 50% 50% 50%;
  -moz-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%;
}


.my-square {
  -webkit-border-radius: 15% 15% 15% 15%;
  -moz-border-radius: 15% 15% 15% 15%;
  border-radius: 15% 15% 15% 15%;
}


.fullscreen-bg-paint {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.dark-overlay {
  background-color: rgba(0, 0, 0, 0.7);
}

.med-overlay {
  background-color: rgba(0, 0, 0, 0.45);
}

.mild-overlay {
  background-color: rgba(0, 0, 0, 0.20);
}

.light-overlay {
  background-color: rgba(255, 255, 255, 0.6);
}


.ifxwrap {
    width: 240px;
    padding: 0;
    overflow: hidden;
}
.ifxframe {
    width: 320px;
    border: 0;
    -ms-transform: scale(0.75);
    -moz-transform: scale(0.75);
    -o-transform: scale(0.75);
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
    
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}




.black_and_white
{ 
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%); /* New WebKit */
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%);
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
}




strong { font-weight: bold; }


.notification-open .form1 {
  -webkit-filter: blur(3px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.notification_box {
  margin-right: auto;
  margin-left: auto;
  position: relative;
  -webkit-box-shadow: 0px 0px 10px #333333;
  box-shadow: 0px 0px 10px #333333;
}

.dropdown-backdrop {
  position: static;
}



.banner-header {
	display:block;
}

/* Small devices (tablets, phones less than 767px) */
@media (max-width: 991px) {
  	.banner-header {
    	display:none;
  	}
}

.account-header {
	display:block;
}

/* Small devices (tablets, phones less than 767px) */
@media (max-width: 991px) {
  	.account-header {
    	display:none;
  	}
}


.club-header {
	display:block;
}

/* Small devices (tablets, phones less than 767px) */
@media (max-width: 991px) {
  	.club-header {
    	display:none;
  	}
}

.club-subheader {
	display:none;
}

/* Small devices (tablets, phones less than 767px) */
@media (max-width: 991px) {
  	.club-subheader {
    	display:block;
  	}
}


.stats-header {
	display:block;
}

/* Small devices (tablets, phones less than 767px) */
@media (max-width: 991px) {
  	.stats-header {
    	display:none;
  	}
}


.info-header {
	display:block;
}

/* Small devices (tablets, phones less than 767px) */
@media (max-width: 991px) {
  	.info-header {
    	display:none;
  	}
}

.table-sizing {
		font-size: 16px;
  		font-weight: 400;
}

/* Small devices (tablets, phones less than 767px) */
@media (max-width: 991px) {
  	.table-sizing {
		font-size: 11px;
  		font-weight: 300;
  	}
}


/* test ones */

.aspectwrapper {
  display: inline-block; /* shrink to fit */
  width: 100%;           /* whatever width you like */
  position: relative;    /* so .content can use position: absolute */
}

.aspectwrapper::after {
  padding-top: 56.25%; /* percentage of containing block _width_ */
  display: block;
  content: '';
}
.mycontent {
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;  /* follow the parent's edges */
  outline: thin dashed green;            /* just so you can see the box */
}

.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }
.second-rows { border: none; margin: 0; padding: 0; }

.stepCircle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 0px;

    background: #1b75bb;
    border: 2px solid #1b75bb;
    color: #ffffff;
    text-align: center;
    font: 28px Arial, sans-serif;
}


// Color Variables
@green: #2ecc71;
@lightgray: lightgray;
@background: whitesmoke;

.inactiveMixin {
  content: "";
  position: absolute;
  display: block;
}

.beforeAnimation {
  transition: .2s cubic-bezier(.24, 0, .5, 1);
}

.afterAnimation {
  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0, 0%, 0%, .04), 0 4px 9px hsla(0, 0%, 0%, .13), 0 3px 3px hsla(0, 0%, 0%, .05);
  transition: .35s cubic-bezier(.54, 1.60, .5, 1);
}

// Mobile Toggle Switch
.toggleWrapper {
  margin: auto;
  padding: 20px;
  width: 55px;
  border: 1px solid @lightgray;
  margin-top: 20px;
  border-radius: 5px;
  background: white;
  input {
    &.mobileToggle {
      opacity: 0; // hides checkbox
      position: absolute;
      & + label {
        position: relative;
        display: inline-block;
        user-select: none;
        transition: .4s ease;
        height: 30px;
        width: 50px;
        border: 1px solid #e4e4e4;
        border-radius: 60px;
        &:before {
          .inactiveMixin;
          .beforeAnimation;
          height: 30px;
          width: 51px;
          top: 0;
          left: 0;
          border-radius: 30px;
        }
        &:after {
          .inactiveMixin;
          .afterAnimation;
          background: @background;
          height: 28px;
          width: 28px;
          top: 1px;
          left: 0px;
          border-radius: 60px;
        }
      }
      // When Active
      &:checked {
        & + label:before {
          background: @green; // Active Color
          transition: width .2s cubic-bezier(0, 0, 0, .1);
        }
        & + label:after {
          left: 54px - 30px;
        }
      }
    }
  }
}


.big-device-viewport {
	display:block;
}

/* Small devices (tablets, phones less than 767px) */
@media (max-width: 991px) {
  	.big-device-viewport {
    	display:none;
  	}
}


.small-device-viewport {
	display:none;
}

/* Small devices (tablets, phones less than 767px) */
@media (max-width: 991px) {
  	.small-device-viewport {
    	display:block;
  	}
}