/*
Theme Name: sob_theme
Author: Arturo Soberanes 
Author URI: arturosoberanes.com 
Description: Theme for SOB Team
Version: 1.0
*/
@font-face{
    font-family: 'OpenSansLight';
    src: url(./text/OpenSans-Light.ttf);
}
@font-face{
    font-family: 'OpenSansRegular';
    src: url(./text/OpenSans-Regular.ttf);
}
@font-face{
    font-family: 'Spartan';
    src: url(./text/Spartan-VariableFont_wght.ttf);
}
:root {
  --textLink:#d2425d;
  --textLinkHover:#FFF;
  --paddingOne:1em;
  --paddingTwo:2em;
}
* {
  margin:0;
  box-sizing: border-box;
  font-family: 'Spartan';

}

body {
    background-color: #f9f9f9;
    font-family: Helvetica;
}

.article-loop header {
  padding:var(--paddingOne);
}
footer {
  margin-top: 4px;
}

a {
  text-decoration: none;
  color:var(--textLink);
}
a:hover {
  color:var(--textLinkHover);
}


/* 'Margin: 0 auto' centers block content on the page */
.wrap {
  width: 80%;
  margin: 10em auto;
}

.content-area {
  display: inline-block;
}

.content-thin {
    width: 70%;
    margin:auto;
}

.content-full-width {
    width: 100%;
}

.content-area,
.primary-sidebar {
  display: inline-block;
}

.primary-sidebar {
  width: 25%;
  padding: 1%;
  vertical-align: top;
  background-color: #4B4B4B99;
}

.article-loop {
    width: 45%;
    text-align: left;
    margin: 5px;
    padding: 2em;
}
@media screen and (max-width: 1000px) {
  .article-loop {
    width: 99%;
  }
}

.article-full {
  width: 99%;
  padding: 1%;
}

.article-loop,
.article-full {
  display: inline-block;
  vertical-align: top;
  background-color: #4B4B4B99;
  border-radius: 4px;
  margin-bottom: 4px;
}
@media screen and (max-width: 1000px) {
  .content-area,
  .primary-sidebar {
    width: 100%;
  }
}
/* Custom */
body{
    background: linear-gradient(rgba(58, 58, 58, 0.465),rgba(0,0,0,0.465)),url(https://sobteam.com/img/body-background.webp);
    color: white;
    background-attachment: fixed;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin:0;
}
.header-fix{
    background-color: #383838;
    text-align: center;
    height: 145px;
    width: 100%;
    font-size: 11px;
    border-bottom:2px solid #ec4f8f;
    padding-top: 25px;
}
.header-fix img{
    filter: drop-shadow(0px 0px 2px black);
    width: 2%;
    max-width: 32px;
    transform:rotate(0deg);
    transition: 1s;
    animation-name: rotacion;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
.header-fix img:hover{
    filter: drop-shadow(0px 0px 2px white);
    width: 3%;
    transition:1s;
    transform:rotate(360deg);
}
.header-fix span{
    font-size:20px!important;
}
.menu-fix{
    width: 100%;
    margin: auto;
    max-width: 1600px;
    margin-top: 1em;
}
.menu-fix ul {
  padding:0px;
}
.menu-fix ul li{
    font-size: 20px !important;
    display: inline;
    list-style: none;
    padding: 0px 4em 0px 4em;
    border-bottom: 0px solid #ec4f8f;
    transition:1s;
}
.menu-fix ul li a{
    color:#ffffff;
}
.menu-fix ul li a:hover{
    color:#ec4f8f;
    font-weight: bold;
    transition: 0.5s;
}
#sob{
    font-family: 'OpenSansLight';
    color:#ffffff;
}
#team{
    font-family: 'OpenSansLight';
    color: #ec4f8f;
}
nav{
    display: none;
}
#btn,
#check {
  display:none;
}


@media screen and (max-width:1000px){
  #btn {
    display:block;
  }
  .header-fix img{
      width:10%;
      max-width: 48px;
  }
  .menu-fix{
      display: none;
  }
  #btn{
      position: absolute;
      top: 20px;
      right: 20px;
      display: block;
      z-index: 20;
      font-size: 40px;
  }
  #btn{
    cursor: pointer;
  }
  #menu-movil{
      overflow: hidden;
      z-index: 10;
      display: block;
      width: 0%;
      margin:auto;
      position:absolute;
      top:0px;
      bottom:-2000px;
      text-align: center;
      transition: 1s;
      background-color: rgb(161, 0, 108);
  }
  #menu-movil ul{
      margin-top: 20%;
      padding-bottom: 10%;
      border-bottom: 3px solid rgb(44, 44, 44);
  }
  #menu-movil ul li{
      font-size: 30px !important;
      display: block;
      list-style: none;
      padding: 7%;
      transition:1s;
  }
  #menu-movil ul li a{
      color:#ffffff;
  }
  #menu-movil ul li a:hover{
      color:#ec4f8f;
      font-weight: bold;
      transition: 0.5s;
  }
  #check:checked + nav#menu-movil{
  width:100%;
  transition: 2s;
  }
  .article-loop img{
    width:100%;
  }

}

footer{
    width:100%;
    height: 150px;
    background-color: rgb(37, 37, 37);
    text-align: center;
    padding: 3%;
    padding-top: 2em;
    margin: 0px;
    margin-top: 15em;
}
@keyframes rotacion{
    0%{
        opacity: 0;
        transform:rotate(0deg);
    }
    50%{
        opacity: 0.5;
        transform:rotate(360deg);
    }
    100%{
        opacity: 1;
        transform:rotate(0deg);
    }
}