@charset "UTF-8";
/* CSS Document */

:root {
  --verdedentol: #D1E2AC;
  --verdesecundario: #7F9B44;
    --azulmarino:#132035;
--grisazulado:#C7D5E0;
    --gris:#F5F5F5;
	--level1:#D1E2AC;
	--level1hover:#7F9B44;
	--level2:#E2DAAC;
	--level3:#F5CEA4;
	--level4:#D76969;
}

html {
  scroll-behavior: smooth;
}

body{
  font-family: "Geologica", sans-serif;
  font-optical-sizing: auto;
  font-size:17px;
line-height: 26px;     
  font-weight: 100;
  font-style: normal;
    color:var(--azulmarino);
}

p{
/*width:max-content;*/
}

p.big{
line-height: 28px; 
  font-weight: 700;
}

p.small{
font-size:14px;
line-height: 18px; 
  font-weight: 200;
}

.thin{
font-weight: 100;
}

h1{
    font-size:50px;
    line-height: 54px;
    font-weight: 800;
    text-transform: uppercase;
}

h2{
    font-size:40px;
    line-height: 72px;
    font-weight: 800;
    text-transform: uppercase;
}

h3{
    font-size:30px;
    line-height: 38px;
    font-weight: 700;
}

h4{
    font-size:27px;
    line-height: 32px;
    font-weight: 800;
    text-transform: uppercase;
}
h5{
    font-size:24px;
    line-height: 30px;
    font-weight: 700;
}
h6{
    font-size:20px;
    line-height: 28px;
    font-weight: 700;
    margin-bottom:0px;
}

.pverde{
  color:var(--verdesecundario);
    
}

.p18{
  font-size:18px;   
}

.p16{
  font-size:16px;   
}
strong{
    font-weight:700
}

section{
padding: 20px 0 0 0;    
    
}

* {
  transition: all 0.3s ease-out;
}

a{
	color:inherit;
	text-decoration: none;
}

a:hover, a:focus a:active{
	color:inherit;
	text-decoration: none;
}



/*///efecto hover//*/
.card1 {
  display: block;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
  .card1:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -120px;
    right: -120px;
    background: red;
    height: 150px;
    width: 150px;
    border-radius: 100px;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform 0.45s ease-out;
  }

  .card1:hover:before {
    transform: scale(7);
  }

.card1:hover {
  box-shadow: 0px 1px 20px 11px rgba(0, 0, 0, 0.05);
  }


body section:nth-of-type(1) {
	padding-top:160px !important;
}

@import url('https://fonts.googleapis.com/css?family=Mukta:700');

button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  &.primary{
  /*  width: 12rem;*/
    height: auto;
	  background:#132035;
	  border-radius: 13rem;
	  border:solid 10px #132035;
    .circle {
      @include transition(all, 0.45s, cubic-bezier(0.65,0,.076,1));
      position: relative;
      display: block;
      margin: 0;
      width: 3rem;
      height: 3rem;
      background: #D1E2AC;
      border-radius: 1.625rem;
      .icon {
        @include transition(all, 0.45s, cubic-bezier(0.65,0,.076,1));
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        background: #ffffff;
        &.arrow {
          @include transition(all, 0.45s, cubic-bezier(0.65,0,.076,1));
          left: 0.6rem;
          width: 1.125rem;
          height: 0.125rem;
          background: #D1E2AC;
          &::before {
            position: absolute;
            content: '';
            top: -0.25rem;
            right: 0.0625rem;
            width: 0.625rem;
            height: 0.625rem;
            border-top: 0.125rem solid #132035;
            border-right: 0.125rem solid #132035;
            transform: rotate(45deg);
          }
        }
      }
    }
    .button-text {
      @include transition(all, 0.45s, cubic-bezier(0.65,0,.076,1));
      position: absolute;
      top: 0;
      left: 0rem;
      right: 0;
      bottom: 0;
      padding: 0.75rem 0;
      margin: 0 0 0 1.85rem;
      color: #ffffff;
      font-weight: 600;
      line-height: 1.6;
      text-align: center;
	font-size: 18px;
     
    }
  }
  &:hover {
    .circle {
      width: 100%;
      .icon {
        &.arrow {
        background: #132035;
        transform: translate(1rem, 0);
        }
      }
    }
    .button-text {
      color: #132035;
    }
  }
}


.secondary{
	border:1px solid #132035;
	border-radius: 40px;
	padding: 15px 25px;
	

}

button.secondary.card1:hover .button-text{
	color:#FFFFFF;
	
}

button.secondary.card1:before {
  background: var(--azulmarino);
}


@media (min-width: 1200px) {
h1{
    font-size:60px;
    line-height: 72px;
}
 }  

/*//////////page NOSOTROS/////////////////*/

.valores{
  background:var(--verdedentol);  
}

.valores .item{
  background:#ffffff; 
    padding:20px 25px 15px 25px;
    border-radius: 25px;
    margin-bottom:15px;
}

.diferenciadores .sostenibilidad{
margin-bottom:35px;
}

.diferenciadores .sostenibilidad .imgdiv{
  background-image:url("../images/dentol-sostenibilidad.jpg");   
}

.diferenciadores .tecnologia .imgdiv{
  background-image:url("../images/dentol-tecnologia.png");   
}

.diferenciadores .imgdiv{
aspect-ratio:1/1;
  background-size:cover;
      background-position:center center;
    mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 506"><path fill="white" d="M4,497.6h247.8c79.3,0,143.6-64.3,143.6-143.6V143.6C395.4,64.3,331.1,0,251.8,0L86,0C40.7,0,4,36.7,4,82V497.6z"/></svg>') no-repeat center;
    -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 506"><path fill="white" d="M4,497.6h247.8c79.3,0,143.6-64.3,143.6-143.6V143.6C395.4,64.3,331.1,0,251.8,0L86,0C40.7,0,4,36.7,4,82V497.6z"/></svg>') no-repeat center;
}


@media (min-width: 768px) {
    
    .diferenciadores .tecnologia{
        display:block;
    }
    
     .diferenciadores .tecnologia .txt{
        float:right;
    }
    
    .diferenciadores .tecnologia .imgdiv{
 mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 506'><path fill='white' d='M395.4,0h-247.8C68.3,0,4,64.3,4,143.6v210.4c0,79.3,64.3,143.6,143.6,143.6h165.8c45.3,0,82-36.7,82-82V0Z'/></svg>");
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 506'><path fill='white' d='M395.4,0h-247.8C68.3,0,4,64.3,4,143.6v210.4c0,79.3,64.3,143.6,143.6,143.6h165.8c45.3,0,82-36.7,82-82V0Z'/></svg>");
        display:block;
        float:left;
    -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center center;
           mask-repeat: no-repeat;
      mask-position: center center;
        
}
}


.especialistas{
background: var(--verdedentol);
    /* box-shadow: inset 0 0 0 80px #ffffff;*/
    }


.odontologo{
   background:  linear-gradient(180deg,rgba(19, 32, 53, 0.03) 40%, rgba(19, 32, 53, 1) 99%), url("../images/dentol-odontologo.jpg");
    }


.ortodoncista{
   background:  linear-gradient(180deg,rgba(19, 32, 53, 0.03) 40%, rgba(19, 32, 53, 1) 99%), url("../images/dentol-ortodoncista.jpg");
    }

.odontopediatra{
   background:  linear-gradient(180deg,rgba(19, 32, 53, 0.03) 40%, rgba(19, 32, 53, 1) 99%), url("../images/dentol-odontopediatra.jpg");
    }

.endodoncista{
   background:  linear-gradient(180deg,rgba(19, 32, 53, 0.03) 40%, rgba(19, 32, 53, 1) 99%), url("../images/dentol-endodoncista.jpg");
    }

.especialistas.home-pacientes{
    background-position: center center;
    background-size: 100%;
  
}

.especialistas a.card1.item {
padding:0 20px 0 20px;
 
}

/*.especialistas a.card1.item p{
    text-align:left !important;
}*/
.especialistas a.card1.item p.title{
   margin-bottom:5px !important;
}
/*
.home-pacientes .item.luis:hover{
background-position: calc(100%) -10px;
    background-size: 150%;
    }*/

@media (min-width: 1200px) {
    .valores .content-text{
        padding:30px 0% 30px 25%;
        
    }
    
   .valores .container{
max-width:640px;
    }
    
}

.degradado {
   background: #D1E2AC;
background: -webkit-linear-gradient(180deg,rgba(209, 226, 172, 1) 0%, rgba(209, 226, 172, 0) 400px);
background: -moz-linear-gradient(180deg,rgba(209, 226, 172, 1) 0%, rgba(209, 226, 172, 0) 400px);
background: linear-gradient(180deg,rgba(209, 226, 172, 1) 0%, rgba(209, 226, 172, 0) 400px);
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr="#D1E2AC",
  endColorstr="#D1E2AC",
  GradientType=0
);
}

.degradado2 {
   background: #D1E2AC;
background: -webkit-linear-gradient(180deg,rgba(209, 226, 172, 1) 200px, rgba(209, 226, 172, 0) 600px);
background: -moz-linear-gradient(180deg,rgba(209, 226, 172, 1) 200px, rgba(209, 226, 172, 0) 600px);
background: linear-gradient(180deg,rgba(209, 226, 172, 1) 200px, rgba(209, 226, 172, 0) 600px);
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr="#D1E2AC",
  endColorstr="#D1E2AC",
  GradientType=0
);
}

.ParagraphBold{
	font-weight:700;
}

.SubHeadingVerde{
font-size:20px;
color:#7F9B44;
text-transform:none;
	font-weight:600;
}

.SubHeadingCafe{
font-size:20px;
color:#B77A39;
text-transform:none;
	font-weight:600;
}

.SubHeadingRojo{
font-size:20px;
color:#732525;
text-transform:none;
	font-weight:600;
}

.Col50Right .dot{
	margin-left:7px;
}

.Col50Left .dot{
	margin-right:-7px;
}