/*/////////////////////////////////////////////////////////// PORTRAIT SETTINGS ///////////////////////////////////////////////////////////*/


@media only screen and (orientation: portrait){

html {
    height: 100%; 
}
body {
    overflow: hidden;
    height: 100%; 
}
/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: #022e36; /* For browsers that do not support gradients */
    background: -webkit-radial-radial-gradient(circle, #FEFEFE, #022e36); /* Safari */
    background: -o-radial-radial-gradient(circle, #FEFEFE, #022e36); /* Opera 11.6 to 12.0 */
    background: -moz-radial-radial-gradient(circle, #FEFEFE, #022e36); /* Firefox 3.6 to 15 */
    background: radial-gradient(circle, #FEFEFE, #022e36); /* Standard syntax */
    z-index:99; /* makes sure it stays on top */
}
#status {
    width:300px;
    height:212px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(../img/preloader/LoadLogo.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-106px 0 0 -150px; /* is width and height divided by two */
}
/*hide scrollbars*/
::-webkit-scrollbar { 
    display: none; 
}
/*General text settings*/
a, p, h1, h2, h3, h4, h5, h6, div{
    -webkit-text-shadow: none !important;
    -moz-text-shadow: none !important;
    -o-text-shadow: none !important;
    text-shadow: none !important;
    font-family: Raleway, sans-serif !important; /*Maybe not Impact?*/
    text-decoration: none !important;
}
/*Regular text*/
a, p{
    font-weight: 100 !important;
    font-size: 1em !important;
    color: #000;
}
/*Big headings - main headings on page*/
h1{
    font-weight: 900 !important;
    font-size: 3em !important;
}
/*Medium headings / MenuBall*/
h2{
    font-weight: 900 !important;
    font-size: 2.5em !important;
}
/*Project headings (and minor/medium)*/
h3{
    font-weight: 100 !important;
    font-size: 2.5em !important;
}
/*Minor headings*/
h4{
    font-weight: 400 !important;
    font-size: 2em !important;
}
/*In-text headings*/
h5{
    font-weight: 400 !important;
    font-size: 1.2em !important;
}

/*Smaller font sizes for lower resolution*/
@media all and (max-width: 1280px) and (orientation: portrait) {
/*Big headings - main headings on page*/
h1{
    font-weight: 900 !important;
    font-size: 2.5em !important;
}
/*Medium headings / MenuBall*/
h2{
    font-weight: 900 !important;
    font-size: 2.4em !important;
}
/*Project headings (and minor/medium)*/
h3{
    font-weight: 100 !important;
    font-size: 2em !important;
}
}

@media all and (max-width: 650px) and (orientation: portrait) {
/*Regular text*/
p{
    font-weight: 100 !important;
    font-size: 0.8em !important;
    color: #000;
}
/*Big headings - main headings on page*/
h1{
    font-weight: 900 !important;
    font-size: 2em !important;
}
/*Medium headings / MenuBall*/
h2{
    font-weight: 900 !important;
    font-size: 2em !important;
}
/*Project headings (and minor/medium)*/
h3{
    font-weight: 100 !important;
    font-size: 1.8em !important;
}
/*Minor headings*/
h4{
    font-weight: 400 !important;
    font-size: 1.5em !important;
}
/*In-text headings*/
h5{
    font-weight: 400 !important;
    font-size: 0.8em !important;
}
}

@media all and (max-width: 410px) and (orientation: portrait) {
/*Regular text*/
p{
    font-weight: 100 !important;
    font-size: 0.6em !important;
    color: #000;
}
/*Big headings - main headings on page*/
h1{
    font-weight: 900 !important;
    font-size: 1.5em !important;
}
/*Medium headings / MenuBall*/
h2{
    font-weight: 900 !important;
    font-size: 1.4em !important;
}
/*Project headings (and minor/medium)*/
h3{
    font-weight: 100 !important;
    font-size: 1.5em !important;
}
/*Minor headings*/
h4{
    font-weight: 400 !important;
    font-size: 1.2em !important;
}
/*In-text headings*/
h5{
    font-weight: 400 !important;
    font-size: 0.6em !important;
}
}

/* unvisited link */
a:link {
    color: #EDC548 !important;
    -webkit-transition: color 0.4s;
    transition: color 0.4s;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
}
/* visited link */
a:visited {
    color: #EDC548 !important;
}
/* selected link */
a:active {
    color: #777 !important;
}



/*//////////////////////////// MENUBALL & SoMe-CONTENT ////////////////////////////*/
/*Central navigation ball*/
.menuBall {
  margin: auto;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  width: 30vw;
  height: 30vw;
  background: -webkit-linear-gradient(180deg, #EDC548 50%, #fff 50%); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(180deg, #EDC548 50%, #fff 50%); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(180deg, #EDC548 50%, #fff 50%); /* For Firefox 3.6 to 15 */
  background: linear-gradient(180deg, #022e36 50%, #3f7888 50%);
  -webkit-transition: 0.4s 0s;
  transition: 0.4s 0s;
  z-index: 2;
}
/*Part of MenuBall leading to How & What*/
#menuHowWhat{
  position: absolute;
  margin: 0;
  padding: 2vw 0;
  top: 50%;
  width: 100%;
  left: 0;
  text-align: center;
  overflow: hidden;
}
/*Part of MenuBall leading to Who & Where*/
#menuWhoWhere{
  position: absolute;
  margin: 0px;
  padding: 2vw 0px 0px 0px;
  bottom: 50%;
  left: 0%;
  width: 100%;
  text-align: center;
  overflow: hidden;
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}
/*Positions of Menuball for each page*/
.indexPosMenuBall {
  -webkit-transform: translate(0px, 0px) rotate(90deg) scale(1, 1);
  transform: translate(0, 15vh) rotate(80deg) scale(0.9, 0.9);
  border-radius: 50%;
}
.howWhatPosMenuBall {
  -webkit-transform: translate(50vw,-34vh) rotate(270deg) scale(0.6, 0.6);
  transform: translate(50vw,-34vh) rotate(270deg) scale(0.6, 0.6);
  border-radius: 0%;
  height: 22vw;
  width: 25vh;
}
.whoWherePosMenuBall {
  -webkit-transform: translate(-50vw,-34vh) rotate(270deg) scale(0.6, 0.6);
  transform: translate(-50vw,-34vh) rotate(270deg) scale(0.6, 0.6);
  border-radius: 0%;
  height: 22vw;
  width: 25vh;
}
/*DogD-logo*/
.logo{
  display: none;
}

/*//////////////////////////// INDEX-page ////////////////////////////*/
#index{
  margin: 0px;
  padding: 0px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  border-style: none !important;
  background: #B19065; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(circle, rgba(70, 50, 0, 0.8), rgba(0, 0, 0, 0.9)); /* Safari */
  background: -o-radial-gradient(circle, rgba(70, 50, 0, 0.8), rgba(0, 0, 0, 0.9)); /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle, rgba(70, 50, 0, 0.8), rgba(0, 0, 0, 0.9)); /* Firefox 3.6 to 15 */
  background: radial-gradient(circle, #265561, #022e36); /* Standard syntax */
  width: 100vw;
  height: 100vh;
}
/*Container for Index content*/
#indexWrapper{
    height: 50vh;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
}
/*DogD-logo*/
#indexLogo{
    height: auto;
    width: 40vw;
    padding: 0 0 3vh 0;
}
/*Main heading on Index*/
#indexHeading {
  position: absolute;
  bottom: 0;
  height: auto;
  width: 100vw;
  text-align: center;
  white-space: nowrap;
  border-style: none !important;
}

/*//////////////////////////// Who&Where-page ////////////////////////////*/

/*FULL page with Who & Where*/ 
#whoWhere{
  margin: 0px;
  padding: 0px;
  width: 100vw;
  height: 100vh;
  border-style: none !important;
  background-color: rgba(255, 96, 96, 1);
}
/*Heading (main info) settings of Who & Where*/
#mainWhoWhere{
  margin: 0px;
  padding: 0px;
  width: 100vw;
  height: 100vh;
  border-style: none !important;
}
/*Content wrapper of Who & Where*/
#contentWhoWhere{
  margin: 0px;
  padding: 0px;
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  background-image: url('../img/backgrounds/WhoPortrait.jpg');
}
/*Footer of Who & Where*/
#footerWhoWhere{
  margin: 0px !important;
  padding: 2vh 6.5vw 2vh 6.5vw !important;
  width: 100vw;
  height: auto;
  background-color: rgba(255, 96, 96, 1);
  border-style: none !important;
}
/*Color-overlay for Who&Where*/
#whoWhereOverlay{
  margin: 0px;
  padding: 0px;
  top: 0px;
  left: 0px;
  position: absolute;
    background: #B19065; /* For browsers that do not support gradients */
    background: -webkit-radial-gradient(circle, #fff 10%, #B19065); /* Safari */
    background: -o-radial-gradient(circle, #fff 10%, #B19065); /* Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(circle, #fff 10%, #B19065); /* Firefox 3.6 to 15 */
    background: radial-gradient(circle, #347C82, #002D30); /* Standard syntax */
  width: 100vw;
  height: 100vh;
  opacity: 0.3;
}

/*//////////////////////////// MAIN TEXT ON WHO&WHERE ////////////////////////////*/
/*scroll-indicator*/
#scrollWhoWhere{
  display: none;
}
/*Main text-container on WhoWhere*/
#whoWhereContainer {
    height: auto;
    width: 100vw;
    min-height: 30vh;
/*    max-height: 60vh;*/
    position: absolute;
    padding: 2vh 7vw;
    bottom: 0vh;
    left: 0vw;
    overflow: hidden;
    background-color: rgba(255,255,255,1);
    border-style: none !important;
}
/*Main heading on WhoWhere*/
#whoWhereHeading {
    height: 100%;
    width: 86vw;
    float: left;
    white-space: nowrap;
    border-style: none !important;
}
/*Main text on WhoWhere*/
#whoWhereText {
  height: 100%;
  width: 86vw;
/*  max-height: 50vh;*/
  float: left;
  overflow: hidden;
}
#scrollFade{
  display: hidden;
}
/*//////////////////////////// INDIVIDUAL INFO ON WHO&WHERE ////////////////////////////*/
/*Clickable DIVs on faces in Who&Where*/
/*Per-Johan*/
#areaa {
  position: absolute;
  z-index: 2;
  bottom: 84vw;
  right: 77vw;
  width: 15vw;
  height: 15vw;
  cursor: pointer;
}
/*Anders*/
#areab {
  position: absolute;
  z-index: 2;
  bottom: 92vw;
  right: 60vw;
  width: 15vw;
  height: 15vw;
  cursor: pointer;
}
/*Simon*/
#aread {
  position: absolute;
  z-index: 3;
  bottom: 89vw;
  left: 58vw;
  width: 15vw;
  height: 15vw;
  cursor: pointer;
}
/*SvenH*/
#areac {
  position: absolute;
  z-index: 2;
  bottom: 98vw;
  left: 73vw;
  width: 15vw;
  height: 15vw;
  cursor: pointer;
}
/*END OF INDIVIDUAL AREAS*/


/*#areaa {
  height: 17vw;
  width: 17vw;
  position: absolute;
  bottom: 0vh;
  left: 18vw;
  z-index: 100;
}
#areab {
  margin: auto;
    position: absolute;
    bottom: 0vh;
    left: 37vw;
  width: 18vw;
  height: 18vw;
  z-index: 100;
}
#areac {
  margin: auto;
  position: absolute;
  bottom: 15vh;
  left: 53vw;
  width: 21vw;
  height: 30vw;
  z-index: 100;
}
#aread {
  margin: auto;
  position: absolute;
  bottom: 12vh;
  left: 74vw;
  width: 12vw;
  height: 23vw;
  z-index: 100;
}*/
/*Textbox popups when faces are clicked in Who&Where*/
#infoa, #infob, #infoc, #infod {
    position: absolute;
    padding: 0;
    bottom: 8vh;
    left: 6.9vw;
    height: auto;
    width: 86vw;
    min-height: 30vh;
    max-height: 60vh;
    overflow: hidden;
  border-style: solid;
  border-width: 1px;
    border-color: #666;
    background-color: rgba(255,255,255,1);
    transition: all .4s ease-in-out;
}
/*Heading in text-boxes*/
.infoHeading{
    height: 100%;
    width: 78vw;
    float: left;
    white-space: nowrap;
    margin: 2vh 4vw;
    min-height: 5vh;
}
/*Textcontainer in text-boxes*/
.infoText{
    height: 100%;
    width: 78vw;
    max-height: 50vh;
    margin: 0vh 4vw 2vh 4vw;
    float: left;
    overflow: auto;
}
/*Close-button in text-boxes*/
.crosshair{
  position: absolute;
  top: 2vh;
  right: 4vw;
  width:5vw;
  height:5vw;
  cursor: pointer;
}
/*ScrollDown-button in text-boxes*/
.downBtnStyle{
  position: absolute;
  top: 2vh;
  right: 11vw;
  width:5vw;
  height:5vw;
  display: none;
}
/*ScrollUp-button in text-boxes*/
.upBtnStyle{
  position: absolute;
  top: 2vh;
  right: 18vw;
  width:5vw;
  height:5vw;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  display: none;
}
/*Class for toggling textboxes in Who&Where*/
.invisible{
  visibility:hidden;
  opacity: 0;
  transition: all .4s ease-in-out;
}



/*//////////////////////////// MAP-SECTION ON WHO&WHERE ////////////////////////////*/

#mapContainer{
  position: relative;
  top: 0px;
  left: 0px;
  padding: 0px;
  margin: 0px;
  width: 100vw;
  height: auto;
  border: 0px !important;
  border-style: none !important;
}
#contactContainer{
  position: relative;
  padding: 2vh 7vw 2vh 7vw;
  top: 0vh;
  left: 0vw;
  right: auto;
  width: 100vw;
  height: auto;
  background-color: rgba(255,255,255,1);
  overflow: hidden;
  z-index: 1;
  border-style: none !important;
}
#contactHeader{
  float: left;
  width: 86vw;
  height: auto;
  margin: 0vh 0vw 2vh 0vw;
  overflow: hidden;
  background-color: #fff;
  white-space: nowrap;
}
#addressContainer{
  float: left;
  margin: 0vw;
  width: 86vw;
  height: auto;
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}
#errorContainer{
  width:86vw;
  height:auto;
  max-height:10vh;
  overflow:hidden;
  text-align:center;
  background-color:none;
  margin: 1vh 0vh;
  padding:0px;
}
#map{
  position: relative;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 50vh;
}
#calculateContainer{
  width: 86vw;
  height: 100%;
  background-color: transparent; !important;
  margin: 2vh 0vh;
  padding: auto;
  display: inline-flex;
  vertical-align: middle;
  border-style: solid;
  border-width: 1px;
  border-color: #000;
}
#textareaContainer{
  float: left;
  width: 100%;
  height: 5vh;
  margin: 0px;
  padding: 0%;
  background-color: transparent; !important;
}
.ui-input-text #from { 
  width: 100% !important;
  font-size: 2vh !important;
  color: #777 !important;
  height: 5vh;
  margin: 0px !important;
}
::-webkit-input-placeholder {
    color:    #888;
}
:-moz-placeholder {
    color:    #888;
}
::-moz-placeholder {
    color:    #888;
}
:-ms-input-placeholder {
    color:    #888;
}
.ui-shadow-inset { 
  border-radius: 0% !important;
  border-style: none !important;
  box-shadow: none !important;
  margin: 0px !important;
  padding: 0px !important;
}
/*Current location*/
#dotContainer{
  width: 5vh;
  height: 5vh;
  padding: auto;
}
#fromDot{
  width:3vh;
  height:3vh;
  padding: 1vh 2vw 1vh 1vw;
}
/*Calculate route*/
#buttonContainer{
  width: 86vw !important;
  height: 5vh !important;
  text-align: center !important;
}
#posPic{
  width: 5vh;
  margin: 0px !important;
  padding: 0px !important;
}

/*//////////////////////////// How&What-page ////////////////////////////*/

/*FULL page with How & What*/ 
#howWhat{
  margin: 0px;
  padding: 0px;
  width: 100vw;
/*  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  background-image: url('../img/backgrounds/How5.jpg');*/
}
/*Heading (main info) settings of How & What*/
#mainHowWhat{
  margin: 0px;
  padding: 0px;
  width: 100vw;
  height: 100vh;
  border-style: none !important;
  box-shadow: none !important;
  /*background-color: transparent !important;*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  background-image: url('../img/backgrounds/HowPortrait.jpg');
}
/*Color-overlay for header/main section of How & What*/
#howWhatOverlay{
  display: none;
}
/*Footer of How & What*/
#footerHowWhat{
  display: none;
}

/*//////////////////////////// MAIN TEXT ON HOW&WHAT ////////////////////////////*/
/*Main container on HowWhat*/
#howWhatContainer {
  position: absolute;
  bottom: 0;
  width: 100vw;
  max-height: 55vh;
  background-color: #fff;
  overflow: hidden;
}
/*Heading and text on HowWhat*/
#howWhatInfo{
  width: auto;
  height: auto;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  float: left;
}
/*Main heading on HowWhat*/
#howWhatHeading {
  padding: 2vh 7vw 1vh 7vw;
  height: auto;
  width: 86vw;
  float: left;
  white-space: nowrap;
}
/*Main text on HowWhat*/
#howWhatText {
  width: 86vw;
  max-height: 30vh;
  padding: 0 7vw 2vh 7vw;
  margin: 0 0 10vh 0;
  overflow: auto;
  float: left;
}
/*Main heading on HowWhat*/
#projectListHeading {
  position: absolute;
  bottom: 0;
  height: 7vh;
  width: 86vw;
  padding: 3vh 7vw 1vh 7vw;
  white-space: nowrap;
  text-align: center;
  background: #fff;
}



/*//////////////////////////// COLLAPSIBLE ON HOW&WHAT ////////////////////////////*/

/*Heading (div) of collapsibles*/
.headingBkg{
  width: 100vw;
  height: 5vh;
  padding: 1vh 0vw;
}
/*Heading of collapsible*/
.ui-btn{
  padding: 1vh 0vw 0vh 0vw !important;
  border: 0px !important;
  background: -webkit-linear-gradient(0deg, #fff 99%, #888 1%) !important; /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(0deg, #fff 99%, #888 1%) !important; /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(0deg, #fff 99%, #888 1%) !important; /* For Firefox 3.6 to 15 */
  background: linear-gradient(0deg, #fff 99%, #888 1%) !important;
  box-shadow: none !important;
}
.ui-collapsible .ui-collapsible-heading-toggle {
    text-align: center;
}
/*Project headers when open*/
.ui-collapsible-heading a{
  color: #333 !important;
  border-style: none;
  box-shadow: none !important;
}
/*Project headers when closed*/
.ui-collapsible-heading-collapsed a{
    color: #bbb !important;
}
/*Content of collapsible*/
.ui-collapsible-content {
  height: auto !important;
  width: 100vw;
  overflow: hidden;
  margin: 0px !important;
  padding: 0px !important;
  border-style: none;
  box-shadow: none !important;
}

/*//////////////////////////// PROJECT CONTENT WITHIN COLLAPSIBLES IN HOW&WHAT ////////////////////////////*/
/*Content wrapper within collapsible*/
.projectContent{
  position: relative;
  left: 0vw;
  top: 0vh;
  width: 100vw;
  height: auto !important;
  background-color: #fff;
}
/*Actual content of projects*/
/*Textarea*/
.projectTextArea{
  width: 100vw;
  height: auto;
  overflow: hidden;
  background-color: transparent;
  position: relative;
  left: 0vw;
  top: 0vh;
}
/*Slider arrows*/
.unslider-arrow.prev {
    bottom: 25vh;
    left: 2vw;
}
.unslider-arrow.next{
    bottom: 25vh;
    right: 2vw;
}
/*text*/
.textBox{
  width: 86vw;
  max-width: 86vw;
  height: 100%;
  background-color: rgba(255,255,255,1);
  padding: 0vh 7vw 2vh 7vw;
  overflow: auto;
  position: relative;
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}
/*transparent area below textbox*/
.belowTextbox{
  width: 90vw;
  height: 5vw;
  padding: 0vh 5vw 2vh 5vw;
  overflow: hidden;
  background-color: #fff;
}
/*transparent area below textbox when collapsed*/
.belowTextboxOpaque{
  background-color: rgba(255,255,255,1);
}
/*Toggle project text*/
.showText{
  width:5vw;
  height:5vw;
  position: absolute;
  left: 47vw;
  margin: 0vh 0vw 0vh 1vw;
  -webkit-transition: 0.6s 0s;
  transition: 0.6s 0s;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.showText.Ship{
  width:5vw;
  height:5vw;
  position: absolute;
  left: 47vw;
  margin: 0vh 0vw 0vh 1vw;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.plusPos {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*Imagearea*/
.projectLargeImg{
  width: 100vw;
  height: 60vh !important;
  margin: 0px;
  padding: 0px;
  position: relative !important;
  left: 0vw !important;
  top: 0vh !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-style: none !important;
}
/*Internal video background*/
.projectNeutralVideo{
  width: 100vw;
  height: 60vh !important;
  margin: 0px !important;
  padding: 0px !important;
  background-color: #fff;
  border-style: none !important;
}
/*Wrapper for video and instructions*/
.videoWrapper{
  width: 100vw;
  height: 60vh;
  margin: 0px !important;
  padding: 0px !important;
  background-color: transparent;
}
/*In-project video*/
.projectEmbedVideo{
  width: 100vw;
  height: 60vh;
  background-color: #000;
  margin: 0px !important;
  padding: 0px !important;
  border-style: none !important;
}
video{
  width:100%;
  height:100%;
}
/*In-project video*/
.videoInstructions{
  position: relative;
  top: -8vh;
  left: 0vw;
  width: 100vw;
  height: auto;
  text-align: center;
  opacity: 0.5;
}
.arrowBtn{
  display: none;
}
/*Horizontal navigation of projects*/
*{
  padding:0;
  margin:0;
}

.slider_holder{
  padding: 0px;
  margin: 0px;
}
ul.slider{
  height:60vh;
  overflow:hidden;
  list-style:none;
  white-space:nowrap;
  margin: 0px;
  padding: 0px;
  position: relative;
  left: 0vw;
}
ul.slider li{
  vertical-align:top;
  display: inline-block;
  width: auto;
  padding: 0px !important;
  margin: 0px !important;
}
ul.slider li a{
  margin:0px;
  padding:0px;
}
/*Container for SoMe, covers entire width*/
#SoMeContainer{
  height: auto;
  width: 86vw;
  padding: 0vh;
  margin: 3vh 0vw 0vh 0vw;
  text-align: center !important;
}
/*Colored background of icons*/
.SoMeWrapper{
  display: inline-block;
  height: 5vh;
  width: 5vh;
  margin: 0vh 0.5vh;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
}
/*White icons*/
.SoMeIcons{
  height: 4vh;
  width: auto;
  margin: 0.5vh auto;
  -webkit-transition: 0.4s 0.03s;
  transition: 0.4s 0.03s;
}


}