/***********CSS for Soulmate Search Engine************/
html {
scroll-behavior: smooth;
transition: smooth;
}

* {
  font-family: Raleway !important;
}

.button {
  border: none;
  color: white;
  padding: 18px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; 
  transition-duration: 0.4s;
  cursor: pointer;  
}
.search_women_ID {
  background-color: #b49b09; 
  border-radius: 10px;
  color: white; 
  border: 1px white;
  font-weight: bold;
  -webkit-box-shadow: inset 0px 0px 8px 2px rgba(255,255,255,1);
  -moz-box-shadow: inset 0px 0px 8px 2px rgba(255,255,255,1);
  box-shadow: inset 0px 0px 8px 2px rgba(255,255,255,1);  
}
  .search_women_ID:hover {
    background-color: #d5b80b;
    color: white;
  }
  
/***************Accordion styles******************/
.accordion2 {
    background-color: #aa1845;
    color: white;
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: 0.5s !important;
}
  .accordion2:after {
      content: '\002B';
      color: white;
      font-weight: bold;
      font-size: 20px;
      float: right;
      transition: transform 0.5s !important;
  }
    .active, .accordion2:hover {
      background-color: #a21a44;
      font-size: 16.4px;
      -webkit-box-shadow: inset 0px 0px 7px 2px rgba(255,255,255,1);
      -moz-box-shadow: inset 0px 0px 7px 2px rgba(255,255,255,1);
      box-shadow: inset 0px 0px 7px 2px rgba(255,255,255,1);
    }
      .active:after {
        content: "\203A";
        transform: rotate(-270deg);
        -ms-transform: rotate(-270deg);
        -moz-transform: rotate(-270deg);
        -webkit-transform: rotate(-270deg);
        font-weight: bold;
        font-size: 20px; 
        transition: 0.5s !important;
      }

.selection {
    cursor: pointer;
    border: none;
    outline: none;
    transition: 0.5s !important;
}
  .selection:after {
      transition: transform 0.5s !important;
  }
      .active:after {
        transform: rotate(-270deg);
        -webkit-transform: rotate(-270deg);
        transition: 0.5s !important;
      }
    
/***************************************************/
.basic_criteria {
    
    color: black;
    max-height: 1000px;
    margin-top: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    padding: 0 18px;
    width: 100%;
    overflow: hidden;
    border: none;
    text-align: left;
    outline: none;
}

.basic_header {
    background-color: #a21a44 !important;
    color: white !important;
    font-weight: bold;
    padding: 16px;
    width: 100%;
    margin-bottom: 2px !important;
    outline: none;

   /* -webkit-box-shadow: inset 0px 0px 7px 2px rgba(255,255,255,1);
    -moz-box-shadow: inset 0px 0px 7px 2px rgba(255,255,255,1);
    box-shadow: inset 0px 0px 7px 2px rgba(255,255,255,1);
  */
}

.panel {
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition-duration: 1s !important;
  -ms-transition-duration: 1s !important;
  -webkit-transition-duration: 1s !important;
  -moz-transition-duration: 1s !important;
  transition: max-height 1s ease-out;
  -moz-transition: max-height 1s ease-out;
  -webkit-transition: max-height 1s ease-out;
  -ms-transition: max-height 1s ease-out;
  -o-transition: max-height 1s ease-out;
  /*border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;*/
  border-top: none;
  width: 100%;
}

.sel {
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition-duration: 1s !important;
  -ms-transition-duration: 1s !important;
  -webkit-transition-duration: 1s !important;
  -moz-transition-duration: 1s !important;
  transition: max-height 1s ease-out;
  -moz-transition: max-height 1s ease-out;
  -webkit-transition: max-height 1s ease-out;
  -ms-transition: max-height 1s ease-out;
  -o-transition: max-height 1s ease-out;
  /*border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;*/
  border-top: none;
}

.carousel-indicators li:after,
.carousel-inner div:after{
  display: none;
}

.td_style {
  font-weight: bold;
}

#f1 {
  width: 165px !important;
}
#f2 {
  width: auto !important;
}

.dotted3px{
  border: dotted 4px /*#fd0084;*/#f78383;
}

.input_style{
  min-width: 220px;
  min-height: 50px;
  border-radius: 10px;
  padding-left: 30px !important;
  padding-right: 30px !important;
  margin-bottom: 10px !important;
}
.p_style{
    font-weight: bold;
    color: #a21a44;
    padding: 18px;
    width: 100%;
    outline: none;
    display: inline-block;
}

.icolor{
  color: #d72b29;
  padding-right: 10px;
  padding-left: 10px;
}
.pink{
  background-color: #eddee5;
}
.pcolor{
  color: #a21a44;
  width: 210px;
  line-height: 20px !important;
}

/*.two-col p:first-child{
    float:left;
    width:50%;
    
  }
  .two-col p:last-child{
    float:left;
    width:50%;
   
  }
/*********************Pulse**************************/
.pulse-grow {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
  .pulse-grow:hover, .pulse-grow:focus, .pulse-grow:active {
    -webkit-animation-name: pulse-grow;
    animation-name: pulse-grow;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
  }

@-webkit-keyframes pulse-grow {
to {
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
   }
}

@keyframes pulse-grow {
to {
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
   }
}

/*****************************************************/
.chkbox{
  margin: 10px;
}

.chkbox1{
  margin-bottom: 10px;
}
.opt_box{
  box-shadow: 0px 0px 17px -2px rgba(122,122,122,1);
  border: 1px solid #f78383;
  border-radius: 4px;
  background-color: #ece3e7;
}

.option1 {          
  background-color: #ece3e7;
  width: 210px;
  height: 220px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top: none;
  overflow: auto;
  overflow-x: hidden;
  display: inline-block;
  margin-bottom: 10px;
  /*box-shadow: 0px 0px 17px -2px rgba(122,122,122,1);
    border: 1px solid #f78383;
  */
}
.h_opt{
  background-color: #ece3e7;
  width: 210px;
  height: 40px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding-bottom: 2.8em;
}
  /*.option1 input:hover{
    font-size: 18px;
  }*/

.secbot{
  margin-bottom: 12px !important;
}

.id_sub{
    background-color: #8d183b;
    color: white;
    text-align: center;
    font-weight: bold;
    padding: 10px !important;
    min-width: 190px;
    border-radius: 10px;
    -webkit-box-shadow: inset 0px 0px 7px 2px rgba(255,255,255,1);
    -moz-box-shadow: inset 0px 0px 7px 2px rgba(255,255,255,1);
    -ms-box-shadow: inset 0px 0px 7px 2px rgba(255,255,255,1);
    box-shadow: inset 0px 0px 7px 2px rgba(255,255,255,1);
}

.sub {
    min-width: 190px;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
    padding: 10px;
    background: #b44609;
    color: white;
    margin-bottom: 20px;
    cursor: pointer;
    -webkit-box-shadow: inset 0px 0px 7px 2px rgba(255,255,255,1);
    -moz-box-shadow: inset 0px 0px 7px 2px rgba(255,255,255,1);
    -ms-box-shadow: inset 0px 0px 7px 2px rgba(255,255,255,1);
    box-shadow: inset 0px 0px 7px 2px rgba(255,255,255,1);
}

.sub:hover {
  background: #e6590b;
}
/*************************SUBMIT BUTTON SHINE EFFECT**********************************/
.shine {
  text-decoration: none; 
  display: inline-block;
  position: relative;
  text-align: center;
  line-height: 2.4em;
  padding-left: 5em;
  padding-right: 5em;
  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  -ms-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
}

.shine:hover {
  color: white;
  background-color: #e6590b;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.shine:hover:before {
  -webkit-animation: shine 0.5s 0s linear;
  -ms-animation: shine 0.5s 0s linear;
  -moz-animation: shine 0.5s 0s linear;
  animation: shine 0.5s 0s linear;
}
.shine:active {
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: box-shadow 0.5s ease-in;
  -moz-transition: box-shadow 0.5s ease-in;
  -ms-transition: box-shadow 0.5s ease-in;
  transition: box-shadow 0.5s ease-in;
}
.shine:before {
  content: '';
  display: block;
  width: 0px;
  height: 86%;
  position: absolute;
  top: 7%;
  left: 0%;
  opacity: 0;
  background: white;
  box-shadow: 0 0 15px 3px white;
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
}
@-webkit-keyframes shine {
  from {
    -webkit-opacity: 0.2;
    -webkit-left: 0%;
  }
  50% {
    -webkit-opacity: 1;
  }
  to {
    -webkit-opacity: 0.2;
    -webkit-left: 100%;
  }
}
@-moz-keyframes shine {
  from {
    opacity: 0.2;
    left: 0%;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0.2;
    left: 100%;
  }
}
@keyframes shine {
  from {
    opacity: 0.2;
    left: 0%;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0.2;
    left: 100%;
  }
}
/*****************************************/
.shine1 {
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  position: relative;
  text-align: center;
  line-height: 2em;
  padding-left: 5em;
  padding-right: 5em;
  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
}

.shine1:hover {
  color: white;
  background-color: rgba(209, 43, 93, 1);
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.shine1:hover:before {
  -webkit-animation: shine 0.5s 0s linear;
  -moz-animation: shine 0.5s 0s linear;
  animation: shine 0.5s 0s linear;
}
.shine1:active {
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: box-shadow 0.5s ease-in;
  -moz-transition: box-shadow 0.5s ease-in;
  transition: box-shadow 0.5s ease-in;
}
.shine1:before {
  content: '';
  display: block;
  width: 0px;
  height: 86%;
  position: absolute;
  top: 7%;
  left: 0%;
  opacity: 0;
  background: white;
  box-shadow: 0 0 15px 3px white;
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
}


/**************************************SCROLL BAR STYLES*******************************************

.sports2 button:hover{
    color: #404040 !important;
    font-weight: 700 !important;
    letter-spacing: 3px;
    background: #e92b77;
    -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
    -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
    transition: all 0.3s ease 0s;
} 
*/

/*
 *  STYLE 2
 */

#style-2::-webkit-scrollbar
{
 box-shadow: inset 0px 0px 7px 2px rgba(255,255,255,1);
}
#style-2::-ms-scrollbar
{
 -ms-box-shadow: inset 0px 0px 7px 2px rgba(255,255,255,1);
}
  #style-2::-webkit-scrollbar-track
  {
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;  
  }
  #style-2::-ms-scrollbar-track
  {
    -ms-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -ms-background-color: #F5F5F5;  
  }
    #style-2::-webkit-scrollbar-thumb
    {
      box-shadow: inset 0 0 6px rgba(0,0,0,.3);
      border-radius: 3px;
      background-color: #aa1845;
    }
    #style-2::-ms-scrollbar-thumb
    {
      -ms-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
      -ms-border-radius: 3px;
      -ms-background-color: #aa1845;
    }
      #style-2::-webkit-scrollbar-thumb:hover
      {
        box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #fc379c;
      }
      #style-2::-ms-scrollbar-thumb:hover
      {
        -ms-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        -ms-background-color: #fc379c;
      }


.scroller {
  overflow-y: auto;
  scrollbar-color: rgb(170,24,69) white; 
}
.ie{
  -ms-scrollbar-base-color: rgb(170,24,69);
  -ms-scrollbar-arrow-color: rgb(170,24,69);
  -ms-scrollbar-track-color: white;

}

/****************************************************************************************************/

/* Create two equal columns that floats next to each other */
.column1 {
  float: left;
  width: 50%;
  padding: 10px;
}

/* Clear floats after the columns */
.rows:after {
  content: "";
  display: table;
  clear: both;
}
.one-columns aside{
    float:left;
    width:100%;
    padding:0 10px;
  }

.col-keywords aside{
      float: left;
      width: 33.33%;
      transition: 0.5s !important;
      padding: 0 10px;
}
    .col-keywords aside:nth-child(2),
    .col-keywords aside:last-child{
      float: left;
      width:33.33%;
      transition: 0.5s !important;
      padding: 0 10px;
    }
.col-choose aside{
      float: left;
      width: 33.33%;
      transition: 0.5s !important;
      padding: 0 10px;
}
    .col-choose aside:nth-child(2),
    .col-choose aside:last-child{
      float: left;
      width:33.33%;
      transition: 0.5s !important;
      padding: 0 10px;
    }
/***Responsive layout -@MEDIA QUERIES to make sure that resizing of browser is responsive***/

@media screen and (max-width: 489px) and (min-width: 1px){
  #desktop-center-area{
    padding: 10px;
  }
  .basic_header {
       font-size: 13px ;
       padding: 12px !important;
  }
  .active, .accordion2:hover {
   
    font-size: 13px !important;
    text-indent: 8px !important;
  }
  .col-keywords aside{
      float: left;
      width:100% ;
      transition: 0.5s;
  }
    .col-keywords aside:nth-child(2),
    .col-keywords aside:last-child{
      float: left;
      width:100% ;
      transition: 0.5s;
    }
  .col-choose aside{
      float: left;
      width:100% ;
      transition: 0.5s;
  }
    .col-choose aside:nth-child(2),
    .col-choose aside:last-child{
      float: left;
      width:100% ;
      transition: 0.5s;
      margin: 20px 0 0;
    }
  .column1 {
    width: 100%;
    transition: 0.5s;
  }
  .search_women_ID, .sub{
    font-size: 14px ;
    padding: 14px ;
  }
  .select-css{
    font-size: 14.5px;
  }
  i {
    font-size: 14px !important;
  }

  .h_opt input{
    width: 200px;
    height: 30px;
  }
   
  #f1 {
  width: 100px !important;
  }
  .one-columns aside {
    width: 100%;
    transition: 0.5s;
  }
  .four4 label:first-child, .four4 label:nth-child(2),.four4 label:nth-child(3), .four4 label:last-child{
    float:left !important;
    transition: 0.5s !important;
    padding-top: 2.5px !important;
    padding-bottom: 2.5px !important;
  }
  
}


@media screen and (max-width: 399px) and (min-width: 1px) {
 
  .four4 label:first-child, .four4 label:nth-child(2),.four4 label:nth-child(3), .four4 label:last-child{
    width: 100% !important;
  } 
  #checkboxes {
  display: none;
  border: 1px #dadada solid;
  width: 90% !important;
  }
  .selectBox {
    position: relative;
    width: 100% !important;
  } 

}

@media screen and (max-width: 474px) and (min-width: 400px) {
  .one-columns aside {
    width: 100%;
    transition: 0.5s;
  }
  .four4 label:first-child, .four4 label:nth-child(2),.four4 label:nth-child(3), .four4 label:last-child{
    width: 50% !important;
  } 
}

@media screen and (max-width: 819px) and (min-width: 475px){
  .three-columns aside{
      width: 50%;
      transition: 0.3s !important;
  }
    .three-columns aside:nth-child(2),
    .three-columns aside:last-child{
      width: 50%;
      transition: 0.3s !important;
    }
}
 
@media screen and (max-width: 500px) and (min-width: 490px){
  #desktop-center-area{
    padding: 10px;
  }
  .basic_header {
       font-size: 13px ;
       padding: 12px !important;
  }
  .active, .accordion2:hover {
    text-indent: 8px!important;
    font-size: 13px !important;
  }
  .col-keywords aside{
      float: left;
      width:100% ;
      transition: 0.5s;
  }
    .col-keywords aside:nth-child(2),
    .col-keywords aside:last-child{
      float: left;
      width:100% ;
      transition: 0.5s;
    }
  .col-choose aside{
      float: left;
      width:100% ;
      transition: 0.5s;
  }
    .col-choose aside:nth-child(2),
    .col-choose aside:last-child{
      float: left;
      width:100% ;
      transition: 0.5s;
      margin: 20px 0 0;
    }
  .input_style{
    min-width: 300px;
  } 

  .column1 {
    width: 100%;
    transition: 0.5s;
  }
  .search_women_ID, .sub{
    font-size: 14.5px;
    padding: 14.5px ;
  }
   .select-css{
    font-size: 14.5px;
  }
  
  i {
    font-size: 14px !important;
  }
  .h_opt input{
    width: 200px;
    height: 30px;
  }
  .one-columns aside {
    width: 50%;
    transition: 0.5s;
  }
  .four4 label:first-child, .four4 label:nth-child(2),.four4 label:nth-child(3), .four4 label:last-child{
    float:left !important;
    transition: 0.5s !important;
    padding-top: 2.5px !important;
    padding-bottom: 2.5px !important;
  }
   
}

@media screen and (max-width: 600px) and (min-width: 475px){
  .four4 label:first-child, .four4 label:nth-child(2),.four4 label:nth-child(3), .four4 label:last-child{
    width: 100% !important;
    transition: 0.5s !important;
  }
   .one-columns aside {
    width: 50%;
    transition: 0.5s;
  }
}

@media screen and (max-width: 600px) and (min-width: 501px){
  #desktop-center-area{
    padding: 10px;
  }
   .basic_header {
       font-size: 13px ;
  }
  .active, .accordion2:hover {
    text-indent: 8px!important;
    font-size: 13px !important;
  }
  .column1 {
    width: 100%;
    transition: 0.5s;
  }
  .search_women_ID, .sub{
    padding: 16px ;
  }
  .col-keywords aside{
      float: left;
      width:100% ;
      transition: 0.5s;
  }
    .col-keywords aside:nth-child(2),
    .col-keywords aside:last-child{
      float: left;
      width:100% ;
      transition: 0.5s;
    }
  .col-choose aside{
      float: left;
      width:100% ;
      transition: 0.5s;
  }
    .col-choose aside:nth-child(2),
    .col-choose aside:last-child{
      float: left;
      width:100% ;
      transition: 0.5s;
      margin: 20px 0 0;
    }  
  .input_style{
    min-width: 300px;
    transition: 0.5s;
  } 
  .h_opt input{
    width: 200px;
    height: 30px;
  }
  .one-columns aside {
    width: 50%;
    transition: 0.5s;
  }
  .four4 label:first-child, .four4 label:nth-child(2),.four4 label:nth-child(3), .four4 label:last-child{
    float:left !important;
    transition: 0.5s !important;
    padding-top: 2.5px !important;
    padding-bottom: 2.5px !important;
  }
   
}

@media screen and (max-width: 739px) and (min-width: 601px){
  #desktop-center-area{
    padding: 10px;
  }
  .basic_header {
      font-size: 16px;
  }
  .active, .accordion2:hover {
      text-indent: 8px!important;
      font-size: 16px !important;
  }
  
  .col-keywords aside{
      float: left;
      width:100% ;
      transition: 0.5s;
  }
    .col-keywords aside:nth-child(2),
    .col-keywords aside:last-child{
      float: left;
      width:100% ;
      transition: 0.5s;
    }
  
  .input_style{
    min-width: 300px;
    transition: 0.5s;
  } 

  .column1 {
    width: 50%;
    transition: 0.5s;
  }
  .h_opt input{
    width: 200px;
    height: 30px;
  }
  .one-columns aside {
    width: 50%;
    transition: 0.5s;
  }
  .four4 label:first-child, .four4 label:nth-child(2),.four4 label:nth-child(3), .four4 label:last-child{
    float:left !important;
    width:50% !important;
    transition: 0.5s !important;
    padding-top: 2.5px !important;
    padding-bottom: 2.5px !important;
  }
   
}
@media screen and (max-width: 750px) and (min-width: 1px){
  .col-choose aside{
      float: left;
      width:100% ;
      transition: 0.5s;
  }
    .col-choose aside:nth-child(2),
    .col-choose aside:last-child{
      float: left;
      width:100% ;
      transition: 0.5s;
      margin: 20px 0 0;
    }
}

@media screen and (max-width: 819px) and (min-width: 740px){
  #desktop-center-area{
    padding: 10px;
  }
  .basic_header {
       font-size: 16px;
  }
  .active, .accordion2:hover {
      text-indent: 8px!important;
      font-size: 16px !important;
  }

  .column1 {
    width: 50%;
    transition: 0.5s;
  }
  .h_opt input{
    width: 200px;
    height: 30px;
  }
  .one-columns aside {
    width: 50%;
    transition: 0.5s;
  }
  .four4 label:first-child, .four4 label:nth-child(2),.four4 label:nth-child(3), .four4 label:last-child{
    float:left !important;
    width:50% !important;
    transition: 0.5s !important;
    padding-top: 2.5px !important;
    padding-bottom: 2.5px !important;
  }
   
}

@media screen and (max-width: 900px) and (min-width: 820px){
  #desktop-center-area{
    padding: 10px;
  }
  .active, .accordion2:hover {
      text-indent: 8px!important;
      font-size: 16px !important;
  }
  .three-columns aside{
      width:33.33%;
      transition: 0.5s;
  }
    .three-columns aside:nth-child(2),
    .three-columns aside:last-child{
      width:33.33%;
      transition: 0.5s;
    }

  .column1 {
    width: 50%;
    transition: 0.5s;
  }
  .h_opt input{
    width: 200px;
    height: 30px;
  }
  #checkboxes {
  display: none;
  border: 1px #dadada solid;
  width: 60% !important;
  }
  .selectBox {
    position: relative;
    width: 66.5% !important;
  } 
   
}

@media screen and (max-width: 1200px) and (min-width: 901px){
  #desktop-center-area{
    padding: 10px;
  }
  .active, .accordion2:hover {
      text-indent: 8px!important;
      font-size: 16px !important;
  }
  .three-columns aside{
      width:33.33%;
      transition: 0.5s;
  }
    .three-columns aside:nth-child(2),
    .three-columns aside:last-child{
      width:33.33%;
      transition: 0.5s;
    }
  .column1 {
    width: 50%;
    transition: 0.5s;
  }
  .h_opt input{
    width: 200px;
    height: 30px;
  }
  .input_style{
    min-width: 250px;
    transition: 0.5s;
  }
  #checkboxes {
  display: none;
  border: 1px #dadada solid;
  width: 49.5% !important;
  }
  .selectBox {
    position: relative;
    width: 55% !important;
  } 
   
}

@media screen and (max-width: 1219px) and (min-width: 1201px){
  .active, .accordion2:hover {
      text-indent: 8px!important;
      font-size: 16px !important;
  }
  .three-columns aside{
      width:33.33%;
      transition: 0.5s;
  }
    .three-columns aside:nth-child(2),
    .three-columns aside:last-child{
      width:33.33%;
      transition: 0.5s;
    }
  .column1 {
    width: 50%;
    transition: 0.5s;
  }
  #desktop-center-area{
    padding: 10px;
  }
  .h_opt input{
    width: 200px;
    height: 30px;
  }
  #checkboxes {
  display: none;
  border: 1px #dadada solid;
  width: 60% !important;
  }
  .selectBox {
    position: relative;
    width: 66.5% !important;
  } 

}
@media screen and (max-width: 6000px) and (min-width: 1220px){
  #desktop-center-area{
    padding: 10px;
  }
  .active, .accordion2:hover {
      text-indent: 8px!important;
      font-size: 16px !important;
  }
  .h_opt input{
    width: 200px;
    height: 30px;
  }
  .three-columns aside {
      float: center;
      width: 33.33%;
      padding: 0px !important;
  }

  #checkboxes {
  display: none;
  border: 1px #dadada solid;
  width: 60% !important;
  }
  .selectBox {
    position: relative;
    width: 66.5% !important;
  } 

}

@media screen and (max-width: 6000px) and (min-width: 751px){
  .two-columns aside:first-child {
      float: center;
      width: 50%;
      padding: 0px !important;
  }
  .two-columns aside:last-child {
      float: center;
      width: 50%;
      padding: 0px !important;
      margin-top: 0px;
      margin: 0px 0 0 !important;
  }
  
}

/******************************************ANIMATIONS*************************************************/
.animate-zoom {
  -webkit-animation:animatezoom 0.8s;
  animation:animatezoom 0.8s;
}
@-webkit-keyframes animatezoom {
  from {
        -webkit-transform:scale(0)
   } 
   to {
        -webkit-transform:scale(1)
      }
}
@keyframes animatezoom {
  from {
        transform:scale(0)
   } 
   to {
        transform:scale(1)
      }
}
.animate-fading {
  animation:fading 10s infinite;
}
@keyframes fading {
    0%{opacity:0}
    50%{opacity:1}
    100%{opacity:0}
  }
.animate-opacity {
  animation:opac 0.8s;
}
 @keyframes opac{
   from{opacity:0}
    to{opacity:1}
  }
.animate-top {
  position:relative;
  animation:animatetop 0.4s;
}
  @keyframes animatetop{
    from{top:-300px;opacity:0}
     to{top:0;opacity:1}
  }
.animate-left{
  position:relative;
  animation:animateleft 0.4s;
}
@keyframes animateleft{
  from{left:-300px;opacity:0} 
  to{left:0;opacity:1}
}
.animate-right{
  position:relative;
  animation:animateright 0.4s;
}
@keyframes animateright{
  from{right:-300px;opacity:0} 
  to{right:0;opacity:1}
}
.animate-bottom{
  position:relative;
  animation:animatebottom 0.4s;
}
@keyframes animatebottom{
  from{bottom:-300px;opacity:0}
   to{bottom:0;opacity:1}
}
/*****************************************************************************************************/

.modal{
  z-index: 101;
  display:none;
  padding-top:100px;
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:auto;
  background-color:rgb(0,0,0);
  background-color:rgba(0,0,0,0.8)
}
.modal-content{
  margin:auto;
  background-color:#fff;
  position:relative;
  padding:0;
  outline:0;
  width:600px;
  border-radius: 6px 6px 6px 6px;
  -ms-border-radius: 6px 6px 6px 6px;
  -moz-border-radius: 6px 6px 6px 6px;
  -webkit-border-radius: 6px 6px 6px 6px;
  border: 2px dotted #ff00a2;
}

.modal_head{
  background-image: url(../images/modal_logo.png);
  /*background-color: rgb(255, 122, 177);*/
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.modal_img {
  width: 100%; 
  background-color: rgba(117,17,48,0.9);"
}

.modal_sub{
  background-color: #8d183b;
  color: white;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  padding: 6px !important;
  width: 120px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0px 0px 7px 2px rgba(255,255,255,1);
  -moz-box-shadow: inset 0px 0px 7px 2px rgba(255,255,255,1);
  -ms-box-shadow: inset 0px 0px 7px 2px rgba(255,255,255,1);
  box-shadow: inset 0px 0px 7px 2px rgba(255,255,255,1);
  margin-bottom: 20px;

}
.card-4,.hover-shadow:hover{
/* box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)*/
-webkit-box-shadow: 0px 0px 26px 18px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 26px 18px rgba(0,0,0,0.75);
-ms-box-shadow: 0px 0px 26px 18px rgba(0,0,0,0.75);
box-shadow: 0px 0px 26px 18px rgba(0,0,0,0.75);
}

.Modal_but{
  float: right;
  border:none;
  display:inline-block;
  padding:0px 10px;
  vertical-align:middle;
  overflow:hidden;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  background-color: red;
  border-radius: 50%;
  color: white;
  margin-top: -10px;
  margin-right: -10px;
}
.Modal_but:hover{
  color:#000 !important;
  background-color: rgba(255, 77, 245, 1)
}
/*
.red,.hover-red:hover{
  color:#fff !important;
  background-color: #ff64fd !important;
}
*/
.margin-top{
  margin-top:16px !important;
}

.w3-panel{
  margin-top:16px;
  margin-bottom:16px;
}
.modal_input{
  font-size: 16px !important;
  padding:12px;
  display:block;
  border:none;
  border:1px solid #d74a75d1;
  width: 260px!important;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(215,74,117,1);
  -moz-box-shadow: 0px 0px 5px 0px rgba(215,74,117,1);
  -ms-box-shadow: 0px 0px 5px 0px rgba(215,74,117,1);
  box-shadow: 0px 0px 5px 0px rgba(215,74,117,1);
}

.modal_margin-bottom {
  margin-bottom: 20px !important;
}
.modal_section {
  margin-top:16px!important;
  margin-bottom:16px!important;
}

input [type=checkbox]{
  -moz-color:#75122f !important;
  -webkit-color:#75122f !important;
  -ms-color:#75122f !important;
  color:#75122f !important;
}

.chkall{
  background-color:#ece3e7;
}

[id*="col-"] {
    float: left !important;
    transition: .3s !important;
}

#col-1 {width: 8.33%;}
      #col-2 {width: 15.4% !important;}
      #col-2-1 {width: 16.66% !important;}
      #col-2-5 {width: 20% !important;}
      #col-2-6 {width: 20% !important;}
      #col-3 {width: 25% !important;}
      #col-3-1 {width: 30% !important;}
      #col-3-5 {width: 31% !important;}
      #col-3-7 {width: 32% !important;}
      #col-4 {width: 90% !important;}
      #col-4-3 {width: 33.33% !important;}
      #col-4-5 {width: 37.5% !important;}
      #col-4-6 {width: 40% !important;}
      #col-5 {width: 41.66% !important;}
      #col-5-5 {width: 48.5% !important;}
      #col-5-6 {width: 48.5% !important;}
      #col-5-7 {width: 48.5% !important;}
      #col-6 {width: 50% !important;}
      #col-7 {width: 58.33% !important;}
      #col-7-5 {width: 60% !important;}
      #col-7-6 {width: 63% !important;}
      #col-7-8 {width: 65% !important;}
      #col-8 {width: 66.66% !important;}
      #col-8-5 {width: 68% !important;}
      #col-8-6 {width: 71% !important;}
      #col-8-9 {width: 73% !important;}
      #col-9 {width: 75% !important;}
      #col-9-1 {width: 78% !important;}
      #col-9-5 {width: 80% !important;}
      #col-9-6 {width: 80% !important;}
      #col-10 {width: 83.33% !important;}
      #col-10-5 {width: 96.5% !important;}
      #col-11 {width: 100% !important;}
      #col-11-1 {width: 93% !important;}
      #col-11-3 {width: 93.5% !important;}
      #col-11-5 {width: 96.5% !important;}
      #col-11-9 {width: 98% !important;}
      #col-12 {width: 100% !important;}
      #col-12-1 {width: 100% !important;}
.pro {
    margin-top: 20px !important;
}

.age-conte {
    height: auto !important;
    background: #ffffff !important;
    padding: 20px !important;
    box-shadow: 0 1px 5px rgba(0,0,0,.3) !important;
    margin-bottom: 30px !important;
}
.profile-date {
    margin-top: 20px !important;
    color: #a21a44 !important;
    text-align: left !important;
    text-indent: 20px !important;
}
.profile-conte select {

    padding: 20px 0 20px 10px !important;
    font-size: 17px !important;
    background: #ffffff !important;
  	border: none !important;
  	transition: .5s !important;
  	font-style: italic !important;
  	box-shadow: 0 1px 5px rgba(0,0,0,.3) !important;
  	color: #827e7e !important;
}
.profile-conte {
    height: auto !important;
    width: 90% !important;
    background: #ffffff !important;
    padding: 12px !important;
    box-shadow: 0 1px 5px rgba(0,0,0,.3)!important;
    color: #827e7e !important;
    font-style: italic !important;
    font-size: 17px !important;
}
.profile-conte h1 {
    transition: .8s !important;
    text-align: left !important;
    color: white !important;
  	border-bottom: 5px dotted lightgray !important;
  	padding: 20px !important;
  	background-color: #a21a44 !important;
}
 

  #half-select{
      width: 45% !important;
  }
  #whole-select {
    width: 90%;
  }

  #div-select{
    width: 100% !important;
  }
  .three-columns aside {
    margin: 0px !important;
  }
  
  li{
    color: #751130 !important;
  }

::-webkit-input-placeholder {
   font-style: italic;
}
::-moz-placeholder {
   font-style: italic;  
}
::-ms-input-placeholder {  
   font-style: italic; 
}
:: placeholder {
  font-style: italic;
}
/*************************************************************/
#span_label {
  display: inline-block;
}

.span_label {
  width: 100% !important;
}

.selectBox {
  position: relative;
  width: 100%;
}

.selectBox select {
  width: 100%;
  transition: 0.5s !important;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
  width: 90%;
  transition: 0.5s !important;
}

#checkboxes label {
  display: block;
  background-color: white;
}

#checkboxes label:hover {
  background-color: rgba(30, 144, 255, 1);
  color: white !important;
}

#style-2 li:hover {
  background-color: rgba(30, 144, 255, 1);
  color: white !important;
}

.four-columns aside:{
    float:left;
    width:25%;
  }

  .four4 label:first-child, .four4 label:nth-child(2),.four4 label:nth-child(3), .four4 label:last-child{
    float:left;
    width:25% ;
    transition: 0.5s !important;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left !important;
    text-indent: 20px !important;
  }

.chooselabel {
  padding-top: 10px; 
  width: 100%;
  background-color: white;
}


 #tagol {   
  opacity: 0;    
}
                                          
#tagol:target {
  -webkit-transition: opacity 1.0s ease-in;
  transition-duration: 1.0s;
  opacity: 1;
 }