body{font-family: 'Yantramanav', sans-serif;
            font-weight: 300;
          color:#0434a0;
        font-size: 16px;}
        
        a {
          color:#0434a0;
          text-decoration: none;
          background-color: transparent;
          font-size: 20px;
          text-decoration: underline;
      }
      
      
      
      .btn-outline-primary {
        color: #0434a0;
        border-color: #0434a0;
    }
    
    
    .btn-outline-primary:focus{
      color: #fff;
      background-color: #e22320 !important;
      border-color: #0434a0;
    }
    
    
    .btn-outline-primary:hover{
      color: #fff;
      background-color: #e22320 !important;
      border-color: #0434a0;
    }
        a.nav-link{font-size:18px;}

            .blue-wrapper {padding:45px 12px;margin:0px 12px; background:#0434a0;}
            .blue {padding:25px 12px 25px 12px;;text-align: left;}
            .blue p{color:#fff; text-align: left;}
            
            
            .red-wrapper {padding:45px 12px;margin:0px 12px; background:#e22320;}
            .red {padding:25px 12px 25px 12px;text-align: left;}
            .red p{color:#fff; text-align: left;}
            
            
            .white-wrapper {padding:45px 12px;margin:0px 12px; background:#fff;}
            .white {padding:25px 12px 25px 12px;text-align: left;}
            .white p{color: #0434a0; text-align: left;}
            .red-wrapper ul{padding:0px 15px;}
           .red-wrapper ul li {color:#fff !important;font-size: 20px;}
           ul {padding:0px 15px;}
            .kop {display:none;}
            .talent-blue{margin-top:40px; padding:0px 15px  !important;text-align: left;margin-bottom: 000px !important;}
             .talent-blue p{font-size:16px;line-height: 34px; color:#0434a0; text-align: left;padding-bottom:15px; font-size: 20px !important;}
            .talent-red{margin-top:40px; padding:0px 15px  !important;text-align: left;margin-bottom: 000px !important;}
             .talent-red p{font-size:16px;line-height: 34px; color:#0434a0; text-align: left;padding-bottom:15px; font-size: 20px !important;}
            
          .tlt{ padding:140px 15px 140px 15px  !important;text-align: left;margin-bottom: 100px !important;}
          
          .tlt-heading-2{font-family: 'Roboto', sans-serif;
          width:100%;
            margin-top:0px;
          float: left ;opacity: 1;text-transform: uppercase;
          padding:00px 0px 20px 0px;
          border:0px solid black;
          background: none;;
     
    }
          
          
          
          .tlt-heading-3 span {
            display: none;
            opacity: 0.9;
            font-family: 'Roboto', sans-serif;text-transform: uppercase;
            width:100%; font-size:42px; font-weight: 700;color:blue;margin-top:-0px !important;padding-right:14px;line-height: 28px;float:left;
          
            
          }
          
         .long-read{
           height:100%;
      			
          background:url(https://talentopmaat.nl/tom-blauwe-balk-sm.svg) top right no-repeat;
        
          background-size:contain;
          padding:0px 0px;
         margin-bottom:50px;}
          
          
          
           .onderdelen ul li{font-size:16px;line-height: 24px; color:#0434a0; text-align: left;padding-bottom:15px; font-size: 20px !important;}
          
        .long-read p{font-size:16px;line-height: 28px; color:#0434a0; text-align: left;padding:5px 15px 0px 15px;}
        
        .long-read, .talent ul li{font-size:16px;line-height: 34px; color:#0434a0; text-align: left;padding-bottom:15px; font-size: 20px !important;}
           .talent{margin-top:40px; padding:50px 15px  !important;text-align: left;margin-bottom: 40px !important;}
           .talent p{font-size:16px;line-height: 34px; color:#0434a0; text-align: left;padding-bottom:15px; font-size: 20px !important;}
          
            
.fender{background-image:url(https://talentopmaat.nl/theme-color/fender.svg);background-position: center top;background-size: cover;}
.heavy_metal{background-image:url(https://talentopmaat.nl/theme-color/heavy_metal.svg);background-position: center top;background-size: contain;}
.talented{background-image:url(https://talentopmaat.nl/theme-color/talented.svg);background-position: center top;}
.blues{background-image:url(https://talentopmaat.nl/theme-color/blues.svg);background-position: center top;}
.deep_purlpe{background-image:url(https://talentopmaat.nl/theme-color/deep_purple.svg);background-position: center top;}
.gold_n_dark{background-image:url(https://talentopmaat.nl/theme-color/black_n_gold.svg);background-position: center top;}
.coolblue{background-image:url(https://talentopmaat.nl/theme-color/coolblue.svg);background-position: center top;}
.allblack{background-image:url(https://talentopmaat.nl/theme-color/allblack.svg);background-position: center top;}
.shaky_pink{background-image:url(https://talentopmaat.nl/theme-color/shaky_pink.svg);background-position: center top;}
.abstract{background-image:url(https://talentopmaat.nl/theme-color/abstract.svg);background-position: center top;}
.cc-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}


.fa-stack[data-count]:after{
  position:absolute;
  right:0%;
  top:1%;
  content: attr(data-count);
  font-size:30%;
  padding:.6em;
  border-radius:999px;
  line-height:.75em;
  color: white;
  background:rgba(255,0,0,.85);
  text-align:center;
  min-width:2em;
  font-weight:bold;
}


.cc-selector-2 input{
    position:absolute !important;
    z-index:999 !important;
    left:20px;
    top:4px;
}
.cc-selector-2 input:active +.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{opacity: .9;    border: 2px solid #6663fb;}
.cc-selector-2 input:checked +.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc{
        border: 2px solid #6663fb;
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.drinkcard-cc{
    border: 2px solid #6663fb;
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
  
}
.drinkcard-cc:hover{
    border: 2px solid #fff;
}

.select-css {
   display: block;
   font-size: 16px;
   font-family: sans-serif;
   font-weight: 700;
   color: #444;
   line-height: 1.3;
   padding: .6em 1.4em .5em .8em;
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
   margin: 0;
   border: 1px solid #aaa;
   box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
   border-radius: .5em;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
   background-color: #fff;
   background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
     linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
   background-repeat: no-repeat, repeat;
   background-position: right .7em top 50%, 0 0;
   background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
   display: none;
}
.select-css:hover {
   border-color: #888;
}
.select-css:focus {
   border-color: #aaa;
   box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
   box-shadow: 0 0 0 3px -moz-mac-focusring;
   color: #222;
   outline: none;
}
.select-css option {
   font-weight:normal;
}






.card {
  border:none;
  padding: 10px 50px;
}

.card::after {
  position: absolute;
  z-index: -1;
  opacity: 0;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.card:hover {


  transform: scale(1.02, 1.02);
  -webkit-transform: scale(1.02, 1.02);
  backface-visibility: hidden; 
  will-change: transform;
  box-shadow: 0 1rem 3rem rgba(0,0,0,.75) !important;
}

.card:hover::after {
  opacity: 1;
}

.card:hover .btn-outline-primary{
  color:white;
  background:#007bff;
}



.text-center {text-align:center !important;}





.other-comment-wrapper{
  margin-bottom:15px;border-radius: 20px;background: rgba(155,155,255,1.0); color: #000;padding:40px 40px 10px 40px;text-align: left;
  width: 100%;
}
.comment-wrapper{
  margin-bottom:15px;border-radius: 20px;background: rgba(255,255,255,1.0); color: #000;padding:40px 40px 10px 40px;text-align: left;
  width: 100%;
}
.read-wrapper{
  margin-bottom:15px;border-radius: 20px;background: rgba(111,172,215,1.0); color: #000;padding:40px 40px 10px 40px;text-align: left;
  width: 100%;
}

.send-message-wrapper{
  margin-bottom:15px;border-radius: 20px;background: rgba(235,245,235,1.0); color: #000;padding:10px 40px 10px 40px;text-align: left;
}

.received-message-wrapper{
  margin-bottom:15px;border-radius: 20px;background: rgba(247,200,0,1.0); color: #000;padding:10px 40px 10px 40px;text-align: left;
}

.received-message-wrapper:hover{
margin-bottom:15px;border-radius: 20px;background: rgba(155,155,255,1.0); color: #000;padding:10px 40px 10px 40px;text-align: left;
}

.message-wrapper{
  margin-bottom:15px;border-radius: 20px;background: rgba(247,200,0,1.0); color: #000;padding:10px 40px 10px 40px;text-align: left;
}
.message-wrapper:hover{
margin-bottom:15px;border-radius: 20px;background:#e42320; color: #000;padding:10px 40px 10px 40px;text-align: left;
}


.message-intro h4{   
    color:#000; 
    padding:0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;}
.message-intro p{padding:0;margin:0;line-height: 24px;}


.cover h1{font-family: 'Yantramanav', sans-serif;
font-weight: 500;
line-height: 24px;
text-align: center;
margin-bottom: 0px;font-size:24px;
color:#fff;background-color: #000;
 width: 100%;
 padding:10px 5px;
 position:fixed;top: 55px !important;left:0; height: 50px;
 opacity: 0.7; }
 
 
            h1{font-family: 'Yantramanav', sans-serif;
            font-weight: 500;
            margin-bottom: 0px;font-size:24px;
            color:#fff;background-color: #000;
             width: 100%;
             padding:10px 5px;
             position: absolute;bottom: 0 !important; 
             opacity: 0.7; }

             p{font-family: 'Yantramanav', sans-serif;
            font-weight: 300;font-size: 20px;line-height: 34px;} 

               ul li {font-family: 'Yantramanav', sans-serif;
            font-weight: 300;}


            .logo{padding:15px;}
            .square-100{
    position: relative;
    width: 100%;
    padding-bottom : 100%; /* = width for a 1:1 aspect ratio */
      background-position:center center;
    background-repeat:no-repeat;
    background-size:cover; /* you change this to "contain" if you don't want the images to be cropped */
    overflow: hidden
}

b{font-family: 'Yantramanav', sans-serif;
            font-weight: 500;}

            .logo{padding:15px;}
            .square-100{
    position: relative;
    width: 100%;
    padding-bottom : 100%; /* = width for a 1:1 aspect ratio */
      background-position:center center;
    background-repeat:no-repeat;
    background-size:cover; /* you change this to "contain" if you don't want the images to be cropped */
    overflow: hidden
}
            
   .square-box{
    position: relative;
    width: 50%;
    overflow: hidden;

}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}
.square-content{
    padding:15px;
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
        background: #4679BD;
}
.square-content div {
   display: table;
   width: 100%;
   height: 100%;
}
.square-content span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: white
}


/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2196F3;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #666;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}




/* The slider */
.slider-on {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #666;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider-on:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider-on {
  background-color: #2196F3;
}

input:focus + .slider-on {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider-on:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider-on.round {
  border-radius: 34px;
}

.slider-on.round:before {
  border-radius: 50%;
}





#flex { 
  display: flex; 
  /* Optional, if you want the DIVs 100% width: */ 
  flex-direction: column;
  border:1px solid green;
}
.order_1 { order: 1 !important; -webkit-order: 1 !important; border:4px solid #000; }
.order_2 { order: 2; -webkit-order: 2;}
.order_3 { order: 3; -webkit-order: 3;}
.order_4 { order: 4; -webkit-order: 4;}
.order_5 { order: 5; -webkit-order: 5;}
.order_6 { order: 6; -webkit-order: 6;}
.order_7 { order: 7; -webkit-order: 7;}
.order_8 { order: 8; -webkit-order: 8;}


  [class*="col-"]{
  border: solid 0px #ccc;
}

#loginContainer{

}

.login-form {
width: auto;
margin: 0 auto;
}

.login-form .hint-text {
color: #fff;
text-align: center;
font-size: 0.8em;
}

.form-control, .btn {
min-height: 38px;
border-radius: 8px;
}

.login-btn {
font-size: 15px;
font-weight: bold;
}

.social-btn {

}
 input{background:none !important;border: none;}

 
input[type=button], input[type=submit], input[type=reset] {
  background-color: rgba(5,5,255,0.6) !important;} 

.input-group {
background: rgba(255,255,255,0.6);
color: black;
border: 2px solid #6663fb;
border-radius: 100px;
padding:4px 16px !important;
line-height: 42px;
}

.input-group input::placeholder {
  color: #333;
  border: 0px solid #6663fb;
}

.input-group>.custom-select:not(:first-child), 
.input-group>.form-control:not(:first-child) {
color:#000;
outline: none;
text-transform: none;
font-size: 1em;
border: none;
}

.input-group-addon .fa {
font-size: 28px;
padding: 100px !important;
color: #95D99B;
}

.form-group {
margin-bottom: 1rem;
padding-left: 55px !important;
padding-right: 55px;
}

.clearfix {
padding-left: 55px;
padding-right: 55px;
}

.btn-success{height: 52px;
color: #fff;
background: #6663fb !important;
border-color: #6663fb !important;
text-transform: uppercase;
font-size: 1em;
border-radius: 100px;
width: 100% !important;
margin: 0 auto;}

.btn-success:hover {
height: 52px;
color: #fff;
background:rgba(102,99,251,0.9) !important;
border-color: #6663fb !important;
text-transform: uppercase;
font-size: 1em;
border-radius: 100px;
width: 100%;
margin: 0 auto;}