/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Fonts
# Body styles
# Navigation menu
  ## Adaptations Bootstrap 5.0
# BG Colors
# Text formatting
  ## Global
  ## Form texts
  ## Links
  ## Portfolio texts
  ## Boxicons
  ## Error messages
  ## Banner texts
  ## Author info texts
  ## Card texts
# Images formatting
  ## Contact template
  ## Global
# Buttons
  ## Global buttons
# Form inputs and labels
  ## Global fields
  ## Comments form
# Animation
  ## Type Writting
# Responsive styles
  ## Max width is 986px
  ## Max width is 760px
  ## Max width is 576px
--------------------------------------------------------------*/
/*-------------------------------------------------------------
>>> FONTS
-------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;700&display=swap');
/*-------------------------------------------------------------
---------------------------------------------------------------
>>> BODY STYLES
-------------------------------------------------------------*/
body{
  transition: opacity 0.2;
  -webkit-transition: opacity 0.2;
  -moz-transition: opacity 0.2;
  -o-transition: opacity 0.2;
	font-family: 'Montserrat', sans-serif;
	background-color: #f0f0f0;
	color: #5D5C61;
}
/*-------------------------------------------------------------
---------------------------------------------------------------
>>> NAVIGATION MENU
>>>>> Adaptations Bootstrap 5.0
-------------------------------------------------------------*/
.nav-tabs {
    border-bottom: none !important;
}
/*-------------------------------------------------------------
---------------------------------------------------------------
>>> BG COLORS
-------------------------------------------------------------*/
.bg-rose {
    background-color: #e3dede !important;
}
.bg-purple{
  background-color: #d6c0c0 !important;
}

.bg-beige{
  background-color: #f0f0f0 !important;
}
/*-------------------------------------------------------------
---------------------------------------------------------------
>>> TEXT FORMATTING
>>>>>> Global
-------------------------------------------------------------*/
h2{
  font-size: 1.2em !important;
}
h3{
  font-size: 1em !important;

}
/*-------------------------------------------------------------
>>>>>>>>> Form texts
-------------------------------------------------------------*/
.comment-form, h3#reply-title, .logged-in-as{
  font-size: 0.8em !important;
}
/*-------------------------------------------------------------
>>>>>> Links
-------------------------------------------------------------*/
a:hover{
  color: #553f4a !important;
}
a{
  color: inherit;
}
div p {
	margin-bottom: 0 !important;
	line-height:2rem ;
}
/*-------------------------------------------------------------
>>>>>>>>> Portfolio texts
-------------------------------------------------------------*/
.text-portfolio{
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
}
.text-portfolio h3{
  font-size: 2em !important;
  text-shadow:2px 2px 2px #000000;
}
h4.mentions{
  font-size: 0.7rem !important;
}
/*-------------------------------------------------------------
>>>>>> Boxicons
-------------------------------------------------------------*/
.icon-font-30{
  font-size: 30px !important;
}
.icon-font-15{
  font-size: 15px !important;
}
/*-------------------------------------------------------------
>>>>>>>>> Error message
-------------------------------------------------------------*/
.error-message{
  font-size: 5em !important;

}
/*-------------------------------------------------------------
>>>>>>>>> Banner texts
-------------------------------------------------------------*/
.bg-img-banner h1, .bg-img-banner p, .bg-img-banner p > a {
  color: #f0f0f0 !important;
  text-shadow: 2px 2px 10px #000000;
}
/*-------------------------------------------------------------
>>>>>>>>> Author info texts
-------------------------------------------------------------*/
.dvm-info-author {
  font-size: 0.7em !important;
}
/*-------------------------------------------------------------
>>>>>>>>> Card texts
-------------------------------------------------------------*/
.card-text{
  font-size: 0.8em !important;
}
.card-footer > small.text-muted{
  text-transform: lowercase !important;
}
.comment-meta{
  font-size: 0.8em !important;
}
/*-------------------------------------------------------------
---------------------------------------------------------------
>>> IMAGES FORMATTING
>>>>>> Contact template
-------------------------------------------------------------*/
.img-rounded-300{
  width: 300px !important;
    border-radius: 50% !important;
}
/*-------------------------------------------------------------
>>>>>>>>> Global
-------------------------------------------------------------*/
.img-50-px{
  width: 50px !important;
  height: auto !important;
}
.img-25-px{
  width: 25px !important;
  height: auto !important;
}
.img-scale{
  transform: scale(1.1);
  -webkit-transform: scale(1.1) !important;
   -ms-transform: scale(1.1) !important;
}
.img-fluid-80{
  width: 80%;
  height: auto;
}
.img-crop-square{
  width: 300px;
  height: 300px !important;
  object-fit: cover !important;
}
.bg-img-banner{
  background-attachment: fixed !important;
  object-position: center center !important;
  background-size: 100% auto !important;
  width: 100% !important;
  min-height: 350px !important;
  object-fit: cover !important;
}
.img-hover-opacity{
opacity: 0.5;
transition: all 0.3s ease-in-out !important;
-webkit-transition: all 0.3s ease-in-out !important;
  -moz-transition: all 0.3s ease-in-out !important;
  -o-transition: all 0.3s ease-in-out !important;
}
.img-hover-opacity:hover{
opacity: 0.8;
}
/*-------------------------------------------------------------
---------------------------------------------------------------
>>> BUTTONS
>>>>>> Global buttons
-------------------------------------------------------------*/
.cta-image{
  color: #f0f0f0 !important;
  border: solid 1px #f0f0f0;
  padding: 0.8em !important;
}
.cta-image:hover{
  background-color: #f0f0f0;
  color: #000000 !important;
}
button, a.btn, input[type=submit], button.wpforms-submit, btn  {
	padding: 2% 4% !important;
	color: #5D5C61 !important;
	background-color: transparent !important;
	border: none !important;
  -webkit-box-shadow: 
    10px 5px 10px 0px rgba(0, 0, 0, 0.25),
    -8px -8px 12px 0 #ffffff !important;
	 box-shadow: 
    10px 5px 10px 0px rgba(0, 0, 0, 0.25),
    -8px -8px 12px 0 #ffffff !important;
  border-radius: 50px !important;
  transition: all 0.3s ease-in-out !important;
  -webkit-transition: all 0.3s ease-in-out !important;
  -moz-transition: all 0.3s ease-in-out !important;
  -o-transition: all 0.3s ease-in-out !important;

}
button:hover, a.btn:hover, input[type=submit]:hover, button.wpforms-submit:hover, btn:hover{
  -webkit-box-shadow: inset -2px -2px 8px rgba(255, 255, 255, 1),
        inset -2px -2px 12px rgba(255, 255, 255, 0.5),
        inset 2px 2px 4px rgba(255, 255, 255, 0.1),
        inset 2px 2px 8px rgba(0, 0, 0, 0.15) !important;
  box-shadow: inset -2px -2px 8px rgba(255, 255, 255, 1),
        inset -2px -2px 12px rgba(255, 255, 255, 0.5),
        inset 2px 2px 4px rgba(255, 255, 255, 0.1),
        inset 2px 2px 8px rgba(0, 0, 0, 0.15) !important;
}
.button-purple, a.comment-reply-link{
   -webkit-box-shadow: 
    10px 5px 10px 0px rgba(134, 109, 109, 0.25), 
    -8px -8px 12px 0 #d9cbcb !important;
  box-shadow: 
    10px 5px 10px 0px rgba(134, 109, 109, 0.25), 
    -8px -8px 12px 0 #d9cbcb !important;
}
.button-purple:hover, a.comment-reply-link:hover{
   -webkit-box-shadow: inset -2px -2px 8px rgb(221, 219, 219), 
  inset -2px -2px 12px rgba(113, 102, 102, 0.5), 
  inset 2px 2px 4px rgba(255, 255, 255, 0.1), 
  inset 2px 2px 8px rgba(0, 0, 0, 0.15) !important;
  box-shadow: inset -2px -2px 8px rgb(221, 219, 219), 
  inset -2px -2px 12px rgba(113, 102, 102, 0.5), 
  inset 2px 2px 4px rgba(255, 255, 255, 0.1), 
  inset 2px 2px 8px rgba(0, 0, 0, 0.15) !important;
}
a.comment-reply-link{
  border-radius: 50px !important;
  padding: 2% 4% !important;
  color: #5D5C61 !important;
  background-color: transparent !important;
  border: none !important;
  margin-bottom: 2% !important;
}
/*-------------------------------------------------------------
---------------------------------------------------------------
>>> FORM INPUTS AND LABEL
>>>>>> Global fields
-------------------------------------------------------------*/
input[type=email], input[type=text], textarea{
  padding: 2% 4% !important;
  color: #5D5C61 !important;
  background-color: transparent !important;
  border: none !important;
  -webkit-box-shadow: inset -2px -2px 8px rgba(255, 255, 255, 1),
        inset -2px -2px 12px rgba(255, 255, 255, 0.5),
        inset 2px 2px 4px rgba(255, 255, 255, 0.1),
        inset 2px 2px 8px rgba(0, 0, 0, 0.15) !important;
  box-shadow: inset -2px -2px 8px rgba(255, 255, 255, 1),
        inset -2px -2px 12px rgba(255, 255, 255, 0.5),
        inset 2px 2px 4px rgba(255, 255, 255, 0.1),
        inset 2px 2px 8px rgba(0, 0, 0, 0.15) !important;

}
/*-------------------------------------------------------------
>>>>>>>>> Comments form
-------------------------------------------------------------*/
.comment-form-comment{
  margin-bottom: 2% !important;
}
.comment-form-comment > label{
  display: block !important;
}
.commentlist {

    list-style: none !important;
}
.comment-body{
  background-color: #d6c0c0;
  padding: 2% !important;
  margin: 4% !important;
}
.comment-body > p{
  padding: 5% !important;
}
.reply{
  padding-bottom: 3% !important;
}
.children > li {
    list-style-image: url(.././img/icons/reply.png) !important;
}
/*-------------------------------------------------------------
---------------------------------------------------------------
>>> ANIMATION
>>>>>> Type writting
-------------------------------------------------------------*/
.line-1{
    position: relative;     
    font-size: 0.9em;  
    font-weight: 700; 
    width: 22.4em;
    /*top: 50%;  
    
    margin: 0 auto;
    transform: translateY(-50%);  
     text-align: center;*/
    border-right: 2px solid rgba(255,255,255,.75);    
    white-space: nowrap;
    overflow: hidden;
  
}
.anim-typewriter{
  animation: typewriter 4s steps(44) 1s 1 normal both,
             blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 22.4em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(85, 60, 60, 0.75);}
  to{border-right-color: transparent;}
}
/*-------------------------------------------------------------
---------------------------------------------------------------
>>> RESPONSIVE STYLES
>>>>>> Max width is 986px
-------------------------------------------------------------*/
@media screen and (max-width: 986px) {

.img-scale{
  transform: scale(1.5) !important;
  -webkit-transform: scale(1.5) !important;
  -ms-transform: scale(1.5) !important;
}}
/*-------------------------------------------------------------
>>>>>> Max width is 760px
-------------------------------------------------------------*/
@media screen and (max-width: 760px) {
.text-portfolio h3{
  font-size: 1em !important;
}
.img-scale{
  transform: scale(2.5) !important;
  -webkit-transform: scale(2.5) !important;
   -ms-transform: scale(2.5) !important;
}

  }
/*-------------------------------------------------------------
>>>>>> Max width is 576px
-------------------------------------------------------------*/
@media screen and (max-width: 576px) {

.img-crop-square{
 object-fit: inherit !important;
 width: 100% !important;
 height: auto !important;
}

  }